/* ══ 공유 푸터 (227:2 · 1920×588 · #132033 · pt100 pb30) ═══════════════════ */
@layer components {
  .ft { background: var(--df-navy); color: var(--df-white); border-block-start: 1px solid var(--df-line-w10); }
  .ft__wrap {
    display: grid;
    /* 시안 3열(CTA 500 / 메뉴 / 주소). auto 열의 주소가 좁은 폭에서 메뉴 위로
       넘치는 사고(부분가림 실측) → 주소 열도 minmax(0,·) 로 수축 가능하게. */
    grid-template-columns: minmax(0, 500fr) minmax(120px, 1fr) minmax(0, 420fr);
    gap: var(--sp-60);
    padding-block: var(--sp-100) var(--sp-30);
    /* 시안 227:2 h588 실측 정합 — row 아래 여백(gap 100)이 시안에 있다(index 담당 실측) */
    padding-block-end: var(--sp-100);
  }
  .ft__headline { font-weight: 600; font-size: var(--fs-50); line-height: 1.4; }
  .ft__desc { margin-block-start: var(--sp-20); font-weight: 300; font-size: var(--fs-18); line-height: 1.6; }
  .ft__btns { display: flex; gap: var(--sp-20); margin-block-start: var(--sp-40); flex-wrap: wrap; }

  .ft__menu { display: grid; gap: var(--sp-20); justify-items: start; }
  .ft__menu a { font-weight: 300; font-size: var(--fs-24); color: var(--df-white); }
  .ft__menu a:hover { color: var(--df-cyan); }
  .ft__menu a.active { text-decoration: underline; text-underline-offset: 5px; }

  .ft__addr { display: grid; gap: var(--sp-30); justify-items: end; text-align: end; align-content: start; }
  .ft__addr-l { font-weight: 600; font-size: var(--fs-17); }
  .ft__addr-t { margin-block-start: 8px; font-weight: 300; font-size: var(--fs-16); line-height: 1.6; }
  .ft__mark { inline-size: 50px; block-size: 50px; }
  .ft__mark-link { display: inline-block; line-height: 0; }
  .ft__mark-link:hover { opacity: 0.8; }

  .ft__legal {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-30);
    border-block-start: 1px solid var(--df-line-w10);
    padding-block: var(--sp-20) var(--sp-30);
    font-weight: 300; font-size: var(--fs-16);
  }
  .ft__legal-links { display: flex; gap: var(--sp-30); }
  .ft__legal-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ft__legal-links a.ft__legal-privacy { color: var(--df-cyan); }
  .ft__legal-links a.active { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
  .ft__legal-links a[data-df-dead] { cursor: default; opacity: .85; }

  /* 공용 버튼 컴포넌트 (notes-main_01 btn 패턴: 텍스트17 + 50px r4 화살표 · r4 · h62) */
  .df-btn {
    position: relative; overflow: clip;               /* hover-fill-sweep 용 */
    display: inline-flex; align-items: center; gap: var(--sp-30);
    padding-block: 6px; padding-inline: 20px 6px;
    min-block-size: clamp(48px, 3.2292vw, 62px);
    border-radius: var(--r-4);
    font-size: var(--fs-17); font-weight: 400;
  }
  .df-btn--primary { background: var(--df-cyan); color: #000000; }
  .df-btn--light   { background: var(--df-gray-ed); color: #000000; }
  .df-btn--footer  { background: var(--df-navy-2); color: var(--df-white); }
  /* 화살표 판 50×50(r4) + 글리프 16×12 — 박스는 CSS, 화살표는 btn-arrow.png(243:259 · 243:278) */
  .df-btn__ar {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: clamp(40px, 2.6042vw, 50px);
    block-size: clamp(40px, 2.6042vw, 50px);
    flex-shrink: 0;
    border-radius: var(--r-4);
    background-color: var(--df-btn-ar-bg, #ffffff);
    color: var(--df-btn-ar-ink, #000000);
  }
  .df-btn__ar::after {
    content: "";
    inline-size: clamp(13px, 0.8333vw, 16px);
    block-size: clamp(10px, 0.625vw, 12px);
    background-color: currentColor;
    mask: center / contain no-repeat url(../assets/img/btn-arrow.png);
    -webkit-mask: center / contain no-repeat url(../assets/img/btn-arrow.png);
  }
  .df-btn--primary .df-btn__ar,
  .df-btn--light .df-btn__ar {
    --df-btn-ar-bg: #ffffff;
    --df-btn-ar-ink: #000000;
  }
  .df-btn--footer .df-btn__ar {
    --df-btn-ar-bg: rgba(255, 255, 255, 0.08);
    --df-btn-ar-ink: #ffffff;
  }

  @media (width < 1280px) {
    .ft__wrap { grid-template-columns: 1fr; }
    .ft__addr { justify-items: start; text-align: start; }
    .ft__legal { flex-wrap: wrap; }
  }
}