.site-footer{
  padding:48px 0 40px;
  background:#232629;
  color:rgba(255,255,255,.62);
  font-size:var(--fs-sm);
}
.site-footer__inner{
  max-width:var(--inner-w);
  margin:0 auto;
  padding:0 var(--inner-px);
}
.site-footer__brand{
  font-size:17px;font-weight:700;
  color:#fff;
  margin-bottom:16px;
}
.site-footer__info{display:flex;flex-direction:column;gap:6px}
.site-footer__info-line{display:flex;flex-wrap:wrap;gap:8px 18px}
.site-footer__info-item{position:relative}
.site-footer__info-item a{color:inherit;text-decoration:none}
.site-footer__info-item + .site-footer__info-item::before{
    content:'';position:absolute;left:-10px;top:50%;
    width:1px;height:11px;margin-top:-5.5px;background:currentColor;opacity:.3;
}
.site-footer__copy{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
  font-size:13px;
}
.site-footer{ --footer-logo-filter: brightness(0) invert(1); }

.site-footer__logo{
  display:block;
  height:32px;
  width:auto;
  filter:var(--footer-logo-filter);
  opacity:.9;
}
.site-footer__sns{
  display:flex;gap:10px;list-style:none;
  margin:20px 0 0;padding:0;
}

.site-footer__sns-link{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.75);
  transition:var(--tr);
}
.site-footer__sns-link svg{width:19px;height:19px}
.site-footer__sns-link:hover{color:#fff}

.site-footer__sns-link--blog:hover{background:#03c75a}
.site-footer__sns-link--cafe:hover{background:#03c75a}
.site-footer__sns-link--instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.site-footer__sns-link--youtube:hover{background:#ff0000}
.site-footer__sns-link--facebook:hover{background:#1877f2}

/* ── 관련 사이트 ── */
.site-footer__family{
    position:absolute;
    top:0;
    right:0;
    display:flex;
    align-items:center;
    gap:14px;
}

.site-footer__inner{position:relative}

.site-footer__family-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--c-text-mute);
}

.site-footer__family-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--c-text-mute);
    transition:var(--tr);
}

/* 우측 화살표 */
.site-footer__family-link::after{
    content:'';
    width:14px;height:14px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:var(--tr);
}

.site-footer__family-link:hover{
    color:#fff;
}

.site-footer__family-link:hover::after{
    transform:translateX(3px);
}

.site-footer__family-logo{height:26px;width:auto}

.site-footer__family-select{
    padding:6px 28px 6px 10px;
    font-size:13px;
    border:1px solid var(--c-line);
    border-radius:var(--btn-radius);
    background:transparent;
    color:var(--c-text-mute);
    transition:var(--tr);
    cursor:pointer;
}

.site-footer__family-select:hover{
    color:#fff;
    border-color:var(--c-text-mute);
}

@media (max-width:1024px){
    .site-footer__family{
        position:static;
        margin-top:16px;
    }
}

@media (max-width:1024px){
  .site-footer{padding:34px 0 30px}
  .site-footer__info{flex-direction:column;gap:5px}
}


/* ===== 푸터 스타일 =====
 *
 * ⚠️ DOM 은 한 벌이다. blade 를 건드리지 않는다.
 *    A(기본)는 위 규칙 그대로. B·C 만 여기서 덮어쓴다.
 * ⚠️ 기존 53개 사이트는 footer_style 이 없어 'a' 로 폴백된다.
 */

/* ── B — 밝은 배경 · 가로 1줄 ─────────────
   정보량이 적고 깔끔한 사이트용. 본문과 톤을 잇는다 */
.site-footer--b{
  padding:36px 0 32px;
  background:var(--c-bg-alt);
  color:var(--c-text-sub);
  border-top:1px solid var(--c-line);
}
.site-footer--b .site-footer__brand{
  color:var(--c-text);
  margin-bottom:14px;
}
/* 어두운 배경이 아니므로 로고 반전을 되돌린다 */
.site-footer--b{--footer-logo-filter:none}

.site-footer--b .site-footer__info-line{gap:6px 16px}
/*
 * 밝은 배경 — 평상시는 테두리만, 호버하면 브랜드 색이 채워진다.
 * ⚠️ 호버 배경은 위 공통 규칙(--blog·--instagram …)이 준다.
 *    여기서 background 를 다시 지정하면 그걸 덮어써 회색으로 남는다.
 */
/*
 * 밝은 배경 — 평상시는 테두리만, 호버하면 브랜드 색이 채워진다.
 *
 * ⚠️ 호버 배경을 여기서 다시 선언해야 한다.
 *    공통 규칙(.site-footer__sns-link--blog:hover)보다 이 블록이 뒤에 있고
 *    선택자도 더 구체적이라, background:transparent 가 호버 색을 이겨버린다.
 */
.site-footer--b .site-footer__sns-link{
  background:transparent;
  color:var(--c-text-mute);
  border:1px solid var(--c-line);
}
.site-footer--b .site-footer__sns-link:hover{
  color:#fff;
  border-color:transparent;
}

.site-footer--b .site-footer__sns-link--blog:hover{background:#03c75a}
.site-footer--b .site-footer__sns-link--cafe:hover{background:#03c75a}
.site-footer--b .site-footer__sns-link--instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.site-footer--b .site-footer__sns-link--youtube:hover{background:#ff0000}
.site-footer--b .site-footer__sns-link--facebook:hover{background:#1877f2}
.site-footer--b .site-footer__copy{
  border-top-color:var(--c-line);
  color:var(--c-text-mute);
}
.site-footer--b .site-footer__family-link:hover,
.site-footer--b .site-footer__family-select:hover{color:var(--c-text)}

.site-footer__policy {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.site-footer__policy a {
    font-size: 13px;
    color: inherit;
    text-decoration: none;
    opacity: .75;
    transition: .2s;
}

.site-footer__policy a:hover {
    opacity: 1;
}

/* 개인정보처리방침은 굵게 — 관행이다 */
.site-footer__policy li:first-child a {
    font-weight: 600;
    opacity: 1;
}

/* ── C — 좌우 2단 ─────────────────────────
   왼쪽에 로고·SNS, 오른쪽에 회사 정보. 정보량이 많을 때 */
@media (min-width:1025px){
  .site-footer--c .site-footer__inner{
    display:grid;
    grid-template-columns:minmax(200px,280px) 1fr;
    column-gap:var(--gap);
    row-gap:0;
    align-items:start;
  }

  .site-footer--c .site-footer__brand{grid-column:1;grid-row:1;margin-bottom:20px}
  .site-footer--c .site-footer__sns{grid-column:1;grid-row:2;margin-top:0}
  .site-footer--c .site-footer__info{grid-column:2;grid-row:1 / 3}

  /* copy 는 전체 폭을 쓰고 아래에 붙는다 */
  .site-footer--c .site-footer__copy{grid-column:1 / -1;grid-row:3;margin-top:28px}

  /* family 는 절대배치 그대로 두되 위치만 맞춘다 */
  .site-footer--c .site-footer__family{top:auto;bottom:0}
}

/* ── D — 어두운 배경 · 가운데 정렬 ───────────
   메뉴가 적고 브랜드만 보여주면 되는 사이트 */
.site-footer--d .site-footer__inner{text-align:center}
.site-footer--d .site-footer__brand{margin-bottom:20px}
.site-footer--d .site-footer__logo{margin:0 auto}
.site-footer--d .site-footer__info-line{justify-content:center}
.site-footer--d .site-footer__sns{justify-content:center}

.site-footer--d .site-footer__family{
  position:static;
  justify-content:center;
  margin-top:18px;
}