@charset "utf-8";

/* ============================================================
   footer.css — 푸터
   대응 마크업 : template-parts/footer/footer-main.php

   [로고] ── [사업자정보 4줄]  한 줄 가운데. 배경은 어두운 회색
   ============================================================ */


/* 푸터 전용 토큰 */
:root {
  --one-ft-bg: #323232;     /* 시안 샘플 — 컬러칩에 없는 값 */
  --one-ft-h: 358px;        /* 밴드 높이 — 시안 1920 기준 */
  --one-ft-logo: 200px;     /* 로고 폭 — 파일은 271×69 (헤더와 같은 파일) */
  --one-ft-gap: 160px;      /* 로고와 글 사이 */
  --one-ft-label: 1em;      /* 라벨과 값 사이 */
  --one-ft-map-h: 450px;    /* 푸터 위 지도 높이 — 퍼가기 기본값 */
}

/* ============================
   푸터 위 지도 — 화면 폭을 꽉 채운다
============================ */

.ft-map {
  line-height: 0;   /* iframe 아래 생기는 인라인 여백 제거 */
}

.ft-map iframe {
  display: block;
  width: 100%;
  height: var(--one-ft-map-h);
  border: 0;
}

.one-footer {
  background-color: var(--one-ft-bg);
}

/* 로고와 글을 가운데 한 줄로 */
.one-footer .con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-ft-gap);
  min-height: var(--one-ft-h);
  padding-top: var(--one-space-s);
  padding-bottom: var(--one-space-s);
}

/* common.css 의 `.section img { width:100% }` 상쇄 */
.one-footer img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.one-footer a {
  color: inherit;
}


/* ============================
   로고
============================ */

.ft-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.ft-logo img {
  width: var(--one-ft-logo);
}


/* ============================
   사업자정보 · 링크 · 카피라이트
============================ */

.ft-info {
  flex: 0 1 auto;
}

.ft-biz {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-sm);
  font-size: var(--one-body);
}

.ft-biz address {
  font-style: normal;   /* <address> 기본 italic 해제 */
}

.ft-label {
  display: inline-block;
  margin-right: var(--one-ft-label);
}

/* 링크 줄 — 사업자정보 아래 한 줄, 항목 사이 세로선 */
.ft-links {
  display: flex;
  align-items: center;
  padding-top: var(--one-gap-r);
  font-size: var(--one-caption);
}

.ft-link {
  transition: opacity 0.2s ease;
}

.ft-link:hover {
  opacity: 0.7;
}

.ft-link + .ft-link {
  margin-left: var(--one-gap-r);
  padding-left: var(--one-gap-r);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* .one-ft-inner 의 .w-color(0,1,0) 를 이기려면 선택자가 2개여야 한다 */
.one-footer .ft-copy {
  padding-top: var(--one-gap-r);
  font-size: var(--one-caption);   /* 사업자정보 · 링크와 같은 크기 */
  color: var(--gray-color01);
}


/* 편집 권한자에게만 보이는 안내 (inc/helpers.php) */

.one-builder-empty {
  display: inline-block;
  padding: var(--one-gap-xs) var(--one-gap-sm);
  border: 1px dashed var(--gray-color01);
  border-radius: 4px;
  font-size: var(--one-m-copy);
  color: var(--gray-color01);
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {
  :root {
    --one-ft-h: 280px;
    --one-ft-map-h: 360px;
    --one-ft-gap: var(--one-space-r);
  }

  /* 하단 고정 퀵바에 가리지 않도록 */
  .one-footer .con-inner {
    padding-bottom: calc(var(--one-space-s) + 60px);
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {
  :root {
    --one-ft-h: auto;
    --one-ft-logo: 150px;
    --one-ft-map-h: 280px;
  }

  /* 로고 위 · 글 아래로 세로 쌓기 */
  .one-footer .con-inner {
    flex-direction: column;
    gap: var(--one-space-s);
    text-align: center;
  }

  .ft-links {
    justify-content: center;
  }
}