/* ============================================================
   정량펌프연구소 공유 스타일 (site.css) — 전 페이지 디자인 통일 (홈 기준)
   각 페이지 <head> 끝(인라인 <style> 이후)에서 로드되어,
   색 토큰을 홈 팔레트로 덮어써 배경·색·제목을 통일한다.
   B 계열(recommend·leadfluid·inquiry)의 --navy/--teal/--text/--bg 변수도
   여기서 홈 값으로 재매핑되므로 마크업 수정 없이 톤이 맞춰진다.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 1) 색 토큰 — 홈 팔레트로 통일 */
:root{
  --ink:#1A1A1A; --gray:#6B6B6B; --gray-2:#9A9A9A;
  --green:#1E3A5F; --green-dk:#142A45; --green-bg:#EDF1F8;
  --line:#EAEAEA; --bg:#FFFFFF;
  --serif:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* B 계열 변수 → 홈 팔레트로 재매핑 (네이비/틸 → 잉크/초록, 배경 → 흰색) */
  --navy:#1A1A1A;
  --teal:#1E3A5F;
  --text:#1A1A1A;
  --muted:#6B6B6B;
  --border:#EAEAEA;
  --soft:#F2F4F6;
  --soft-blue:#EDF1F8;
  --accent:#1E3A5F;
}
/* 중요 글자 하이라이트 (마커 스타일) — 전 페이지 공통 */
.hl{ background:linear-gradient(transparent 60%, #FFE49A 60%); font-weight:700; padding:0 1px; }

/* 2) 본문 기본 — 흰 배경 + 한글 줄바꿈 */
html, body{
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:clip;            /* 모바일 가로 스크롤 차단 (sticky 헤더 영향 없음) */
}
img, svg, video{ max-width:100%; height:auto; }
a{ text-decoration:none; color:inherit; }
:target{ scroll-margin-top:76px; }

/* 3) 제목 — 세리프 (홈 기준). 컴포넌트 라벨(div/span)은 영향 없음 */
h1, h2, h3{
  font-family:var(--serif);
  color:var(--ink);
}

/* 4) 헤더 — 흰 배경 + 하단 라인 (A·B 헤더 공통 톤) */
header,
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

/* 5) 푸터로 옮긴 회사정보 블록 정렬 (홈 .botbar 안) */
.botbar .company{
  max-width:1080px;
  margin:0 auto 18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.botbar .company .cbrand{ font-family:var(--serif); }

/* ============================================================
   6) 공유 상단바 + 좌측 사이드바 (site.js가 주입) — 전 페이지 동일
   ============================================================ */
body{ padding-top:60px; padding-left:300px; }
.ch-top{ position:fixed; top:0; left:0; right:0; height:60px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 22px; z-index:40; }
.ch-top .ch-brand{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink); text-decoration:none; }
.ch-top .ch-brand b{ color:var(--green); }
.ch-search{ margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--soft); border-radius:10px; padding:9px 14px; width:240px; }
.ch-search svg{ width:16px; height:16px; stroke:var(--gray-2); fill:none; stroke-width:2; flex:0 0 auto; }
.ch-search{ position:relative; }
.ch-search input{ border:0; background:none; outline:none; font:inherit; font-size:14px; width:100%; color:var(--ink); }
.ch-results{ position:absolute; top:calc(100% + 10px); right:0; width:360px; max-width:78vw; max-height:70vh; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 38px rgba(10,37,64,.16); padding:6px; display:none; z-index:60; }
.ch-results.open{ display:block; }
.ch-results a{ display:block; padding:9px 11px; border-radius:8px; }
.ch-results a:hover, .ch-results a.sel{ background:var(--soft); }
.ch-results .rc{ font-size:11px; color:var(--green); font-weight:700; letter-spacing:.02em; }
.ch-results .rt{ font-size:13.5px; color:var(--ink); margin-top:2px; line-height:1.4; }
.ch-results .rt mark{ background:#fff3cd; color:var(--ink); padding:0 1px; border-radius:2px; }
.ch-results .rempty{ padding:14px 12px; font-size:13px; color:var(--gray-2); }
.ch-cta{ background:var(--green); color:#fff; font-weight:700; font-size:14px; padding:10px 16px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.ch-cta:hover{ background:var(--green-dk); }
.ch-burger{ display:none; width:38px; height:38px; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0; }
.ch-burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; }
.ch-side{ position:fixed; top:60px; left:0; bottom:0; width:300px; background:#fff; border-right:1px solid var(--line); overflow-y:auto; padding:20px 16px 30px; z-index:38; display:flex; flex-direction:column; }
.ch-side nav{ display:flex; flex-direction:column; }
.ch-side .s-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-size:15.5px; font-weight:600; color:var(--gray); text-decoration:none; }
.ch-side .s-item svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ch-side .s-item:hover{ background:var(--soft); color:var(--ink); }
.ch-side .s-item.active{ background:var(--green-bg); color:var(--green); }
.ch-side .s-sub{ display:flex; flex-direction:column; padding:2px 0 8px 46px; }
.ch-side .s-sub a{ padding:7px 0; font-size:13.5px; color:var(--gray-2); font-weight:500; text-decoration:none; }
.ch-side .s-sub a:hover{ color:var(--ink); }
.ch-side .s-sub a.active{ color:var(--green); font-weight:700; }
.ch-side-foot{ margin-top:24px; padding:14px 14px 4px; font-size:11px; color:var(--gray-2); line-height:1.7; border-top:1px solid var(--line); }
.ch-scrim{ display:none; }
@media(max-width:900px){
  body{ padding-left:0; }
  .ch-search{ display:none; }
  .ch-burger{ display:flex; }
  .ch-side{ transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 10px 40px rgba(0,0,0,.12); width:284px; }
  .ch-side.open{ transform:none; }
  .ch-scrim.open{ display:block; position:fixed; inset:60px 0 0 0; background:rgba(0,0,0,.4); z-index:37; }
}

/* 7) 공유 푸터 (site.js가 주입) — 토스식 다단 */
.chrome-footer{ background:#F9FAFB; border-top:1px solid var(--line); margin-top:56px; }
.cf-inner{ max-width:1080px; margin:0 auto; padding:40px 28px; }
.cf-cols{ display:flex; gap:64px; flex-wrap:wrap; margin-bottom:26px; }
.cf-col{ display:flex; flex-direction:column; gap:10px; }
.cf-col h4{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.cf-col a, .cf-col span{ font-size:13px; color:var(--gray); text-decoration:none; }
.cf-col a:hover{ color:var(--green); }
.cf-co{ font-size:12.5px; color:var(--gray-2); line-height:1.9; border-top:1px solid var(--line); padding-top:20px; }
.cf-co strong{ font-family:var(--serif); color:var(--ink); font-size:13.5px; }
.cf-cp{ margin-top:8px; font-size:12px; color:var(--gray-2); }
@media(max-width:640px){ .cf-cols{ gap:28px; } .cf-inner{ padding:32px 22px; } }

/* 7-1) 아티클(가이드·블로그 글) — 토스식 가운데 제목 (breadcrumb 있는 히어로만) */
.hero:has(.crumb){ text-align:center; }
.hero:has(.crumb) .lead{ max-width:620px; margin-left:auto; margin-right:auto; }
.hero:has(.crumb) .crumb{ justify-content:center; }
.article-main h1{ text-align:center; }
.article-main .breadcrumb{ text-align:center; }
.article-main .meta{ justify-content:center; text-align:center; flex-wrap:wrap; }

/* 8) 공유 무료 수리진단 신청 팝업 (site.js가 주입) */
.rp-modal{ position:fixed; inset:0; background:rgba(10,20,40,.55); display:none; align-items:flex-start; justify-content:center; padding:24px 16px; z-index:100; overflow:auto; }
.rp-modal.open{ display:flex; }
.rp-box{ position:relative; background:#fff; border-radius:16px; max-width:480px; width:100%; margin:auto; padding:28px 26px 22px; }
.rp-close{ position:absolute; top:12px; right:16px; font-size:26px; line-height:1; color:var(--gray); background:none; border:0; cursor:pointer; }
.rp-close:hover{ color:var(--ink); }
.rp-box h3{ font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:6px; }
.rp-sub{ color:var(--gray); font-size:13.5px; margin-bottom:14px; }
.rp-box label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-top:12px; }
.rp-box .opt{ color:var(--gray-2); font-weight:400; }
.rp-box .req{ color:#c00; }
.rp-box input, .rp-box textarea{ width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background:#fff; color:var(--ink); }
.rp-box textarea{ min-height:72px; resize:vertical; }
.rp-send{ margin-top:18px; width:100%; background:var(--ink); color:#fff; border:0; padding:13px; border-radius:9px; font-weight:700; font-size:15px; cursor:pointer; }
.rp-send:hover{ background:#000; }
.rp-send:disabled{ opacity:.6; cursor:default; }
.rp-alt{ text-align:center; font-size:12.5px; color:var(--gray); margin-top:12px; }
.rp-alt a{ color:var(--green); font-weight:600; }
.rp-done{ display:none; text-align:center; padding:18px 0; }
.rp-done .ok{ width:52px; height:52px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin:0 auto 14px; }
.rp-done h3{ margin-bottom:6px; }
.rp-done p{ color:var(--gray); font-size:14px; }

/* 9) 나비엠알오 LeadFluid 바로가기 — 우측 고정 플로팅 */
.navimro-fab{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:70; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:13px 12px; width:104px; text-align:center; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.navimro-fab:hover{ transform:translateY(-50%) translateX(-3px); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.navimro-fab .nm-brand{ display:block; font-weight:800; font-size:14px; letter-spacing:-.02em; color:#111; }
.navimro-fab .nm-brand b{ color:#FF6A00; }
.navimro-fab .nm-t{ display:block; font-size:11px; color:var(--gray); margin-top:6px; line-height:1.4; font-weight:700; }
@media(max-width:820px){ .navimro-fab{ width:auto; padding:9px 12px; top:auto; bottom:14px; right:14px; transform:none; border-radius:30px; } .navimro-fab:hover{ transform:none; } .navimro-fab .nm-t{ display:none; } }
/* 데스크톱(웹)에서만 나비엠알오 FAB 확대 (≈1.3배). 모바일은 위 규칙 유지 */
@media(min-width:821px){ .navimro-fab{ width:135px; padding:17px 15px; right:18px; border-radius:16px; } .navimro-fab .nm-brand{ font-size:18px; } .navimro-fab .nm-t{ font-size:14px; margin-top:8px; } }

/* 임베드(iframe) 모드에서는 공유 상단바·사이드바·여백 해제 */
body.embed-mode{ padding:0 !important; }
body.embed-mode .ch-top, body.embed-mode .ch-side, body.embed-mode .ch-scrim,
body.embed-mode .chrome-footer, body.embed-mode .navimro-fab{ display:none !important; }

/* ============================================================
   10) 셋업사례 상세 (토스 아티클형 + GEO) — /setups/*.html 공유
   ============================================================ */
.sd-wrap{ max-width:720px; margin:0 auto; padding:40px 24px 60px; }
.sd-crumb{ font-size:12.5px; color:var(--green); font-weight:700; text-align:center; margin-bottom:16px; }
.sd-crumb a{ color:var(--green); }
.sd-wrap h1{ font-family:var(--serif); font-size:clamp(23px,4.6vw,32px); font-weight:700; text-align:center; line-height:1.36; letter-spacing:-.02em; }
.sd-meta{ text-align:center; font-size:13px; color:var(--gray-2); margin-top:14px; }
.sd-summary{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin:32px 0; }
.sd-summary h3{ font-family:var(--serif); font-size:15px; font-weight:600; margin-bottom:12px; }
.sd-summary .row{ display:flex; gap:8px; font-size:14px; color:#2a2a2a; padding:5px 0; line-height:1.6; }
.sd-summary .row .k{ color:var(--green); font-weight:700; flex:0 0 84px; }
.sd-summary .row b{ color:var(--ink); font-weight:600; }
.sd-summary .row a{ color:var(--green); font-weight:600; word-break:break-all; }
.sd-answer{ background:var(--green-bg); border:1px solid #d6e0ee; border-radius:12px; padding:16px 18px; font-size:14.5px; color:#26333f; line-height:1.75; margin-bottom:28px; }
.sd-answer b{ color:var(--ink); }
.sd-body h2{ font-family:var(--serif); font-size:20px; font-weight:600; margin:30px 0 12px; }
.sd-body p{ font-size:15.5px; color:#2a2a2a; line-height:1.8; margin-bottom:14px; }
.sd-body b{ color:var(--ink); }
.sd-quote{ font-size:13.5px; color:#3a3a3a; line-height:1.7; background:#f7f9fc; border-left:3px solid var(--green); border-radius:0 8px 8px 0; padding:12px 14px; margin:8px 0 6px; }
.sd-quote mark{ background:#fff3cd; color:var(--ink); font-weight:700; padding:0 2px; border-radius:2px; }
.sd-cite{ font-size:12.5px; color:var(--gray); margin-bottom:20px; }
.sd-cite a{ color:var(--green); font-weight:600; }
.sd-bridge{ background:#0A2540; border-radius:16px; padding:26px 24px; text-align:center; margin:34px 0; }
.sd-bridge h2{ color:#fff; font-family:var(--serif); font-size:clamp(18px,4vw,22px); margin-bottom:10px; }
.sd-bridge p{ color:#C9D4E2; font-size:14.5px; line-height:1.7; max-width:560px; margin:0 auto 18px; }
.sd-bridge a{ display:inline-block; background:#fff; color:#0A2540; padding:12px 22px; border-radius:9px; font-weight:700; font-size:14px; }
.sd-sources{ border-top:1px solid var(--line); margin-top:34px; padding-top:18px; font-size:12.5px; color:var(--gray); line-height:1.85; }
.sd-sources h4{ font-size:13px; color:var(--ink); font-weight:700; margin-bottom:6px; }
.sd-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.sd-tags span{ font-size:12px; color:var(--green); background:var(--green-bg); border-radius:20px; padding:5px 12px; font-weight:600; }
/* 관련 콘텐츠 3열 */
.sd-related{ margin-top:46px; }
.sd-related h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:16px; }
.sd-rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sd-rc{ display:block; border:1px solid var(--line); border-radius:12px; padding:16px; transition:border-color .15s, transform .15s; }
.sd-rc:hover{ border-color:var(--green); transform:translateY(-2px); }
.sd-rc .cat{ font-size:11px; font-weight:700; color:var(--green); letter-spacing:.02em; }
.sd-rc .t{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; margin-top:6px; }
.sd-rc .d{ font-size:12px; color:var(--gray); margin-top:8px; line-height:1.55; }
@media(max-width:640px){ .sd-rel-grid{ grid-template-columns:1fr; } }

/* ===== 소프트웨어 기능 미니화면 + 비교표 (전 가이드 공용) ===== */
.sw-sec{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.sw-sec h2{ font-family:var(--serif); font-size:clamp(19px,4.4vw,23px); font-weight:600; color:var(--ink); margin-bottom:6px; }
.sw-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0 6px; }
.sw-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 12px 30px rgba(10,37,64,.09); }
.sw-card .ch{ display:flex; align-items:center; gap:7px; padding:9px 11px; background:#F6F7F9; border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700; color:var(--ink); }
.sw-card .ch .gd{ width:9px; height:9px; border-radius:2px; background:var(--green); flex:0 0 auto; }
.sw-card .cb{ padding:8px 10px 11px; }
.sw-card .cap2{ font-size:10.5px; color:var(--gray); line-height:1.5; margin-top:6px; }
.sw-card .chan{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:7px 9px; margin-bottom:6px; font-size:10.5px; }
.sw-card .chan .cn{ font-weight:700; color:var(--ink); }
.sw-card .chan .cf{ color:var(--gray); text-align:right; }
.sw-card .chan .cs2{ color:var(--green); font-weight:700; font-size:9.5px; }
.sw-card .setr{ display:grid; grid-template-columns:1fr auto auto; gap:7px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:7px 9px; margin-bottom:6px; font-size:10.5px; }
.sw-card .setr .sk{ color:var(--gray); }
.sw-card .setr .sv{ font-weight:700; color:var(--ink); }
.sw-card .setr .sa{ background:var(--green); color:#fff; border-radius:4px; padding:3px 7px; font-size:9px; font-weight:700; }
.sw-card .log{ width:100%; border-collapse:collapse; font-size:9.5px; }
.sw-card .log td{ border-bottom:1px solid #EEF1F4; padding:5px 4px; color:var(--gray); }
.sw-card .log td:first-child{ color:var(--gray-2); }
.sw-card .log td:last-child{ color:var(--ink); font-weight:600; text-align:right; }
.sw-card .rep{ display:inline-block; background:var(--green-bg); color:var(--green); border-radius:4px; padding:1px 6px; font-weight:700; }
.sw-cap{ font-size:12.5px; color:var(--gray); line-height:1.6; margin-top:8px; }
.sw-cap b{ color:var(--ink); }
.cmp-wrap{ overflow-x:auto; }
.cmp{ width:100%; border-collapse:collapse; margin:12px 0 4px; font-size:13.5px; }
.cmp th,.cmp td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.5; }
.cmp thead th{ background:#0A2540; color:#fff; font-weight:700; }
.cmp tbody th{ background:#f7f9fc; font-weight:700; color:var(--ink); }
.cmp td.c{ text-align:center; }
.cmp .yes{ color:var(--green); font-weight:700; }
.cmp .no{ color:var(--gray-2); }
@media(max-width:640px){ .sw-cards{ grid-template-columns:1fr; } }
