/* ==========================
   바디 기본 스타일
========================== */
body {
  background-color: #000000;
  /* 전체 다크 배경 */
  color: #ffffff;
  /* 기본 글씨 흰색 */
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  padding: 0;
}
/* 가로 밀림 방지 통합 수정본 */
* {
  box-sizing: border-box;
  /* 모든 요소의 너비 계산에 패딩 포함 */
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  /* 가로 스크롤 차단 */
}

/* 텍스트 래퍼가 화면을 뚫고 나가는 것 방지 */
.moon-text-wrapper {
  max-width: 100%;
}

/* 영상이 화면을 꽉 채우되 삐져나가지 않게 */
.responsive-video-wrapper video {
  max-width: 100%;
}


/* ==========================
   헤더 스타일
========================== */
.header-top-inner {
  display: flex;
  justify-content: space-between;
  /* 3등분 배치 */
  align-items: center;
  /* 수직 중앙 정렬 */
  padding: 20px;
  flex-wrap: wrap;
  /* 화면 좁아지면 줄바꿈 */
  text-align: center;
  /* 줄바꿈 시 중앙 정렬 */
}

/* 각 영역을 가로 3등분 */
.logo-area,
.date-area,
.slogan-area {
  flex: 1 1 33%;
  /* 기본 33%, 줄어들면 1:1 비율로 줄어듦 */
  display: flex;
  justify-content: center;
  /* 각 영역 내부 가로 중앙 정렬 */
  align-items: center;
  /* 각 영역 내부 세로 중앙 정렬 */
  min-width: 200px;
  /* 너무 작아지면 줄바꿈 */
  box-sizing: border-box;
}

/* 로고 영역 */
.logo-area .logo img {
  max-width: 250px;
  height: auto;
  filter: brightness(1.2);
}

/* 날짜 영역 */
.date-area {
  flex-direction: column;
  /* 시계와 날짜 세로 정렬 */
  color: #f802f0;
}

.current-time {
  font-weight: bold;
  font-size: 2rem;
  color: #0ffd03;
}

.current-date {
  margin-top: 4px;
  font-size: 2rem;
}

/* 슬로건 영역 */
.slogan-area .slogan {
  font-size: 2.5rem;
  color: #02fcb5;
}

/* ==========================
   반응형 스타일 (모바일)
========================== */
@media (max-width: 1024px) {
  .header-top-inner {
    flex-direction: column;
    /* 모바일에서는 세로 배치 */
    align-items: center;
    gap: 10px;
  }

  .logo-area .logo img {
    max-width: 100%;
  }

  .current-time,
  .current-date,
  .slogan-area .slogan {
    font-size: 2.5rem;
  }
}



.hamburger-btn {
  display: none;
}
/* 사이드 메뉴 */
.glpnav{
    color: #fff;
      font-size: 1.5rem;
      text-decoration: none;
      display: block;
      padding: 8px 0;
      margin-bottom: 10px;
}
/* 사이드 메뉴 수정본 */
.side-menu {
  position: fixed;
  top: 0;
  /* % 대신 너비값만큼 확실하게 밀어냅니다 */
  right: -310px;
  width: 300px;
  height: 100%;
  background-color: #111111;
  color: #ffffff;
  padding: 40px 20px;
  /* 그림자가 보이지 않게 active 상태에서만 그림자를 주거나, 평소엔 투명하게 조절 */
  box-shadow: -5px 0 20px rgba(0, 255, 200, 0);
  transition: right 0.5s ease, box-shadow 0.5s ease;
  z-index: 1000;
  overflow-y: auto;
  /* 가로 스크롤 방지 */
  box-sizing: border-box;
}

/* 메뉴 열림 */
.side-menu.active {
  right: 0;
  box-shadow: -5px 0 20px rgba(0, 255, 200, 0.3);
}

/* PC 오른쪽 끝 감지 영역 */
.nav-hover-zone {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  /* 감지 영역만 보임 */
  height: 100%;
  z-index: 999;
}

/* 메뉴 항목 */
.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: 15px;
}

.nav-item>.nav-link {
  color: #0ffd03;
  font-size: 1.2rem;
  text-decoration: none;
  display: block;
  padding: 8px 0;
}

.nav-item>.nav-link:hover {
  color: #02fcb5;
}

/* 서브 메뉴 */
.sub-menu {
  list-style: none;
  padding-left: 15px;
  margin-top: 5px;
  display: none;
}

.nav-item.open .sub-menu {
  display: block;
}

.sub-menu .nav-link {
  font-size: 1rem;
  color: #aaaaaa;
}

.sub-menu .nav-link:hover {
  color: #0ffd03;
}

/* 모바일 대응 수정 */
@media (max-width: 1024px) {
  .side-menu {
    width: 280px;
    /* 모바일에서 너무 넓지 않게 조절 */
    right: -290px;
    /* 너비보다 조금 더 밀어내기 */
  }

  /* 화면 전체 가로 스크롤 방지용 (body나 html에 추가 권장) */
  body {
    overflow-x: hidden;
  }
}



/* (사)K-GLP생활체육회 */
.main-top-text-one {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 900;
  /* 확실히 두껍게 */
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin: 20px 0 10px 0;
  text-shadow: 0 0 6px rgba(0, 255, 200, 0.5);
  z-index: 2;
  position: relative;
}

/* 설명 텍스트 */
.main-top-text-two {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #02fee5;
  text-align: center;
  margin: 0 0 20px 0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

/* 원격지원 버튼 – 화면 위, 위치 고정, 줄 차지 X */
.main-top-text-one-order {
  position: fixed;
  /* 화면 위에 고정 */
  top: 90%;
  /* 상단에서 간격 */
  right: 8%;
  /* 오른쪽 끝 */
  display: inline-block;
  /* 줄 차지 X */
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 2.0rem;
  color: #000000;
  background-color: #0ffd03;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 999;
  /* 영상/텍스트 위에 표시 */
  transition: all 0.3s ease;
}

.main-top-text-one-order:hover {
  background-color: #02fcb5;
  color: #000000;
}

/* 모바일 대응 */
@media (max-width: 1024px) {
  .main-top-text-one {
    font-size: 2rem;
  }

  .main-top-text-two {
    font-size: 1.2rem;
  }

  .main-top-text-one-order {
    display: none;
  }
}





/* 영상 wrapper */
.responsive-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  /* 화면 전체 */
  overflow: hidden;
}

/* video 전체 화면 */
.responsive-video-wrapper video {
  width: 100%;
  height: 80%;
  object-fit: cover;
  z-index: 0;
}

/* canvas 필요 시 (효과용) */
#videoCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 중앙 텍스트 wrapper */
.moon-text-wrapper {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  width: 90%;
  max-width: 1800px;
  font-family: 'Nanum Gothic', sans-serif;
  text-shadow: 0 0 2px rgb(10, 10, 10);
  z-index: 2;
  font-size: 5rem;
  font-weight: 900;
}

/* 각 텍스트 블록 초기 숨김 */
.moon-text-wrapper>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  width: 100%;
}

/* 현재 보여지는 텍스트 */
.moon-text-wrapper>div.visible {
  opacity: 1;
}

/* 텍스트 스타일 */
.moon-title {
  font-size: 3.5rem;
  margin: 0;
    font-family: 'Anton', sans-serif;
      font-weight: 400;
      /* Anton은 이미 두꺼움 */
}

.moon-desc {
  font-size: 3rem;
  margin: 0;
}

/* 모바일 대응 */
@media (max-width: 1024px) {
  .moon-title {
    font-size: 1.5rem;
  }

  .moon-desc {
    font-size: 1rem;
  }

    .moon-text-wrapper {
      
    font-size: 2.5rem;
    }
}



/* 상단 소개 텍스트 */
.intro-text {
  text-align: center;
  padding: 60px 20px 40px;
  margin-top: -350px;
  margin-bottom: -50px;
}

.intro-text p {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e0e0e0;
  letter-spacing: -0.5px;
}

/* 인포 섹션 컨테이너 */
.infoma {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.info-section {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  /* 반응형을 위한 설정 */
}

/* 개별 정보 카드 */
.info-card {
  flex: 1;
  width: 350px;
  max-width: 350px;

  /* 최소 너비 강제 해제 */
  background: #00272e;
  /* 카드 배경 (진한 회색) */
  border: 1px solid #fbfafa;
  border-radius: 16px;
  padding: 30px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 카드 호버 효과 */
.info-card:hover {
  transform: translateY(-10px);
  background: #252525;
  border-color: #444;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
}

/* 비디오 아이콘 스타일 */
.video-icon {
  width: 320px;
  height: 220px;
  border-radius: 5%;
  object-fit: cover;
  margin-bottom: 20px;
  background: #000;
}

/* 타이틀 및 클릭 큐 */
.info-card h3 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.click-cue {
  font-size: 0.9rem;
  color: #007bff;
  /* 포인트 컬러 (파란색) */
  transition: transform 0.3s ease;
}

.info-card:hover .click-cue {
  transform: translateX(5px);
}

/* 설명 텍스트 */
.info-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #aaa;
  word-break: keep-all;
}

/* ------------------------------------------------
   📱 반응형 브레이크포인트
--------------------------------------------------- */

/* 태블릿 사이즈 (1024px 이하) */
@media (max-width: 1024px) {
  .info-section {
    gap: 15px;
  }

  .info-card {
width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  /* 최소 너비 강제 해제 */
  box-sizing: border-box;
  /* 패딩이 너비에 포함되도록 */
  }

    .intro-text {
      margin-top: 0px;
      margin-bottom: 0px;
    }
}

/* 모바일 사이즈 (768px 이하) */
@media (max-width: 768px) {
  .intro-text p {
    font-size: 1.2rem;
  }

  .info-section {
    flex-direction: column;
    align-items: center;
  }

  .info-card {
width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  /* 최소 너비 강제 해제 */
  box-sizing: border-box;
  /* 패딩이 너비에 포함되도록 */
  }
            .intro-text {
              margin-top: 0px;
              margin-bottom: 0px;
            }
}




/* BUSINESS 섹션 전체 컨테이너 */
.BUSINESS {
  padding: 100px 20px;
  background-color: #000000;
  text-align: center;
}

/* 상단 타이틀 스타일: 은은한 발광 효과 추가 */
.business-text {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 4px;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 섹션 설명 문구 */
.BUSINESS>p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #dddddd;
  margin-bottom: 60px;
  word-break: keep-all;
}

/* 카드 영역 레이아웃 */
.business-cards {
  max-width: 1200px;
  margin: 0 auto 50px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 개별 카드 (Gov / Client) */
.business-card-one,
.business-card-two {
  background: #111111;
  /* 배경에서 살짝 띄워진 느낌의 짙은 회색 */
  border: 1px solid #2a2a2a;
  border-radius: 24px;
  padding: 50px 40px;
  transition: all 0.3s ease;
}

.business-card-one:hover,
.business-card-two:hover {
  border-color: #007bff;
  /* 호버 시 포인트 컬러 테두리 */
  box-shadow: 0 10px 30px rgba(0, 123, 255, 0.1);
}

.business-cards h2 {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 15px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

/* 제목 아래 짧은 강조선 */
.business-cards h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: #007bff;
  margin: 10px auto 0;
}

.business-cards p {
  font-size: 1.05rem;
  color: #aaaaaa;
  margin-bottom: 40px;
}

/* 로고 정렬 영역: 처음부터 컬러 활성화 */
.logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 30px;
  align-items: center;
  justify-items: center;
}

.logo-row img {
  filter: none;
  /* 흑백 효과 제거 -> 컬러 활성화 */
  opacity: 1;
  /* 투명도 제거 -> 선명하게 */
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* 통통 튀는 애니메이션 */
}

/* 로고 호버 시 강조 효과 */
.logo-row img:hover {
  transform: scale(1.15);
  /* 마우스 올리면 로고가 커짐 */
  z-index: 10;
}

/* ------------------------------------------------
   📱 반응형 대응
--------------------------------------------------- */

/* 태블릿 사이즈 (1024px 이하) */
@media (max-width: 1024px) {
  .business-text {
    font-size: 2.5rem;
  }

  .logo-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* 모바일 사이즈 (768px 이하) */
@media (max-width: 768px) {
  .BUSINESS {
    padding: 70px 20px;
  }

  .business-text {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }

  .BUSINESS br {
    display: none;
    /* 모바일 가독성을 위해 줄바꿈 제거 */
  }

  .business-card-one,
  .business-card-two {
    padding: 40px 20px;
  }

  .logo-row {
    grid-template-columns: repeat(3, 1fr);
    /* 모바일에서도 3열 유지 */
    gap: 15px;
  }

  .logo-row img {
    width: 85px !important;
    /* 모바일 최적화 로고 크기 */
  }
}



#ESG {
  padding: 100px 20px;
  background-color: #000;
  text-align: center;
}

.contact-text {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 4px;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 카드가 하나만 보일 영역 */
.esg-view-window {
  position: relative;
  max-width: 95%;
  /* 카드의 너비 */
  height: 950px;
  /* 카드의 높이 */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
}

.esg-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 평소엔 숨김 */
  visibility: hidden;
  transition: all 1s ease-in-out;
  /* 부드러운 전환 */
  cursor: pointer;
}

/* ⭐ 활성화된 카드만 컬러로 등장 */
.esg-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.esg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0%);
  /* 처음부터 컬러로 활성화 */
  border-radius: 30px;
}

.esg-item h2 {
  position: absolute;
  top: 50%;
  /* 세로 중앙 */
  left: 50%;
  /* 가로 중앙 */
  transform: translate(-50%, -50%);
  /* 정확한 중심점 일치 */

  z-index: 15;
  color: #ffffff;
  font-size: 3.5rem;
  /* 중앙 타이틀은 큼직하게 */
  font-weight: 800;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  margin: 0;
  white-space: nowrap;
  /* 줄바꿈 방지 */
  text-transform: uppercase;
}

/* 모바일 대응 수정본 */
@media (max-width: 1024px) {
  #ESG {
    padding: 60px 15px;
    /* 상하 패딩 조절 */
  }

  .contact-text {
    font-size: 2rem;
    /* 제목 크기 최적화 */
    letter-spacing: 2px;
  }

  .esg-view-window {
    height: 450px;
    /* 모바일에서 적절한 높이 */
    max-width: 100%;
    /* 화면에 꽉 차게 (밀림 방지) */
    border-radius: 20px;
  }

  .esg-item h2 {
    /* 기존 중앙 정렬 해제 및 왼쪽 상단 배치 */
    top: 25px;
    left: 25px;
    transform: none;
    /* ⭐ 매우 중요: 기존 translate(-50%, -50%)를 초기화 */
    color: #fff;
    text-shadow:
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 1),
        0 0 30px rgba(0, 0, 0, 0.8);
    font-size: 1.5rem;
    /* 글자 크기 축소 */
    white-space: normal;
    /* 모바일에서는 줄바꿈 허용 */
    width: calc(100% - 50px);
    /* 좌우 여백 확보 */
    text-align: left;
    line-height: 1.3;
  }
}



/* SOLUTION 섹션 전체 컨테이너 */
.solution-section {
  padding: 100px 20px;
  background-color: #000000;
  /* 블랙 배경 */
  text-align: center;
  color: #ffffff;
}

.solution-text {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 5px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.solution-intro {
  font-size: 1.2rem;
  color: #aaaaaa;
  margin-bottom: 60px;
}

/* 9개 카드를 위한 그리드 레이아웃 */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 기본 3열 배치 */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 개별 솔루션 카드 */
.solution-card {
  background: #41003c;
  /* 카드 배경 어두운 회색 */
  border: 1px solid #222222;
  border-radius: 20px;
  padding: 40px 20px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

/* 카드 호버 효과: 떠오르고 테두리 강조 */
.solution-card:hover {
  transform: translateY(-10px);
  border-color: #007bff;
  /* 파란색 포인트 컬러 */
  background: #0c004b;
  box-shadow: 0 15px 40px rgb(245, 245, 246);
}

.solution-card h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}

/* 아이콘 이미지 스타일 */
.solution-card img {
  display: block;
  margin: 0 auto 25px;
  object-fit: contain;
  transition: transform 0.4s ease;
  /* 필터를 넣어 아이콘을 약간 더 밝게 처리할 수 있습니다 */
  filter: brightness(0.9);
}

.solution-card:hover img {
  transform: scale(1.1);
  /* 호버 시 아이콘 살짝 커짐 */
  filter: brightness(1.2);
}

.solution-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #888888;
  word-break: keep-all;
}

/* ------------------------------------------------
   📱 반응형 대응
--------------------------------------------------- */

/* 태블릿 사이즈 (1024px 이하): 2열로 변경 */
@media (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 모바일 사이즈 (768px 이하): 1열로 변경 */
@media (max-width: 768px) {
  .solution-text {
    font-size: 2.2rem;
  }

  .solution-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .solution-card {
    padding: 30px 20px;
  }

  .solution-card img {
    width: 150px !important;
    /* 모바일에서 아이콘 크기 최적화 */
    height: auto !important;
  }
}




/* CONTACT 전체 섹션 */
#CONTACT {
  padding: 100px 20px;
  background-color: #0b0b0b;
  color: #fff;
}

.contact-text {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 5px;
}

/* 🎥 CEO 메시지 & 비디오 영역 */
.message-jin {
  max-width: 1200px;
  margin: 0 auto 100px;
}

.welcome-message h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #007bff;
}

.cheravideo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 비디오 2열 배치 */
  gap: 30px;
}

.video-container {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #333;
}

.video-container video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
}

.video-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ccc;
  text-align: justify;
}

/* 🗺️ 지도 영역 */
.map-jin {
  max-width: 1200px;
  margin: 0 auto 80px;
  text-align: center;
}

.map-container {
  margin: 30px 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #333;
}

/* 🚌 버스 안내 그리드 */
.bus-info {
  margin-top: 50px;
  text-align: left;
}

.bus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 25px;
}

.bus-card {
  background: #1a1a1a;
  padding: 15px;
  border-radius: 12px;
  border-left: 4px solid #007bff;
  font-size: 0.9rem;
  color: #fff;
}

.bus-card span {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
}

/* 🏢 기업 정보 테이블 */
.information-jin {
  max-width: 800px;
  margin: 0 auto;
  background: #111;
  padding: 40px;
  border-radius: 20px;
}

.information-jin h2 {
  margin-bottom: 30px;
  border-bottom: 2px solid #007bff;
  display: inline-block;
  padding-bottom: 5px;
}

.information-jin table {
  width: 100%;
  border-collapse: collapse;
}

.information-jin th {
  width: 30%;
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid #222;
  color: #007bff;
}

.information-jin td {
  padding: 15px;
  border-bottom: 1px solid #222;
  color: #ddd;
}

/* 📱 반응형 설정 */
@media (max-width: 900px) {
  .cheravideo {
    grid-template-columns: 1fr;
    /* 비디오 1열로 */
  }
}



.modern-footer {
  background-color: #0f1113;
  /* 완전 블랙보다 고급스러운 다크 그레이 */
  color: #a0a0a0;
  padding: 60px 0 30px;
  font-family: 'Pretendard', sans-serif;
  border-top: 1px solid #222;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 상단 영역 */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.footer-logo {
  height: 40px;
  margin-right: 15px;
  vertical-align: middle;
}

.brand-tagline {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.footer-policy strong {
  font-size: 0.8rem;
  color: #007bff;
  /* 포인트 컬러 */
  background: rgba(0, 123, 255, 0.05);
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.footer-divider {
  border: 0;
  border-top: 1px solid #222;
  margin: 0 0 40px 0;
}

/* 그리드 영역 */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}

.column-title {
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.footer-column p {
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 8px;
  color: #888;
}

.footer-column a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #007bff;
}

/* 저작권 영역 */
.footer-bottom {
  text-align: center;
  border-top: 1px solid #1a1a1a;
  padding-top: 30px;
}

.copyright {
  font-size: 0.75rem;
  color: #555;
}

/* 반응형 모바일 */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .column-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #007bff;
    margin: 10px auto;
  }
}