@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   빌더 공용 푸터 스킨  bf- (Builder Footer)  v2
   2026-07-27 / 대상: theme/design/template/footer/index.html

   [구조]  3단 가로 밴드 — 카드형 3열이 아니다.
     1) 브랜드 밴드 : 회사명 + 소개글 + SNS   |  대표전화(크게) + 팩스/이메일
     2) 정보 밴드   : 대표자·사업자·통신판매·개인정보·주소를 인라인으로 나열
     3) 하단 밴드   : 정책 링크 + 카피라이트

   [다른 빌더로 옮길 때]
   1) 이 style.css 와 index.html 두 파일만 복사한다.
   2) 강조색은 관리자 사이트설정 색(--c-primary)을 자동으로 따라간다. 손댈 것 없음.
      그 변수가 없는 사이트에서는 --bf-accent-fallback 값이 쓰인다.
   3) 배경·폭·서체만 바꾸고 싶으면 아래 .bf 변수만 교체한다.
   ============================================================================ */

.bf{
  /* ── 강조색 : 관리자 사이트설정과 연동 ──────────────────────
     bg_sub.php 가 :root 에 --c-primary(사이트 배경색) / --c-accent(글자색)를
     DB(g5_site_info) 값으로 주입한다. 여기서는 그것을 그대로 받아 쓴다.
     주입이 없는 사이트를 대비해 폴백만 지정한다. */
  --bf-accent-fallback:#E60012;
  --bf-accent:var(--c-primary, var(--bf-accent-fallback));

  /* ── 색 ─────────────────────────────────────────────────── */
  --bf-bg:#0B1B2E;                      /* 배경 : 메인 회사소개 섹션과 동일 딥네이비 */
  --bf-bg-2:#081524;                    /* 하단 카피라이트 띠 */
  --bf-title:#ffffff;
  --bf-text:rgba(255,255,255,.76);
  --bf-muted:rgba(255,255,255,.46);
  --bf-line:rgba(255,255,255,.12);

  /* ── 치수 ───────────────────────────────────────────────── */
  --bf-max:1180px;
  --bf-pad-x:24px;

  /* ── 서체 ───────────────────────────────────────────────── */
  --bf-sans:"IBM Plex Sans KR","Malgun Gothic",sans-serif;
  --bf-mono:"IBM Plex Mono","Consolas",monospace;

  font-family:var(--bf-sans);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* 빌더 테마 대부분이 `#footer{background:#fff}` 를 ID로 잡아 두므로 특이도를 맞춘다 */
.bf,
#footer.bf{
  background:var(--bf-bg);
  color:var(--bf-text);
  overflow:visible;
}
.bf *{box-sizing:border-box;}
.bf a,#footer.bf a{color:inherit;text-decoration:none;transition:color .18s ease;}
.bf a:hover,#footer.bf a:hover{color:var(--bf-title);text-decoration:none;}
.bf a:focus-visible{outline:2px solid var(--bf-accent);outline-offset:3px;}
.bf-inner{max-width:var(--bf-max);margin:0 auto;padding:0 var(--bf-pad-x);}

/* ══ 1) 브랜드 밴드 ═══════════════════════════════════════════ */
.bf-band{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:48px;flex-wrap:wrap;padding:52px 0 44px;
}

/* 좌 : 회사명 + 소개글 + SNS */
.bf-brand{flex:1 1 380px;min-width:0;position:relative;padding-left:18px;}
.bf-brand::before{                      /* 회사명 앞 세로 강조 바 (관리자 색 연동) */
  content:"";position:absolute;left:0;top:4px;
  width:3px;height:26px;background:var(--bf-accent);display:block;
}
.bf-name{
  margin:0 0 10px;color:var(--bf-title);
  font-size:1.42rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;
}
.bf-logo{display:block;max-width:190px;height:auto;margin:0 0 12px;}
.bf-slogan{                             /* 관리자 하단설정 '짧은 소개글'과 연동 */
  margin:0;color:var(--bf-muted);font-size:.92rem;line-height:1.8;
  max-width:34em;word-break:keep-all;
}
.bf-sns{display:flex;gap:9px;margin:20px 0 0;padding:0;list-style:none;}
.bf-sns a{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bf-line);color:var(--bf-muted);font-size:.82rem;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.bf-sns a:hover{border-color:var(--bf-accent);background:var(--bf-accent);color:#fff;}

/* 우 : 대표 연락처 */
.bf-call{flex:0 1 auto;min-width:0;text-align:right;}
.bf-call-label{
  margin:0 0 6px;color:var(--bf-muted);
  font-family:var(--bf-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}
.bf-tel{
  margin:0 0 12px;color:var(--bf-title);
  font-family:var(--bf-mono);font-size:1.18rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.35;word-break:keep-all;
}
.bf-tel a:hover{color:var(--bf-accent);}
.bf-call-sub{
  display:flex;margin:0;padding:0;list-style:none;
  justify-content:flex-end;flex-wrap:wrap;
}
.bf-call-sub li{display:flex;align-items:center;font-size:.84rem;color:var(--bf-text);}
.bf-call-sub li + li::before{
  content:"";width:1px;height:11px;background:var(--bf-line);margin:0 12px;display:block;
}
.bf-call-sub .bf-k{
  color:var(--bf-muted);font-family:var(--bf-mono);
  font-size:.68rem;letter-spacing:.1em;margin-right:7px;text-transform:uppercase;
}

/* ══ 2) 정보 밴드 ═════════════════════════════════════════════ */
.bf-meta{border-top:1px solid var(--bf-line);}
.bf-meta-list{
  display:flex;flex-wrap:wrap;align-items:center;
  margin:0;padding:20px 0;list-style:none;
}
.bf-meta-list li{
  display:flex;align-items:baseline;
  font-size:.85rem;color:var(--bf-text);
  padding:3px 0;word-break:keep-all;
}
.bf-meta-list li + li::before{
  content:"";flex:0 0 1px;width:1px;height:11px;
  background:var(--bf-line);margin:0 14px;display:block;align-self:center;
}
.bf-meta-list .bf-k{
  color:var(--bf-muted);font-size:.78rem;margin-right:7px;flex:0 0 auto;
}

/* ══ 3) 하단 밴드 ═════════════════════════════════════════════ */
.bf-bottom{background:var(--bf-bg-2);border-top:1px solid var(--bf-line);}
.bf-bottom .bf-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;
}
.bf-policy{display:flex;margin:0;padding:0;list-style:none;flex-wrap:wrap;}
.bf-policy li{display:flex;align-items:center;}
.bf-policy li + li::before{
  content:"";width:1px;height:11px;background:var(--bf-line);margin:0 12px;display:block;
}
.bf-policy a{font-size:.8rem;color:var(--bf-muted);}
.bf-policy a:hover{color:var(--bf-title);}
.bf-policy .bf-strong{color:var(--bf-text);font-weight:600;}
.bf-copy{margin:0;font-family:var(--bf-sans);font-size:.76rem;color:var(--bf-muted);}

/* ══ 반응형 ═══════════════════════════════════════════════════ */
@media (max-width:1023px){
  .bf-band{gap:32px;padding:42px 0 34px;}
  .bf-call{text-align:left;flex:1 1 100%;}
  .bf-call-sub{justify-content:flex-start;}
}
@media (max-width:640px){
  .bf{--bf-pad-x:18px;}
  .bf-band{padding:34px 0 28px;gap:26px;}
  .bf-name{font-size:1.24rem;}
  .bf-tel{font-size:1.05rem;}
  .bf-meta-list{padding:16px 0;flex-direction:column;align-items:flex-start;}
  .bf-meta-list li{padding:6px 0;width:100%;}
  .bf-meta-list li + li::before{display:none;}
  .bf-meta-list li + li{border-top:1px solid rgba(255,255,255,.06);}
  .bf-call-sub{flex-direction:column;align-items:flex-start;}
  .bf-call-sub li + li::before{display:none;}
  .bf-call-sub li + li{margin-top:4px;}
  .bf-bottom .bf-inner{flex-direction:column;align-items:flex-start;gap:10px;}
}
@media (prefers-reduced-motion:reduce){
  .bf a,.bf-sns a{transition:none !important;}
}