/* =========================================================
   FRONT 통합 CSS
   - 흰색 헤더 / 빨간 FRONT 로고
   - 모바일 가로 슬라이드 카테고리
   - 모바일 햄버거 제거
   - 모바일 본문 좌우 잘림 보정
   ========================================================= */

/* 1. 홈 화면 상단 카드의 대표이미지 숨김 */
body.home main.page-class .mg-card-box > figure.post-thumbnail {
  display: none !important;
}

/* 2. 헤더 상단 남색 띠 제거 */
.mg-headwidget .mg-head-detail,
.mg-headwidget > .clearfix {
  display: none !important;
}

/* 3. 헤더와 로고 영역을 흰색으로 통일 */
.mg-headwidget,
.mg-nav-widget-area-back,
.mg-nav-widget-area-back .overlay,
.mg-nav-widget-area-back .inner,
.mg-nav-widget-area {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mg-nav-widget-area {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 4. FRONT 텍스트 로고 */
.mg-headwidget .site-title {
  margin: 0 !important;
  line-height: 1 !important;
}

.mg-headwidget .site-title a {
  color: #d71920 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 62px !important;
  font-weight: 900 !important;
  letter-spacing: -4px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.mg-headwidget .site-description {
  display: none !important;
}

/* 5. 데스크톱 메뉴바 */
.mg-menu-full,
.mg-headwidget .navbar-wp {
  background: #ffffff !important;
  border-top: 1px solid #dddddd !important;
  border-bottom: 3px solid #111111 !important;
  box-shadow: none !important;
}

.mg-headwidget .navbar-wp a,
.mg-headwidget .navbar-wp i {
  color: #111111 !important;
  fill: #111111 !important;
  font-weight: 700 !important;
}

.mg-headwidget .navbar-wp .navbar-nav > li.active > a,
.mg-headwidget .navbar-wp .navbar-nav > li.current-menu-item > a,
.mg-headwidget .navbar-wp .navbar-nav > li.current-menu-ancestor > a,
.mg-headwidget .navbar-wp .navbar-nav > li > a:hover,
.mg-headwidget .navbar-wp .navbar-nav > li > a:focus {
  color: #d71920 !important;
  background: transparent !important;
}

/* 6. 홈·검색·메뉴 아이콘 배경 제거 */
.mg-headwidget .homebtn,
.mg-headwidget .mobilehomebtn,
.mg-headwidget .navbar-toggle,
.mg-headwidget .navbar-toggler,
.mg-headwidget .msearch,
.mg-headwidget .btn-bell {
  color: #111111 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 7. 데스크톱 드롭다운 메뉴 */
.mg-headwidget .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.mg-headwidget .dropdown-menu a {
  color: #111111 !important;
  background: #ffffff !important;
}

.mg-headwidget .dropdown-menu a:hover,
.mg-headwidget .dropdown-menu a:focus {
  color: #d71920 !important;
  background: #f7f7f7 !important;
}

/* =========================================================
   8. 모바일 헤더 및 가로 슬라이드 메뉴
   구조: 홈 | 카테고리 슬라이드 | 검색 | 구독
   ========================================================= */
@media (max-width: 991px) {
  /* 로고 영역 */
  .mg-nav-widget-area {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .mg-headwidget .site-title a {
    font-size: 42px !important;
    letter-spacing: -3px !important;
  }

  /* 박스 폭 계산을 메뉴 내부로만 제한 */
  .mg-menu-full,
  .mg-menu-full *,
  .mg-menu-full *::before,
  .mg-menu-full *::after {
    box-sizing: border-box;
  }

  /* 메뉴바 전체 */
  .mg-menu-full,
  .mg-menu-full .navbar-wp {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    background: #ffffff !important;
    border-top: 1px solid #dddddd !important;
    border-bottom: 2px solid #111111 !important;
    box-shadow: none !important;
  }

  /* 홈 + 슬라이드 메뉴 + 검색 + 구독 */
  .mg-menu-full .navbar-wp > .container-fluid {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 42px 42px !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  /* 모바일 버튼들을 위 그리드의 직접 항목처럼 배치 */
  .mg-menu-full .m-header {
    display: contents !important;
  }

  /* 왼쪽 집 아이콘 */
  .mg-menu-full .mobilehomebtn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    background: transparent !important;
    font-size: 17px !important;
  }

  /* 모바일에서 데스크톱용 홈 아이콘은 숨김 */
  .mg-menu-full .homebtn {
    display: none !important;
  }

  /* 카테고리 표시 창 */
  .mg-menu-full #navbar-wp,
  .mg-menu-full #navbar-wp.collapse,
  .mg-menu-full #navbar-wp.collapsing {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  .mg-menu-full #navbar-wp > .d-md-block,
  .mg-menu-full #navbar-wp .nav-collapse {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 손가락으로 좌우 이동하는 카테고리 */
  .mg-menu-full #navbar-wp .navbar-nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mg-menu-full #navbar-wp .navbar-nav::-webkit-scrollbar {
    display: none !important;
  }

  .mg-menu-full #navbar-wp .navbar-nav > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  .mg-menu-full #navbar-wp .navbar-nav > li > a {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 10px !important;
    color: #111111 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
  }

  .mg-menu-full #navbar-wp .navbar-nav > li.current-menu-item > a,
  .mg-menu-full #navbar-wp .navbar-nav > li.current-menu-ancestor > a {
    color: #d71920 !important;
  }

  /* 슬라이드 안의 중복 HOME 제거 */
  .mg-menu-full #navbar-wp .navbar-nav > li.menu-item-home,
  .mg-menu-full #navbar-wp .navbar-nav > li.home-menu {
    display: none !important;
  }

  /* 햄버거 버튼 완전히 제거 */
  .mg-menu-full .navbar-toggle,
  .mg-menu-full .navbar-toggler,
  .mg-menu-full button.navbar-toggler {
    display: none !important;
  }

  /* 검색 아이콘 */
  .mg-menu-full .m-header .mg-search-box {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 42px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid #eeeeee !important;
  }

  .mg-menu-full .m-header .msearch {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 구독 종 아이콘 */
  .mg-menu-full .m-header .btn-bell {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 모바일에서는 데스크톱 전용 버튼 묶음 숨김 */
  .mg-menu-full .desk-header {
    display: none !important;
  }

  /* 검색창이 화면 밖으로 나가지 않도록 제한 */
  .mg-menu-full .searchinner {
    left: auto !important;
    right: 0 !important;
    width: min(280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 100000 !important;
  }
}

/* 9. 이전 JavaScript 햄버거가 만든 요소가 남아 있을 경우 숨김 */
#front-menu-backdrop,
#front-mobile-drawer {
  display: none !important;
}

/* =========================================================
   10. 모바일 홈 본문 좌우 잘림 보정
   테마의 alignfull/alignwide 음수 이동만 원위치시킴
   ========================================================= */
@media (max-width: 569px) {
  body.home #content .mg-card-box .alignfull,
  body.home #content .mg-card-box .alignwide {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home #content .mg-card-box {
    overflow: visible !important;
  }
}