/* 공용 푸터(_site_footer.html) 전용 스타일 — 모든 페이지가 이 파일 하나만 사용합니다.
   페이지마다 색상 변수 이름이 달라서(--soft/--muted, --green/--primary 등) fallback 체인으로 흡수합니다.
   레이아웃(왼쪽 고객센터+오른쪽 서브메뉴 / 그 아래 정책·약관 / 맨 아래 사업자정보)은
   페이지에 상관없이 항상 동일합니다. */
.site-footer{
  display:block;
  background: var(--cream-2, #F1F4F2);
  border-top:1px solid var(--line, #e2e7e2);
  padding:40px 0;
  font-size:13px;
  color: #666;
  /* 헤더 .shell 과 같은 폭 공식(min(1180px, 100% - 64px))을 기본값으로 사용.
     헤더 폭이 다른 페이지(mypage, product-demo 등)는 이 값을 재정의해서 맞춘다. */
  --footer-max:var(--site-max, 1080px);
}
.site-footer .footer-main,
.site-footer .footer-bottom{
  width:min(var(--footer-max), calc(100% - 48px));
  max-width:var(--footer-max);
  margin-left:auto;
  margin-right:auto;
}

/* 위: 왼쪽 고객센터 + 오른쪽 서브메뉴, 아래: 정책/약관 바 */
.site-footer .footer-main{display:flex;flex-direction:column}
.site-footer .footer-main-row{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.site-footer .footer-contact strong{font-size:13.5px;color:var(--ink, #1d221c); font-weight: 600;}
.site-footer .footer-contact-meta span{opacity: .6;}
.site-footer .footer-contact-phone{
    margin: 0 0 15px;
    line-height: 1;
    font-size: 18px;
    font-weight: 500;
    color: var(--green, var(--primary, #2B3F32));
    letter-spacing: -.02em;
}
.site-footer .footer-contact-meta{margin:0;line-height:1.6}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(4,auto);gap:48px;justify-content:end}
.site-footer .footer-column{display:grid;gap:6px;align-content:start}
.site-footer .footer-column-toggle{font:inherit;font-size:13.5px;color:var(--ink, #1d221c);font-weight:600;background:none;border:0;padding:0;margin:0;text-align:left;cursor:default}
.site-footer .footer-column-links{display:block}
.site-footer .footer-column-links a{text-decoration:none; display: block; line-height: 2;}
.site-footer .footer-column-links a:hover{color:var(--green, var(--primary, #1f6b46))}

.site-footer .footer-utility-links{display:flex;flex-wrap:wrap;gap:16px;margin:0;padding-top:66px;}
.site-footer .footer-utility-links a{color:var(--ink, #1d221c);text-decoration:none;font-weight:500; font-size: 13.5px;}
.site-footer .footer-utility-links a:hover{color:var(--green, var(--primary, #1f6b46))}

/* 맨 아래: 나머지 운영정보 + 저작권 */
.site-footer .footer-bottom{display:flex;flex-direction:column;gap:6px;margin-top:30px;padding-top:30px;border-top:1px solid var(--line, #e2e7e2)}
.site-footer .footer-bottom p{margin:0}

/* 헤더(.shell)가 920px 이하에서 양옆 20px 이므로 푸터도 같은 폭으로 맞춘다. */
@media(max-width:920px){
  .site-footer .footer-main,
  .site-footer .footer-bottom{width:min(var(--footer-max), calc(100% - 40px))}
}

@media(max-width:780px){
  .site-footer{padding:30px 0;}
  .site-footer .footer-main,
  .site-footer .footer-bottom{width:min(var(--footer-max), calc(100% - 40px))}
  .site-footer .footer-utility-links a{font-size: 12px;}
  .site-footer .footer-bottom{font-size: 12px;}
  .site-footer .footer-utility-links{gap: 14px;     padding-top: 22px;}
  .site-footer .footer-main-row{flex-direction:column;align-items:flex-start;gap:28px}
  .site-footer .footer-grid{grid-template-columns:1fr;justify-content:start;width:100%; gap: 10px;}
  .site-footer .footer-column-links a{display: block; margin: 5px 0;}
  .site-footer .footer-column-toggle{cursor:pointer;position:relative;display:block;width:100%;padding-right:22px}
  .site-footer .footer-column-toggle::after{
        content: "";
        position: absolute;
        right: 2px;
        top: 2px;
        width: 6px;
        height: 6px;
        border-right: 1px solid var(--green, var(--primary, #2B3F32));
        border-bottom: 1px solid var(--green, var(--primary, #2B3F32));
        transform: rotate(45deg);
        transition: transform .15s ease;}
  .site-footer .footer-column.is-open .footer-column-toggle::after{transform:rotate(-135deg);top:6px}
  .site-footer .footer-column-links{display:none}
  .site-footer .footer-column.is-open .footer-column-links{display:block}
}