/* 오른쪽 바로가기 칸 · 아래 고정 띠 — 2026-10-12 (operations/templates/_contact_rail.html).
   랜딩(tank 등, 자격 확인 없는 칸): 데스크톱(≥900)은 /campaign 과 같은 오른쪽 아래 알약 둘(2026-10-13 — 옛 오른쪽 가운데 카드 ·
   본문 오른쪽 여백은 걷음), 휴대폰(<900)은 아래 한 줄 띠 [사무실 번호][대표 번호][카톡].
   /campaign(자격 확인 있는 칸 .cr-full): 휴대폰은 아래 띠, 데스크톱은 오른쪽 아래 연락처 알약 하나(아래 「/campaign」).
   본문 아래에 띠 높이 + 안전 영역만큼 여백. 결: 흰 판 · 얇은 테두리 · 알약. 민트는 「스마트공장 자격 확인」 한 곳만. 카톡만 노랑. */
:root{--cr-w:212px;--cr-bar:64px}
.cr{color-scheme:light;box-sizing:border-box;font-family:"IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased;word-break:keep-all;z-index:45;color:#101418}
.cr *{box-sizing:border-box}
.cr a{text-decoration:none}
.cr-h{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#6e7781}
.cr-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:0 12px;margin-top:6px;
  border-radius:999px;border:1px solid #101418;background:#fff;color:#101418;font-size:14.5px;font-weight:600;
  letter-spacing:-.01em;white-space:nowrap;transition:background .2s ease,color .2s ease}
.cr-btn:hover{background:#101418;color:#fff}
.cr-btn.pri{background:#14a89a;border-color:#14a89a;color:#fff}
.cr-btn.pri:hover{background:#0e8878;border-color:#0e8878}
.cr-guide{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 2px;font-size:13px;font-weight:600;color:#5b6472}
.cr-guide:hover{color:#101418}
.cr-guide i{font-style:normal;font-size:1.15em;line-height:1}
.cr-tel{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 2px;border-top:1px solid #eceef1;color:#101418}
.cr-tel:first-of-type{border-top:0}
.cr-tel small{font-size:12.5px;font-weight:600;color:#6e7781}
.cr-tel b{font-size:15px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.cr-tel:hover b{color:#0e8878}
.cr-kakao{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:40px;margin-top:8px;padding:0 12px;
  border-radius:999px;background:#FEE500;color:#191919;font-size:14px;font-weight:700;white-space:nowrap}
.cr-kakao i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:2px 5px;border-radius:5px;background:#191919;color:#FEE500}
.cr-kakao:hover{background:#f5dc00}
.cr a:focus-visible,.cr summary:focus-visible{outline:2px solid #1f6feb;outline-offset:2px}
.cr-more,.cr-kakao-bar,.cr-s{display:none}

@media(min-width:900px){
  /* 데스크톱 — 2026-10-13 부터 랜딩(안쪽 페이지)도 /campaign 과 같은 오른쪽 아래 알약 둘(아래 .crp). 옛 오른쪽 가운데 카드는 걷음. */
  .cr{position:fixed;top:auto;right:20px;bottom:20px;left:auto;transform:none;width:auto;padding:0;background:none;border:0;border-radius:0;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .cr > .cr-sec,.cr > .cr-more,.cr > .cr-kakao-bar{display:none}
}

@media(max-width:899px){
  .cr{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);border:1px solid rgba(16,20,24,.12);border-radius:18px;padding:6px;
    box-shadow:0 10px 30px -10px rgba(16,20,24,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .cr-h{display:none}
  .cr-tel,.cr-btn,.cr-kakao{margin:0}
  /* 자격 확인이 없는 띠(랜딩) — [사무실 번호][대표 번호][카톡] */
  .cr:not(.cr-full) .cr-call{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
  .cr:not(.cr-full) .cr-tel{flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:46px;padding:4px 6px;
    border:1px solid #d9dde1;border-radius:12px;line-height:1.25}
  .cr:not(.cr-full) .cr-tel small{font-size:11px}
  .cr:not(.cr-full) .cr-tel b{font-size:13.5px}
  .cr:not(.cr-full) .cr-kakao{min-height:46px;border-radius:12px;padding:0 14px}
  .cr:not(.cr-full) .cr-kakao i{display:none}
}
/* ── /campaign(자격 확인 있는 칸 .cr-full) ──
   휴대폰(<900): 아래 띠 [스마트공장 자격][정책자금 자격][전화 ▾][카톡] — 10/12 판 그대로.
   데스크톱(≥900): 오른쪽 아래 알약 하나(연락처) — 2026-10-12 밤 사장님 「1분자격확인은 캠페인의 주요 업무가 아니야. hero에 버튼을
   넣는게 좋겠어. 알약은 연락처 카톡으로 하자.」 평소 [카카오 노랑 동그라미 · 「카톡 상담」], 누르면 위로 작은 판
   (카톡 상담 · 사무실 · 대표). 흰 바탕 · 얇은 선 · 아주 약한 그림자. 1분 확인은 맨 위 히어로의 선 단추 두 개로 옮겼다. */
.crp{display:none}
@media(max-width:899px){
  body.has-cr{padding-bottom:calc(var(--cr-bar) + 16px + env(safe-area-inset-bottom,0px))}
  .cr.cr-full{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:5px;align-items:stretch}
  .cr.cr-full .cr-go{display:contents}
  .cr.cr-full .cr-go .cr-guide,.cr.cr-full .cr-call{display:none}
  .cr.cr-full .cr-btn{min-height:44px;padding:0 6px;font-size:13.5px;border-radius:12px}
  .cr.cr-full .cr-x{display:none}
  .cr.cr-full .cr-s{display:inline}
  .cr.cr-full .cr-more{display:block;position:relative}
  .cr-more summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:3px;height:100%;min-height:44px;
    padding:0 11px;border:1px solid #d9dde1;border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
  .cr-more summary::-webkit-details-marker{display:none}
  .cr-more summary i{font-style:normal;font-size:10px;color:#6e7781}
  .cr-more[open] summary{border-color:#101418}
  .cr-sheet{position:absolute;right:-52px;bottom:calc(100% + 10px);width:min(260px,calc(100vw - 32px));background:#fff;
    border:1px solid rgba(16,20,24,.12);border-radius:14px;padding:6px 14px 10px;box-shadow:0 18px 40px -16px rgba(16,20,24,.4)}
  .cr-sheet .cr-guide{display:inline-flex}
  .cr.cr-full .cr-kakao-bar{display:flex;min-height:44px;padding:0 12px;border-radius:12px;font-size:13.5px}
}
@media(min-width:900px){
  /* 데스크톱 알약 — 칸(aside)은 오른쪽 아래 빈 그릇, 안의 띠 단추들은 숨기고 .crp 만 */
  .cr .crp{display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative}
  /* 알약 둘 — 크기 · 모서리 같게(높이 44 · 폭 136). 2026-10-12 밤 사장님 「스티키 유튜브 빨간색 카톡 노란색은 아이콘만 넣고 알약은
     흰색으로」 — 흰 바탕 · 얇은 선 · 아주 약한 그림자 · 진한 글자(#0f172a). 색은 아이콘 동그라미(28px)에만:
     유튜브 #FF0000 안 흰 재생 표시, 카톡 #FEE500 안 진한 말풍선. 펼침 판은 흰 판 그대로, 두 알약 위로 열린다. */
  .crp-b{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;width:136px;height:44px;padding:0 14px 0 8px;border-radius:999px;
    cursor:pointer;background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:0 3px 10px -7px rgba(15,23,42,.3);text-decoration:none;
    font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#0f172a;white-space:nowrap;
    transition:border-color .16s ease,box-shadow .16s ease}
  .crp-b:hover{border-color:rgba(15,23,42,.28);box-shadow:0 5px 14px -7px rgba(15,23,42,.34)}
  .crp-kk[aria-expanded="true"]{border-color:#0f172a}
  .crp-k{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none}
  .crp-kk .crp-k{background:#FEE500}
  .crp-yt .crp-k{background:#FF0000}
  .crp-k svg{width:16px;height:16px;display:block}
  .crp-p{position:absolute;right:0;bottom:calc(100% + 10px);min-width:240px;padding:6px;border-radius:14px;background:#fff;
    border:1px solid rgba(15,23,42,.10);box-shadow:0 10px 28px -14px rgba(15,23,42,.3)}
  .crp-p[hidden]{display:none}
  .crp-p a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:9px;
    color:#0f172a;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
  .crp-p a small{font-size:12.5px;font-weight:500;color:#64748b}
  .crp-p a b{font-weight:500;font-variant-numeric:tabular-nums}
  .crp-p a:hover{background:rgba(15,23,42,.05)}
  .crp-p .crp-kakao{justify-content:flex-start;gap:9px;font-weight:600}
  .crp-p .crp-kakao i{width:18px;height:18px;border-radius:50%;background:#FEE500;display:grid;place-items:center;flex:none}
  .crp-p .crp-kakao i svg{width:11px;height:11px}
  .crp-b:focus-visible,.crp-p a:focus-visible{outline:2px solid #1f6feb;outline-offset:2px}
}
@media(max-width:340px){
  .cr.cr-full .cr-btn{font-size:12.5px}
  .cr-more summary,.cr.cr-full .cr-kakao-bar{padding:0 8px}
}
@media(prefers-reduced-motion:reduce){.cr-btn,.crp-b{transition:none}}