/* ========================
   footer 공통
   ======================== */
#footer {
  width: 100%;
  background-color: #f5f5f5;
}

.footer_accordion {
  background-color: #fff;
  border: 1px solid #D7D7D7;
  width: 100%;
}

.acc_row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.acc_item {
  flex-shrink: 0;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid #D7D7D7;
  color: #222222;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.acc_item:first-child {
  border-left: 1px solid #D7D7D7;
}

.acc_item .acc_icon {
  color: #222222;
  transition: color .3s;
}

.acc_item:hover {
  background-color: var(--blue);
  color: #fff;
}

.acc_item:hover .acc_icon {
  color: #fff;
}

/* ========================
   footer_info : 로고 / 주소 / 설명 / 링크 / 인증뱃지
   ======================== */
.footer_info {
  padding: 60px 0 40px;
    background-color: #f5f5f5;
}

.footer_top {
  margin-bottom: 30px;
    justify-content: space-between;
}

.footer_logo img {
  height: 40px;
}

.footer_side li {
  display: flex;
  align-items: center;
  gap: 0 4px;
  color: #222222;
  cursor: pointer;
  transition: color .3s;
}

.footer_side li+li {
  margin-top: 14px;
}

.footer_side li:hover span{
  border-bottom: 1px solid var(--blue);
}
.footer_side li:hover {
  color: var(--blue);
  
  
}

.footer_addr {
  color: #222222;
  margin-bottom: 8px;
}

.footer_biz {
  color: #222222;
  margin-bottom: 24px;
}

.footer_desc {
  color: #555555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer_notice {
  color: #777777;
  line-height: 1.6;
  margin-bottom: 30px;
}

.footer_divider {
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  margin-bottom: 24px;
}

.footer_links {
  display: flex;
  align-items: center;
  gap: 0 24px;
  margin-bottom: 16px;
}

.footer_links li {
  color: #666666;
  cursor: pointer;
  transition: color .3s;
}

.footer_links li:hover,
.footer_links li.active {
  color: var(--blue);
}

.footer_copyright {
  color: #999999;
  margin-bottom: 30px;
}

.footer_cert {
  width: 100%;
  gap: 0 20px;
  padding: 20px 30px;
  background-color: #fff;
  border: 1px solid #D7D7D7;
  box-sizing: border-box;
}

.cert_logo {
  height: 30px;
  flex-shrink: 0;
}

.footer_cert p {
  color: #555555;
}

/* ========================================================
   반응형 - 태블릿 (768px ~ 1024px)
======================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .acc_item {
        padding: 16px 20px;
    }

    .footer_info {
        padding: 40px 0 30px;
    }

    .footer_cert {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px 0;
    }
}


/* ========================================================
   반응형 - 모바일 (~767px)
======================================================== */
@media screen and (max-width: 767px) {

    /* ---- footer_accordion : 5열 그리드 → 2열 ---- */
    .acc_row {
        grid-template-columns: repeat(2, 1fr);
    }

    .acc_item {
        padding: 14px 16px;
        border-bottom: 1px solid #D7D7D7;
        word-break: keep-all;
    }

    /* 5열→2열이라 오른쪽 끝 테두리가 매번 다른 위치에 생기므로
       홀수번째(왼쪽 칸)는 오른쪽 테두리, 짝수번째(오른쪽 칸)는 제거해서 격자 정리 */
    .acc_item:nth-child(2n) {
        border-right: none;
    }

    .acc_item:first-child {
        border-left: none;
    }

    .acc_icon {
        flex-shrink: 0;
    }

    /* ---- footer_info ---- */
    .footer_info {
        padding: 30px 0 24px;
    }

    .footer_top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px 0;
        margin-bottom: 20px;
    }

    .footer_logo img {
        height: 32px;
    }

    .footer_side {
        width: 100%;
    }

    .footer_side li {
        margin-top: 0;
    }

    .footer_side li + li {
        margin-top: 10px;
    }

    .footer_addr,
    .footer_biz {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .footer_desc,
    .footer_notice {
        margin-bottom: 16px;
    }

    /* ---- footer_links : 가로 나열 → 자동 줄바꿈 ---- */
    .footer_links {
        flex-wrap: wrap;
        gap: 10px 20px;
        margin-bottom: 14px;
    }

    /* ---- footer_cert : 로고+텍스트 가로 → 세로 ---- */
    .footer_cert {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px 0;
        padding: 16px 20px;
    }

    .cert_logo {
        height: 26px;
    }
}