/* ============================================================
   공통 하단(Footer) — 2단 구조
   위: FAMILY SITE / 바로가기 버튼 / SOCIAL MEDIA
   아래: 로고 + 회사 정보
   PC는 좌우 배치, 767px 이하 휴대폰은 가운데 정렬로 쌓임
   ============================================================ */
.hbf { margin-top:auto; color:#fff; font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',sans-serif; }
.hbf a { color:#fff; }
.hbf-top { background:#222; }
.hbf-bottom { background:#161616; }
.hbf-inner { max-width:1200px; margin:0 auto; padding:56px 24px; box-sizing:border-box; }
.hbf-top .hbf-inner { display:grid; grid-template-columns:1fr auto; gap:40px 64px; }

.hbf-title { display:flex; align-items:center; gap:20px; margin:0 0 28px; font-family:'Jalnan','Apple SD Gothic Neo',sans-serif; font-weight:normal; font-size:26px; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.hbf-title::after { content:""; width:56px; height:2px; background:#fff; }

.hbf-family { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.hbf-family a { white-space:nowrap; font-family:'Jalnan','Apple SD Gothic Neo',sans-serif; font-size:22px; letter-spacing:.02em; line-height:1.1; text-transform:uppercase; transition:color 200ms ease; }
.hbf-family a:hover { color:#3d9bff; }
.hbf-family a small { font-family:'Pretendard Variable','Pretendard',sans-serif; font-size:15px; font-weight:300; letter-spacing:.18em; margin-left:6px; }

.hbf-legal { display:flex; align-items:center; gap:14px; margin-top:48px; font-size:15px; font-weight:600; }
.hbf-legal span { width:1px; height:13px; background:rgba(255,255,255,.6); }
.hbf-legal a:hover { color:#3d9bff; }

.hbf-right { display:flex; flex-direction:column; align-items:flex-end; gap:56px; }
.hbf-btns { display:flex; gap:14px; }
.hbf-btns a { white-space:nowrap; border-radius:999px; min-width:150px; padding:14px 20px; box-sizing:border-box; border:1.5px solid #fff; text-align:center; font-size:16px; font-weight:600; transition:background 200ms ease, color 200ms ease; }
.hbf-btns a:hover { background:#fff; color:#161616; }

.hbf-social { display:flex; align-items:center; gap:56px; width:100%; justify-content:space-between; }
.hbf-social .hbf-title { white-space:nowrap; flex-direction:column; align-items:flex-start; gap:12px; margin:0; font-size:24px; }
.hbf-social .hbf-title::after { width:40px; }
.hbf-icons { display:flex; gap:10px; }
.hbf-icons a { border-radius:16px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); background:#1b1b1b; transition:background 200ms ease, border-color 200ms ease; }
.hbf-icons a:hover { background:#0084ff; border-color:#0084ff; }
.hbf-icons svg { width:26px; height:26px; }
.hbf-icons .hbf-n { font-family:'Archivo Black','Jalnan',sans-serif; font-size:22px; line-height:1; }

.hbf-bottom .hbf-inner { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:20px 56px; padding-top:44px; padding-bottom:48px; }
.hbf-logo { height:64px; width:auto; filter:brightness(0) invert(1); flex-shrink:0; }
.hbf-info { margin:0; word-break:keep-all; font-size:14px; line-height:1.9; color:rgba(255,255,255,.85); }
.hbf-info .sep { display:inline-block; width:1px; height:12px; margin:0 12px; background:rgba(255,255,255,.4); vertical-align:middle; }
.hbf-info .nw { white-space:nowrap; }
.hbf-copy { display:block; margin-top:4px; color:rgba(255,255,255,.6); }

/* Forbes 수상 마크 */
.hbf-award { grid-column:2; justify-self:end; display:flex; align-items:center; gap:14px; flex-shrink:0; }
.hbf-award img { width:64px; height:64px; display:block; }
.hbf-award span { display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.3; color:rgba(255,255,255,.75); letter-spacing:.01em; }
.hbf-award b { font-family:'Jalnan','Apple SD Gothic Neo',sans-serif; font-weight:normal; font-size:16px; color:#fdd068; letter-spacing:.02em; }

/* TOP 버튼 */
.hbf-totop { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:40; width:56px; height:56px; border:1px solid rgba(255,255,255,.25); background:rgba(40,40,40,.92); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:600 12px/1 'Pretendard Variable','Pretendard',sans-serif; letter-spacing:.06em; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 200ms ease, transform 200ms ease, visibility 0s 200ms; }
.hbf-totop.on { opacity:1; visibility:visible; transform:none; transition:opacity 200ms ease, transform 200ms ease; }
.hbf-totop:focus-visible { outline:2px solid #0084ff; outline-offset:2px; }

@media (max-width: 1100px) {
  .hbf-bottom .hbf-inner { column-gap:40px; }
  .hbf-logo { height:48px; }
  .hbf-btns a { min-width:120px; }
  .hbf-social { justify-content:flex-end; }
  .hbf-social .hbf-title { display:none; }
  .hbf-right { gap:28px; }
}
@media (max-width: 767px) {
  .hbf-inner { padding:44px 20px; }
  .hbf-top .hbf-inner { grid-template-columns:1fr; gap:0; padding-bottom:0; }
  .hbf-left { text-align:center; }
  .hbf-left .hbf-title { flex-direction:column; justify-content:center; gap:14px; margin-bottom:28px; font-size:26px; }
  .hbf-family { display:grid; grid-template-columns:1fr 1fr; gap:22px 16px; align-items:center; justify-items:center; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12); margin:0 -20px; padding-left:20px; padding-right:20px; }
  .hbf-family a { font-size:15px; text-align:center; }
  .hbf-family a small { font-size:12px; margin-left:4px; letter-spacing:.12em; }
  .hbf-family a:last-child:nth-child(odd) { grid-column:1 / -1; }
  .hbf-legal { justify-content:center; margin-top:28px; font-size:14px; }
  .hbf-right { align-items:center; gap:24px; padding:24px 0 44px; }
  .hbf-btns { gap:8px; justify-content:center; flex-wrap:wrap; }
  .hbf-btns a { min-width:0; padding:11px 14px; font-size:14px; }
  .hbf-social { justify-content:center; }
  .hbf-social .hbf-title { display:none; }
  .hbf-icons a { width:46px; height:46px; border-radius:14px; }
  .hbf-icons svg { width:22px; height:22px; }
  .hbf-bottom .hbf-inner { grid-template-columns:1fr; justify-items:center; gap:24px; text-align:center; padding-top:40px; padding-bottom:88px; }
  .hbf-logo { height:52px; }
  .hbf-award { grid-column:auto; justify-self:center; text-align:left; }
  .hbf-award img { width:56px; height:56px; }
  .hbf-info { font-size:12.5px; line-height:1.85; }
  /* 휴대폰: 회사명·대표만 한 줄, 나머지는 한 줄씩 */
  .hbf-info .sep:not(:first-of-type) { display:block; width:0; height:0; margin:0; }
  .hbf-info .sep { margin:0 8px; }
  .hbf-totop { width:48px; height:48px; }
}