/* ===== Responsive: fixed mobile menu height compensation ===== */
@media (max-width: 768px) {
  body {
    padding-top: 56px; /* #mobile_menu_new height */
  }
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    #registration-modal .input-wrap {
        height: 44px;
    }
    #registration-modal .input-wrap input {
        font-size: 14px;
        padding-left: 50px !important;
    }
}
/*모바일 취소화 메뉴*/
/* ===== MOBILE MENU WRAPPER ===== */
#mobile_menu_new {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #0b1c24;
  z-index: 10000;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

/* 햄버거 */
#mobile_menu_new .menu-toggle {
  font-size: 24px;
  background: none;
  border: 0;
  color: #fff;
}

/* ===== OVERLAY ===== */
#mobile_menu_new .menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 9998;
}

/* ===== SLIDE MENU ===== */
#mobile_menu_new .menu-list {
  position: fixed;
  top: 0;
  right: 0;                /*  우측 슬라이드 */
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: #081821;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 9999;
  overflow-y: auto;
}

/* HEADER */
#mobile_menu_new .menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #123;
  color: #fff;
}

#mobile_menu_new .menu-close {
  background: none;
  border: 0;
  font-size: 22px;
  color: #fff;
}

/* MENU ITEMS */
#mobile_menu_new .menu-list li a {
  display: block;
  padding: 16px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #123;
}

/* ===== OPEN STATE ===== */
#mobile_menu_new.open .menu-list {
  transform: translateX(0);
}

#mobile_menu_new.open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}
#mobile_menu_new .menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  opacity: 0;
  pointer-events: none;        /* 닫힘 상태에서는 클릭 막기 */
  transition: opacity .25s;
  z-index: 9998;               /* 메뉴(9999)보다 한 단계 아래 */
}

#mobile_menu_new.open .menu-overlay{
  opacity: 1;
  pointer-events: auto;        /* 열림 상태에서 바깥 터치 받기 */
}
/* ===== BIG CLOSE BUTTON ===== */
#mobile_menu_new .menu-close-big {
  margin-top: auto;
  padding: 20px 16px 30px;
  border-top: 1px solid #123;
}

#mobile_menu_new .menu-close-big button {
  width: 100%;
  height: 56px;
  font-size: 18px;
  font-weight: bold;
  background: #a01818;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#mobile_menu_new .menu-close-big button:active {
  transform: scale(0.97);
}

/*  모바일서브메뉴   */
/* 서브메뉴 기본 닫힘 */
#mobile_menu_new .sub-menu {
  display: none;
  background: #0a2430;
}

/* 서브메뉴 링크 */
#mobile_menu_new .sub-menu a {
  padding: 14px 24px;
  font-size: 15px;
  border-bottom: 1px solid #123;
}

/* 토글 버튼 */
#mobile_menu_new .sub-toggle {
  width: 100%;
  background: none;
  border: 0;
  color: #fff;
  padding: 16px;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 화살표 회전 */
#mobile_menu_new .has-sub.open .arrow {
  transform: rotate(180deg);
}

/*모바일*/
/* =========================
   MOBILE BASE
========================= */
@media (max-width: 768px) {

  body {
    padding: 0;
  }

  .board-outer,
  .board-panel {
    padding: 0;
    margin: 0;
  }

  .wrap {
    padding: 12px;
  }

}
@media (max-width: 768px) {

  .card {
    display: flex;
    gap: 10px;
    padding: 10px;
  }

  .card-thumb {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .card-title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
  }

  .card-meta {
    font-size: 12px;
    opacity: 0.7;
  }

  .card-stat {
    font-size: 12px;
    margin-top: 4px;
  }

}
@media (max-width: 768px) {

  .category-box {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 10px;
  }

  .category-box a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
  }

}
@media (max-width: 768px) {

  .write-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 999px;
    z-index: 1000;
  }

}
.board-content img,
.card img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  input,
  textarea,
  select,
  button {
    font-size: 16px;
  }
}
.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;   /* 로그인 글자 모바일 정렬 */
}


/* =========================
   MOBILE MENU COLOR FIX
   (mobile only)
========================= */
@media (max-width: 1024px) {

  /* 모바일 메뉴 전체 스코프 */
  #mobile_menu_new li,
  #mobile_menu_new button,
  #mobile_menu_new a {
    background: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* 터치/포커스/활성 상태 전부 차단 */
  #mobile_menu_new li:active,
  #mobile_menu_new li:focus,
  #mobile_menu_new li:hover,
  #mobile_menu_new button:active,
  #mobile_menu_new button:focus,
  #mobile_menu_new a:active,
  #mobile_menu_new a:focus {
    background: none !important;
    color: inherit;
  }

  /* 서브메뉴 열림 상태만 최소 강조 */
  #mobile_menu_new .has-sub.open > .sub-toggle {
    background: rgba(255,255,255,0.06);
  }

  /* BIG CLOSE 버튼만 예외 */
  #mobile_menu_new .menu-close-big button {
    background: #b91c1c !important;
    color: #fff;
    border-radius: 12px;
  }
}
/* =========================
   MOBILE MENU ICON ADD
========================= */

/* 메인 메뉴 아이콘 */
#mobile_menu_new .sub-toggle::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 10px;
  background: url("/images/icon-menu.png") center no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* 메인 메뉴 정렬 보정 */
#mobile_menu_new .sub-toggle {
  justify-content: flex-start;
}

/* 화살표는 맨 오른쪽으로 */
#mobile_menu_new .sub-toggle .arrow {
  margin-left: auto;
}

/* 서브메뉴 아이콘 */
#mobile_menu_new .sub-menu a::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url("/images/icon-menu.png") center no-repeat;
  background-size: contain;
  flex-shrink: 0;
  display: inline-block;
}

/* 서브메뉴 정렬 */
#mobile_menu_new .sub-menu a {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {

  /* 상단 바 */
  #mobile_menu_new .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 좌 ☰ / 우 로그인 */
    width: 100%;
    height: 56px;
  }

  /* ☰ 버튼 */
  #mobile_menu_new .menu-toggle {
    font-size: 24px;
  }

  /* 로그인/회원가입 영역 */
  #mobile_menu_new .mobile-auth {
    display: flex;
    gap: 8px;
  }

  #mobile_menu_new .mobile-auth a {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
  }

}
@media (max-width: 768px) {

  #mobile_menu_new .mobile-auth {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;          /*  공간 부족해도 줄지 않게 */
  }

  #mobile_menu_new .mobile-auth a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;         /* 모바일 맞춤 */
    padding: 6px 8px;
    line-height: 1;
    white-space: nowrap;     /* 줄바꿈 금지 */

    border-radius: 6px;
  }

}
@media (max-width: 768px) {

  /* 로그인 / 회원가입 강제 표시 */
  #mobile_menu_new .ht-login-btn,
  #mobile_menu_new .ht-join-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10001;
  }
}
@media (max-width: 768px) {

  /* 모바일 상단바 기준 잡기 */
  #mobile_menu_new {
    display: flex;
    align-items: center;
    justify-content: flex-start; /*  좌측 정렬 */
  }

  /* 햄버거 버튼 강제 좌측 고정 */
  #mobile_menu_new .menu-toggle {
    margin-left: 0 !important;
    margin-right: auto !important; /*  나머지 요소 밀어냄 */
    padding: 0;
  }

}
@media (max-width: 768px) {

  .top-panel .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-auth {
    display: flex;
    gap: 10px;
  }

  .mobile-auth a {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    padding: 4px 8px;
    color: #fff;
    white-space: nowrap;
  }

}

/*마우스 UP*/
#ht-user-area-b {
    display: inline-block;
    padding: 5px 15px;
    width: 100px;
    min-width: 20%;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    z-index: 10;
}


#ht-user-area-b {
    /*position: relative;*/
    /*transition: all 0.4s ease-in-out;*/
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    z-index: 10;
    /*cursor: pointer;*/

    /* --- [박스 크기 조절 핵심] --- */
    display: inline-block;     
    padding: 5px 15px;         
    width: 100px;              
    min-width: 20%;         
    /* -------------------------- */
}


#ht-user-area-b:hover {
    /* 1. 외부 광체: 사이언 블루 글로우 */
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), 
                0 0 30px rgba(0, 242, 255, 0.2);
    
    /* 2. 테두리 강화: 골드 포인트 */
    border-color: rgba(240, 200, 109, 0.8) !important;
    
    /* 3. 전체적인 선명도 및 밝기 업 */
    filter: brightness(1.15);
    background: rgba(255, 255, 255, 0.03); /* 배경 미세하게 활성화 */
    transform: translateY(-2px); /* 살짝 떠오르는 느낌 */
}


#ht-user-area-b:hover span, 
#ht-user-area-b:hover p, 
#ht-user-area-b:hover strong {
    color: #fff !important;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.8);
    transition: 0.3s;
}


#ht-user-area-b::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.1), transparent);
    transition: none;
}

#ht-user-area-b:hover::after {
    left: 100%;
    transition: all 0.8s ease-in-out;
}

@media (max-width: 768px) {
    body,html {/*모바일 가로 방향(좌우) 스크롤이 생기지 않도록 강제로 차단,삭제시 모바일 좌우틀어짐*/
        overflow-x: hidden;
    }
}