/* Edge/IE 비밀번호 자체 reveal 버튼 숨김 (커스텀 눈 아이콘과 중복 방지) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* ── 데스크톱(lg+)에서만 navbar 패딩 15px 적용 ── */
.navbar-desktop-pad {
    padding: 0;
}
@media (min-width: 992px) {
    .navbar-desktop-pad {
        padding: 15px;
    }
}

/* ── 헤더 stacking context: 드롭다운이 페이지 콘텐츠 위에 표시되도록 ── */
header {
    position: relative;
    z-index: 1041; /* dark nav(1040)보다 높아야 내부 dropdown이 앞에 표시됨 */
}

/* ── PC: 흰 헤더(1행) sticky 고정 ── */
@media (min-width: 992px) {
    header {
        position: sticky;
        top: 0;
        background: white;
    }
}
header .dropdown-menu {
    z-index: 9999;
}

/* ── 우측 flex 영역 드롭다운 (알림 등) — 레이아웃 틀어짐 방지 ── */
.navbar-nav.flex-row .nav-item.dropdown {
    position: relative;
}
.navbar-nav.flex-row .dropdown-menu {
    position: absolute;
    top: 100%;
}

/* ── 헤더 nav-link 좌우 패딩 (header 내부 + dark nav) ── */
header .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
}

/* ── 하단 nav행 높이 고정 (hover 시 흔들림 방지) ── */
.header-nav-row {
    position: relative;
    height: 42px;
}
.header-nav-row .nav-link {
    height: 42px;
    line-height: 42px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap;
}
.header-nav-row .dropdown-toggle::after {
    vertical-align: middle;
}

/* ── 전체 카테고리 메가 드롭다운 ── */
.category-panel-overlay {
    display: none;
    position: fixed;
    top: 0; /* JS positionCategoryPanel()이 dark nav 하단으로 덮어씀 */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1038;
}
.category-panel-overlay.show {
    display: block;
}
/* 위치(left/width)는 JS positionCategoryPanel()이 동적으로 주입 */
.category-panel {
    display: none;
    position: fixed;
    overflow-y: auto;
    background: #fff;
    z-index: 1039;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 20px 24px 32px;
    margin-top: 6px;
}
.category-panel.show {
    display: block;
}
@media (max-width: 991.98px) {
    .category-panel {
        left: 0 !important;
        width: 100% !important;
        border-radius: 0 0 12px 12px;
    }
}
.category-mega-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    transition: color 0.15s;
    z-index: 1;
}
.category-mega-close:hover {
    color: #212529;
}
.category-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 24px 16px;
    padding-top: 4px;
}
.category-mega-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #0d6efd;
}
.category-mega-title a {
    color: inherit;
    text-decoration: none;
}
.category-mega-title a:hover {
    color: #0d6efd;
}
.category-mega-sub {
    display: block;
    font-size: 0.82rem;
    color: #555;
    text-decoration: none;
    padding: 3px 0;
    line-height: 1.7;
    transition: color 0.15s;
}
.category-mega-sub:hover {
    color: #0d6efd;
}

/* ── 헤더 검색바 (흰 배경 1행) ── */
.header-search-input {
    background: #fff;
    border: 2px solid #adb5bd;
    border-right: none;
    border-radius: 20px 0 0 20px;
    color: #333;
    height: 38px;
    font-size: 0.9rem;
}
.header-search-input:focus {
    background: #fff;
    color: #333;
    box-shadow: none;
    border-color: #6c757d;
}
.header-search-input::placeholder {
    color: #adb5bd;
    font-size: 0.88rem;
}
.header-search-btn {
    background: #fff;
    border: 2px solid #adb5bd;
    border-left: 1px solid #dee2e6;
    border-radius: 0 20px 20px 0;
    color: #555;
    padding: 0 14px;
    height: 38px;
}
.header-search-btn:hover {
    background: #f5f5f5;
    color: #222;
}

/* ── 1행(흰 배경) 링크 색상 ── */
.header-row1-link {
    color: #212529 !important;
}
.header-row1-link:hover {
    color: #0d6efd !important;
}
.header-row1 .nav-link-stacked {
    color: #212529;
}
.header-row1 .nav-link-stacked:hover {
    color: #0d6efd;
}

.nav-link-stacked.dropdown-toggle::after {
    display: none;
}

.nav-link-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    padding-top: 4px;
    padding-bottom: 4px;
}
.nav-link-stacked i {
    font-size: 1.25rem;
    margin-bottom: 3px;
}
.nav-link-stacked .nav-link-label {
    font-size: 0.85rem;
}

.sns-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

input::placeholder,
textarea::placeholder {
    color: #b0b8c1;
    opacity: 1;
}

html {
  font-size: 13px;
}

/* 태블릿 (768px ~ 1199px) */
@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* 데스크톱 (1200px 이상) - 기존 16px에서 14px로 축소 */
@media (min-width: 1200px) {
  html {
    font-size: 14px;
  }
}

/* 대형 모니터 (1600px 이상) */
@media (min-width: 1600px) {
  html {
    font-size: 14.5px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  height: 100%;
  overflow-y: scroll; /* 스크롤바 항상 표시 → 페이지 전환 시 레이아웃 흔들림 방지 */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .container {
  flex: 1;
}

/* @media (min-width: 992px) {
  body > .container {
    padding-top: 30px;
  }
} */

/* Nested Dropdown Styles */
.dropdown-menu li {
    position: relative;
}

.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .submenu {
    display: block;
}

/* Bootstrap 5 Dropend support for 3-depth categories */
.dropdown-menu .dropend .dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: 0;
}

.dropdown-menu .dropend:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu .dropend > .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.15em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

/* ========================================
   전역 Dropdown Hover 설정
   모든 .nav-item.dropdown에 자동 적용
   관리자가 새 카테고리 추가 시에도 자동 동작
   ======================================== */

/* 최상위 네비게이션 드롭다운 - 마우스오버로 열기 */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
}

/* 2행 메뉴의 드롭다운이 부모 너비를 넓히지 않도록 absolute 포지셔닝 강제 적용 
   (navbar-expand 클래스가 없어서 발생하는 Bootstrap 기본 static 포지션 무효화) */
.header-nav-row .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
}

/* 하위 메뉴 드롭다운 (3depth 등) - 마우스오버로 열기 */
.dropdown-menu .dropdown:hover > .dropdown-menu,
.dropdown-menu .dropend:hover > .dropdown-menu {
    display: block;
}

/* Mobile support - indent instead of flyout */
@media (max-width: 991px) {
    .dropdown-menu .submenu {
        display: none; /* JS toggle would be better for mobile, but simplified here */
        position: static;
        margin-left: 20px;
        border: none;
        box-shadow: none;
    }

    .dropdown-menu > li:hover > .submenu {
        display: block;
    }

    .dropdown-menu .dropend .dropdown-menu {
        position: static;
        margin-left: 20px;
        border: none;
        box-shadow: none;
    }

    /* Mobile에서도 전역 hover 동작 유지 */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* ========================================
   메인 캐러셀 모바일 반응형
   ======================================== */

/* 모바일 캐러셀 이미지 높이 조정 */
@media (max-width: 768px) {
    #mainCarousel .carousel-item img {
        max-height: 220px !important;
        height: 220px !important;
        object-fit: cover;
        object-position: center;
    }
    
    #mainCarousel {
        border-radius: 8px;
        overflow: hidden;
    }
    
    #mainCarousel .carousel-caption {
        padding: 8px 12px;
    }
    
    #mainCarousel .carousel-caption h5 {
        font-size: 1rem;
        margin-bottom: 4px;
    }
    
    #mainCarousel .carousel-caption p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}

/* 작은 모바일 */
@media (max-width: 480px) {
    #mainCarousel .carousel-item img {
        max-height: 180px !important;
        height: 180px !important;
    }
    
    #mainCarousel .carousel-control-prev-icon,
    #mainCarousel .carousel-control-next-icon {
        width: 30px;
        height: 30px;
        background-size: 50% 50%;
    }
}

/* Bootstrap 4 badge-* 호환 (Bootstrap 5 환경에서 정의되지 않은 클래스 보완) */
.badge-primary   { background-color: #0d6efd; color: #212529; }
.badge-secondary { background-color: #6c757d; color: #fff; }
.badge-success   { background-color: #198754; color: #212529; }
.badge-danger    { background-color: #dc3545; color: #212529; }
.badge-warning   { background-color: #ffc107; color: #212529; }
.badge-info      { background-color: #0dcaf0; color: #212529; }
.badge-light     { background-color: #f8f9fa; color: #212529; }
.badge-dark      { background-color: #212529; color: #fff; }

/* 태블릿 (768px ~ 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #mainCarousel .carousel-item img {
        max-height: 280px !important;
        height: 280px !important;
        object-fit: cover;
    }
}

/* ── 상단으로 이동 버튼 ── */
#scrollTopBtn {
    position: fixed;
    bottom: 32px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #667eea;
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.2s;
    z-index: 1050;
}
#scrollTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#scrollTopBtn:hover {
    background: #5568d3;
}
@media (max-width: 767px) {
    #scrollTopBtn {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}