/* 하단 (2026-09-17 개편 · basic)
   왼쪽 = 문의 패널(메인색 바탕 · 흰색 고정 버튼) / 오른쪽 = 정보 패널(메인색을 5% 섞은 옅은 바탕).
   색은 --c-primary(메인색) · --c-accent(서브색) 두 토큰에서만 만든다 — 사이트설정에서 색을 바꾸면 따라간다.
   ※ id=footer 는 바깥 레이아웃이 쓰고 있어 전용 클래스 .bft 로 감싼다. */

/* ── 토큰 ─────────────────────────────────────
   옛 브라우저용 값을 먼저 두고, 지원하는 브라우저는 @supports 안에서 덮는다.
   (사용자 정의 속성에 모르는 색 함수를 넣으면 앞의 값으로 돌아가지 않고 무효가 되기 때문이다) */
.bft{
  --bft-field:var(--c-primary,#253D67);
  --bft-signal:var(--c-accent,#89DF5E);
  --bft-ink:#ffffff;                        /* 메인색 위 글자 */
  --bft-ink-sub:rgba(255,255,255,.78);
  --bft-btn-ink:var(--bft-field);            /* 흰 버튼 위 글자 = 메인색 */
  --bft-paper:#f4f6f9;                      /* 정보 패널 바탕 */
  --bft-text:#18202e;
  --bft-text-sub:#4b5563;
  --bft-rule:rgba(15,23,42,.1);
  --bft-branch:#b9c2d0;                     /* 사이트맵 가지 선 */
  --bft-mark:rgba(137,223,94,.55);          /* 오버 형광펜 */
  --bft-pad:clamp(20px,5.6vw,80px);
  font-family:"Noto Sans KR","Pretendard Variable","Pretendard","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  display:grid;
  grid-template-columns:minmax(360px,38%) minmax(0,1fr);
  background:var(--bft-paper);
  color:var(--bft-text);
}
@supports (color:color-mix(in oklab,red,blue)){
  .bft{
    --bft-paper:color-mix(in oklab,var(--bft-field) 5%,#ffffff);
    --bft-text:color-mix(in oklab,var(--bft-field) 26%,#0d1117);
    --bft-text-sub:color-mix(in oklab,var(--bft-text) 72%,var(--bft-paper));
    --bft-rule:color-mix(in oklab,var(--bft-text) 12%,transparent);
    --bft-branch:color-mix(in oklab,var(--bft-field) 32%,var(--bft-paper));
    --bft-mark:color-mix(in oklab,var(--bft-signal) 55%,transparent);
  }
}
/* 바탕색이 밝으면 짙은 글자, 어두우면 흰 글자 — 관리자가 어떤 색을 골라도 읽히게 한다 */
@supports (color:lch(from red l c h)){
  .bft{
    --bft-ink:lch(from var(--bft-field) calc((62 - l) * infinity) 0 0);
    --bft-btn-ink:lch(from var(--bft-field) min(l,45) c h);   /* 메인색이 밝아도 흰 버튼 위에서 읽히게 명도를 누른다 */
  }
  @supports (color:color-mix(in oklab,red,blue)){
    .bft{
      --bft-ink-sub:color-mix(in oklab,var(--bft-ink) 78%,var(--bft-field));
    }
  }
}
/* 초기화는 :where() 로 감싸 점수를 0 으로 둔다 — 아래 클래스 규칙의 여백을 덮지 않게 */
:where(.bft) *,:where(.bft) *::before,:where(.bft) *::after{box-sizing:border-box}
:where(.bft) :is(p,ul,dl,dd){margin:0;padding:0}
:where(.bft) ul{list-style:none}
:where(.bft) a{color:inherit;text-decoration:none}
.bft a:focus-visible{outline:3px solid var(--bft-signal);outline-offset:3px;border-radius:4px}

/* ── 왼쪽 : 문의 패널 ─────────────────────── */
.bft-cta{
  background:var(--bft-field);
  color:var(--bft-ink);
  padding:72px var(--bft-pad) 56px;
  display:flex;flex-direction:column;align-items:flex-start;
  --bft-text:var(--bft-ink);
  --bft-text-sub:var(--bft-ink-sub);
}
.bft-cta .bft-cta-btn{margin-top:36px}
.bft-cta .bft-contact{
  margin-top:auto;padding-top:56px;align-self:stretch;
}
.bft-cta .bft-contact dl{
  flex-direction:row;flex-wrap:wrap;gap:12px 40px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  border-top-color:color-mix(in oklab,var(--bft-ink) 18%,transparent);
}
.bft-cta-title{
  font-size:clamp(28px,2.5vw,38px);font-weight:800;line-height:1.32;letter-spacing:-.035em;
  max-width:11em;
}
.bft-cta-desc{
  margin-top:18px;max-width:23em;
  font-size:16px;line-height:1.75;color:var(--bft-ink-sub);
}
.bft-cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  min-height:60px;padding:0 24px 0 28px;border-radius:14px;
  background:#fff;color:var(--bft-btn-ink)!important;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
}
.bft-cta-btn svg{width:20px;height:20px;flex:0 0 auto;transition:transform .2s ease}
/* [2026-09-17 대표님 지시] 버튼 배경은 흰색 고정 — 마우스를 올리거나 눌러도 바뀌지 않는다. 움직이는 것은 화살표뿐이다 */
.bft-cta-btn,.bft-cta-btn:link,.bft-cta-btn:visited,.bft-cta-btn:hover,.bft-cta-btn:focus,.bft-cta-btn:active{background:#fff!important;background-image:none!important}
.bft-cta-btn:hover svg{transform:translateX(4px)}
.bft-cta-btn:focus-visible{outline-color:var(--bft-ink)}

/* ── 오른쪽 : 정보 패널 ───────────────────── */
.bft-info{
  padding:72px var(--bft-pad) 36px;
  display:flex;flex-direction:column;gap:52px;
  min-width:0;
}
.bft.is-solo{grid-template-columns:minmax(0,1fr)}
.bft.is-solo .bft-info{max-width:1440px;width:100%;margin:0 auto}

.bft-co{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.bft-slogan{margin-top:10px;max-width:34em;font-size:15px;line-height:1.75;color:var(--bft-text-sub)}

.bft-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 56px}
.bft.is-solo .bft-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.bft-label{
  font-family:"Outfit","Noto Sans KR",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bft-text-sub);margin-bottom:18px;
}

/* 사이트맵 — 메뉴 관리의 대분류를 Home 에서 뻗은 가지로 그린다 */
.bft-root{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Outfit","Noto Sans KR",sans-serif;font-size:15px;font-weight:600;
  min-height:32px;
}
.bft-root::before{
  content:"";width:10px;height:10px;border-radius:3px;
  background:var(--bft-signal);box-shadow:0 0 0 2px var(--bft-field);
}
.bft-tree{margin-left:4px}
.bft-tree li{position:relative;padding-left:26px}
.bft-tree li::before{            /* 세로 가지 — 마지막 항목은 가운데서 멈춘다 */
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bft-branch);
}
.bft-tree li:first-child::before{top:-10px}
.bft-tree li:last-child::before{bottom:50%}
.bft-tree li::after{             /* 가로 가지 */
  content:"";position:absolute;left:0;top:50%;width:16px;height:2px;margin-top:-1px;
  background:var(--bft-branch);transform-origin:left center;transition:background-color .2s ease;
}
.bft-tree a{display:flex;align-items:center;min-height:40px;font-size:16px;font-weight:500}
.bft-tree a span{
  padding:0 2px;
  background-image:linear-gradient(transparent 58%,var(--bft-mark) 58%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .25s ease;
}
.bft-tree li:hover::after{background:var(--bft-field)}
.bft-tree a:hover span,.bft-tree a:focus-visible span{background-size:100% 100%}

/* 연락처 */
.bft-contact dl{display:flex;flex-direction:column;gap:14px}
.bft-contact dt{
  font-family:"Outfit",sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--bft-text-sub);
}
.bft-contact dd{margin-top:2px;font-family:"Outfit","Noto Sans KR",sans-serif;font-size:16px;font-weight:500}
.bft-contact .is-tel dd{font-size:26px;font-weight:600;letter-spacing:-.01em}
.bft-contact dd a{display:inline-flex;align-items:center;min-height:40px;color:inherit}
/* [2026-09-21] 연락처(TEL·E-MAIL)에 마우스를 올려도 **다른 색이 나오지 않는다.**
   🔴 위 56행 `:where(.bft) a` 는 점수가 0 이라 테마 공용 `a:hover{color}` 가 이긴다 —
      그래서 글자색을 여기서 못박는다(밑줄만 고쳐서는 색이 그대로 바뀐다).
   문의 패널 안은 메인색 배경이라 글자가 --bft-ink 다. 거기에 회색을 섞어 **채도를 낮춘다**
   (배경색을 섞으면 채도가 되살아나므로 쓰지 않는다). 메인색이 밝아 ink 가 어두워져도 따라간다. */
.bft-contact dd a:hover{color:inherit;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:currentColor}
.bft-cta .bft-contact dd a:hover{color:color-mix(in oklab,var(--bft-ink) 84%,#8b929a)}

/* 법정 표기 · 약관 · 저작권 */
.bft-bottom{margin-top:auto;padding-top:26px;border-top:1px solid var(--bft-rule);display:flex;flex-direction:column;gap:12px}
.bft-legal{display:flex;flex-wrap:wrap;gap:6px 0;font-size:13px;line-height:1.6;color:var(--bft-text-sub)}
.bft-legal li{padding-right:14px;margin-right:14px;border-right:1px solid var(--bft-rule)}
.bft-legal li:last-child{border-right:0;margin-right:0;padding-right:0}
.bft-legal span{color:var(--bft-text);font-weight:500}
.bft-bottom-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.bft-policy{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--bft-text-sub)}
.bft-policy a{display:inline-flex;min-height:32px;align-items:center}
.bft-policy a:hover{color:var(--bft-text)}
.bft-policy .is-key{color:var(--bft-text);font-weight:700}
.bft-copy{font-family:"Outfit","Noto Sans KR",sans-serif;font-size:13px;color:var(--bft-text-sub)}

/* ── 반응형 ────────────────────────────────── */
@media (max-width:1023px){
  .bft{grid-template-columns:minmax(0,1fr)}
  .bft-cta{padding:56px var(--bft-pad) 48px}
  .bft-cta-title{max-width:none}
  .bft-cta .bft-contact{padding-top:40px}
  .bft.is-solo .bft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bft.is-solo .bft-brand{grid-column:1 / -1}
  .bft-info{padding:52px var(--bft-pad) 32px;gap:40px}
}
@media (max-width:560px){
  .bft-cta-btn{align-self:stretch;justify-content:space-between}
  .bft-cols,.bft.is-solo .bft-cols{grid-template-columns:minmax(0,1fr);gap:36px}
  .bft-tree a,.bft-policy a{min-height:44px}
  .bft-bottom-row{flex-direction:column;align-items:flex-start}
  .bft-legal li{border-right:0;margin-right:0;padding-right:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bft *,.bft *::before,.bft *::after{transition:none!important}
}