/* 상세 화면 오른쪽 「도입 문의」 카드 접기 — 2026-10-13 사장님 「스티키를 접기하는게 좋겠다. 필요하긴한데 없애기도 머하고..」
   생산라인 상세(.pld-*) · 설비 상세(.eqd-*) 가 같이 쓴다(templates/_lead_fold.html 이 html 에 lf-js · lf-open 을 단다).
   데스크톱(≥961)만: 처음엔 접혀 오른쪽에 작은 알약 「도입 문의 ›」 하나(생산라인 민트 · 설비 주황) — 오른쪽 칸 자리를 비우지 않고
   본문이 전체 폭을 쓴다. 누르면 카드(320px)가 머리띠 아래 오른쪽에 떠서 펼쳐지고(position:fixed — 본문을 밀지 않음),
   카드 오른쪽 위 「—」(접기)로 다시 알약. 바깥을 눌러도 닫히지 않는다. 휴대폰(≤960)은 예전 그대로(카드가 본문 아래에 쌓임). */
.lf-pill,.lf-close,.lf-call-p{display:none}
.pld-page{--lf-accent:var(--pld-accent,#2fd8c9);--lf-on:var(--pld-on-accent,#04211d)}
.eqd-page{--lf-accent:var(--eqd-accent,#d97b3f);--lf-on:#1a1006}
@media (min-width:961px){
  /* 2026-10-13 「스티키 알약이 설비와 생산라인 전부 눈에 안띄어. 눈에 띄는곳에 배치해..」 — 오른쪽 위 → 오른쪽 아래(24 · 24),
     높이 54 · 두 줄(「도입 문의」 / 「구성 · 견적 받기」) · 왼쪽 흰 선 아이콘 · 진한 그림자. 처음 한 번 부드럽게 올라오고 은은한 고리 두 번.
     누르면 알약 바로 위로 320px 카드가 열린다(알약은 그대로 — 다시 누르거나 카드의 「—」로 접기). */
  html.lf-js .pld-content-grid,html.lf-js .eqd-content-grid{grid-template-columns:minmax(0,1fr)}
  /* 2026-10-13 「스티키가 너무 밑에 있어 안보여.. 설비도 생산라인도. 그리고 알약을 두개로 하자. 바로 연락하게끔.」
     알약 묶음은 오른쪽 가장자리(24px) · 화면 아래에서 30vh 높이. 위 「도입 문의」(채움) · 아래 「바로 연락」(흰 바탕 · 진한 테두리), 같은 폭 · 간격 10.
     카드(320px)와 바로 연락 판은 알약 왼쪽에서 위로 열린다(아래끝을 알약 묶음 아래끝에 맞춤). 하나가 열리면 다른 판은 닫힌다. */
  html.lf-js .pld-side-col,html.lf-js .eqd-side-col{position:fixed;top:auto;bottom:30vh;right:24px;width:172px;z-index:70;
    display:flex;flex-direction:column;align-items:stretch;gap:10px;pointer-events:none}
  html.lf-js .pld-side-col > *,html.lf-js .eqd-side-col > *{pointer-events:auto}
  html.lf-js:not(.lf-open) .lf-card{display:none}
  html.lf-js .lf-card{position:absolute;right:calc(100% + 12px);bottom:0;width:320px;max-height:calc(70vh - 5rem);overflow:auto;box-sizing:border-box}
  html.lf-js .lf-pill{position:relative;display:flex;width:100%;box-sizing:border-box;align-items:center;gap:11px;height:54px;padding:0 16px 0 11px;border:0;border-radius:999px;cursor:pointer;
    background:var(--lf-accent);color:var(--lf-on);font:inherit;text-align:left;white-space:nowrap;
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 34px -12px rgba(0,0,0,.65),0 10px 30px -14px var(--lf-accent);
    transition:filter .16s ease,transform .25s ease,opacity .25s ease,visibility 0s linear 0s}
  html.lf-js .lf-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 var(--lf-accent)}
  /* 머리의 「문의하기」 단추가 화면에 보이는 동안은 숨기고(_lead_fold.html 이 html.lf-head 를 단다), 지나가면 올라온다.
     올라오는 효과 · 고리 두 번은 처음 한 번만(.lf-in 을 한 번만 단다). */
  html.lf-js.lf-head .lf-pill{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
  html.lf-js .lf-pill.lf-in{animation:lf-rise .5s cubic-bezier(.16,1,.3,1) backwards}
  html.lf-js .lf-pill.lf-in::after{animation:lf-ring 1.6s ease-out .6s 2}
  html.lf-js .lf-pill:hover{filter:brightness(1.07);transform:translateY(-1px)}
  html.lf-js .lf-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.22);flex:none}
  html.lf-js .lf-ic svg{width:19px;height:19px;display:block}
  html.lf-js .lf-tx{display:flex;flex-direction:column;line-height:1.2}
  html.lf-js .lf-tx b{font-size:15px;font-weight:800;letter-spacing:-.01em}
  html.lf-js .lf-tx small{font-size:12px;font-weight:600;opacity:.82;margin-top:2px}
  html.lf-js.lf-open .lf-pill:not(.lf-call){filter:none;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 16px 34px -12px rgba(0,0,0,.65)}
  /* 「바로 연락」 — 흰 바탕 · 진한 테두리 · 진한 글자, 전화 아이콘은 진한 동그라미 안 흰 선 */
  html.lf-js .lf-pill.lf-call{background:#fff;color:#0f172a;border:1.5px solid #0f172a;box-shadow:0 16px 34px -14px rgba(0,0,0,.6)}
  html.lf-js .lf-pill.lf-call .lf-ic{background:#0f172a;color:#fff}
  html.lf-js .lf-pill.lf-call::after{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  html.lf-js .lf-pill.lf-call[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.4),0 16px 34px -14px rgba(0,0,0,.6)}
  html.lf-js .lf-call-p{position:absolute;right:calc(100% + 12px);bottom:0;display:flex;flex-direction:column;min-width:240px;padding:6px;
    border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:0 16px 34px -14px rgba(0,0,0,.6);pointer-events:auto}
  html.lf-js .lf-call-p[hidden]{display:none}
  html.lf-js .lf-call-p a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:9px;
    color:#0f172a;text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
  html.lf-js .lf-call-p a small{font-size:12.5px;color:#64748b}
  html.lf-js .lf-call-p a b{font-weight:600;font-variant-numeric:tabular-nums}
  html.lf-js .lf-call-p a:hover{background:rgba(15,23,42,.06)}
  html.lf-js .lf-call-p .lf-kakao{justify-content:flex-start;gap:9px;font-weight:700}
  html.lf-js .lf-call-p .lf-kakao i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FEE500;flex:none}
  html.lf-js .lf-call-p .lf-kakao i svg{width:12px;height:12px}
  html.lf-js .lf-call-p a:focus-visible{outline:2px solid #1f6feb;outline-offset:2px}
  html.lf-js.lf-head .lf-call-p{display:none}
  html.lf-js .lf-close{display:grid;place-items:center;position:absolute;top:.7rem;right:.7rem;width:28px;height:28px;padding:0;border-radius:50%;
    border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.7);font:inherit;font-size:15px;line-height:1;cursor:pointer}
  html.lf-js .lf-close:hover{color:#fff;border-color:rgba(255,255,255,.35)}
  html.lf-js .lf-pill:focus-visible,html.lf-js .lf-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
@keyframes lf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lf-ring{0%{box-shadow:0 0 0 0 var(--lf-accent);opacity:.7}100%{box-shadow:0 0 0 16px var(--lf-accent);opacity:0}}
@media (prefers-reduced-motion:reduce){.lf-pill,.lf-pill::after,.lf-pill.lf-in,.lf-pill.lf-in::after{animation:none!important;transition:none!important}}