@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 푸터 부품 모양 (모든 푸터 세트 공통)

   예전 rb.layout_ft/basic/style.css. 세트가 늘어 부품으로 뺐다(헤더의 rb.css/header.css 와 같다).
   기본 배치가 곧 basic 의 모양이고, 세트 폴더의 style.css 는 배치 · 색만 바꾼다.
   싣는 곳 — rb.theme/footer.lib.php bf_ft_assets() (order 7).
   ========================================================================== */

.bf-footer-module { padding-top: 30px; }
.bf-footer-module:empty { display: none; }

/* 사이트맵 칼럼 배치는 목업(main.css 13절)의 flex + wrap 을 그대로 쓴다.

   예전에 여기서 grid(auto-fit minmax(120px,1fr))로 바꿨더니 사이트맵이
   120px 한 칼럼으로 접혔다. 부모 .footer-top .bf-inner 가 flex 라
   .sitemap 은 flex 아이템인데, grid 에는 내용 기반의 선호 폭이 없어서
   최소폭까지 쪼그라든 탓이다. 아이템으로서 늘어나게 해 주면 된다.

   메뉴 수는 운영자가 정하므로(목업은 5개, 지금은 6개) 칼럼 수를 고정하지
   않고 wrap 에 맡긴다. 간격만 목업 50px 에서 조금 줄여 6칼럼이 한 줄에
   들어가게 한다. */
.footer-top .sitemap {
  flex: 1 1 auto;
  min-width: 0;
  gap: 24px 40px;
  align-content: flex-start;
}
.sitemap dl { min-width: 88px; }
.sitemap dt a { color: inherit; }

@media (max-width: 900px) {
  .footer-top .sitemap { gap: 20px 30px; }
  .sitemap dl { min-width: 44%; }
}

/* 로고 두 장 중 한 장만 — 헤더와 같은 규칙이다.
   우리 다크 모드는 prefers-color-scheme 이 아니라 data-theme 로 바뀌므로
   <picture media> 로는 따라갈 수 없어 CSS 로 고른다. */
.foot-logo .bf-logo-dark { display: none; }
:root[data-theme="dark"] .foot-logo .bf-logo-light { display: none; }
:root[data-theme="dark"] .foot-logo .bf-logo-dark { display: block; }


/* ==========================================================================
   푸터 본체 — 목업 index.html 의 FOOTER 블록

   전역 rb.css/main.css '13. 푸터' 구역에 있던 것을 이리로 옮겼다. 푸터는
   레이아웃이므로 레이아웃 폴더가 제 스타일을 갖는다. 다른 푸터 레이아웃을
   만들어 고르면(환경설정 > 푸터 레이아웃) 그쪽 style.css 가 대신 실린다.

   ※ .cs-tel 은 여기 없다
     좁은 화면 규칙 하나가 '.cs-tel, .fcs-tel' 로 묶여 있었는데 앞쪽은
     고객센터 위젯(bf.cs) 것이라 갈라 두었다.
   ========================================================================== */

#bf_footer { background: var(--surface); border-top: 1px solid var(--line); }

.footer-top { border-bottom: 1px solid var(--line-soft); }
.footer-top .bf-inner {
  display: flex; justify-content: space-between; gap: 40px;
  padding-top: 44px; padding-bottom: 40px;
}
.sitemap { display: flex; gap: 50px; flex-wrap: wrap; }
.sitemap dt {
  margin-bottom: 14px;
  font-size: 15px; font-weight: 700; color: var(--ink-900);
}
.sitemap dd + dd { margin-top: 8px; }
.sitemap dd a { font-size: 13.5px; color: var(--ink-500); }
.sitemap dd a:hover { color: var(--sky-t2); text-decoration: underline; }

.footer-cs {
  flex: none; width: 280px; padding: 22px;
  background: var(--sky-50);
  border-radius: var(--r-lg);
}
.fcs-tit { font-size: 13.5px; font-weight: 600; color: var(--ink-500); }
.fcs-tel {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 27px; font-weight: 800; color: var(--sky-t3); letter-spacing: -.5px;
}
.fcs-time { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-500); }
.fcs-btns { display: flex; gap: 6px; margin-top: 14px; }
.fcs-btns .bf-btn { flex: 1 1 0; padding: 0 8px; }

.footer-bottom .bf-inner {
  display: flex; align-items: flex-start; gap: 30px;
  padding-top: 32px; padding-bottom: 40px;
}
.foot-logo { display: flex; align-items: center; flex: none; }
/* 푸터는 밝은 모드에서도 바닥이 어둡다 — 흰 글자 로고(_w) 한 장만 쓴다 */
.foot-logo img { display: block; height: 38px; width: auto; }

.foot-info { flex: 1 1 auto; min-width: 0; }
.foot-policy { display: flex; flex-wrap: wrap; align-items: center; }
.foot-policy li { position: relative; }
.foot-policy li + li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 10px; margin-top: -5px; background: var(--ink-200);
}
.foot-policy a { display: block; padding: 0 13px; font-size: 13.5px; color: var(--ink-600); }
.foot-policy li:first-child a { padding-left: 0; }
.foot-policy a:hover { color: var(--sky-t2); }
.foot-policy strong { color: var(--ink-800); font-weight: 700; }

.foot-info address {
  margin-top: 13px;
  font-size: 12.5px; line-height: 1.9; color: var(--ink-400);
}
.foot-info address span { margin-right: 14px; }
.copyright {
  margin-top: 10px;
  font-size: 12.5px; color: var(--ink-400); letter-spacing: .2px;
}
.copyright b { font-weight: 700; color: var(--ink-500); }

.foot-sns { display: flex; gap: 7px; flex: none; }
.foot-sns a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-400);
  transition: all .2s;
}
.foot-sns a:hover { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }
.foot-sns b { font-size: 11.5px; font-weight: 700; letter-spacing: -.3px; }


/* ------------------------------------------------------------------ 반응형 */

@media (max-width: 1280px) {
  .sitemap { gap: 34px; }
}

@media (max-width: 1080px) {
  .footer-top .bf-inner { flex-direction: column; }
  .footer-cs { width: 100%; }
  .fcs-btns { max-width: 320px; }
}

@media (max-width: 900px) {
  .footer-top .bf-inner { padding-top: 28px; padding-bottom: 24px; gap: 24px; }
  .sitemap { gap: 20px 30px; }
  .sitemap dl { min-width: 110px; }
  .sitemap dt { margin-bottom: 10px; font-size: 14px; }
  .footer-bottom .bf-inner { flex-direction: column; gap: 18px; padding-top: 24px; padding-bottom: 90px; }
  .foot-policy a { padding: 3px 11px; font-size: 12.5px; }
  .foot-info address { font-size: 12px; line-height: 1.8; }
}

@media (max-width: 600px) {
  .sitemap { gap: 16px 24px; }
  .sitemap dl { min-width: calc(50% - 12px); }
}

@media (max-width: 420px) {
  .fcs-tel { font-size: 23px; }
}

@media print {
  #bf_footer { display: none !important; }
}