@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700&display=swap');

.bg-light {
    background-color: #F4F3F1 !important;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}

.btn-primary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #eea321;
    --bs-btn-border-color: #eea321;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #d58d11;
    --bs-btn-hover-border-color: #d58d11;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #eea321;
    --bs-btn-active-border-color: #eea321;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #e9c78c;
    --bs-btn-disabled-border-color: #e9c78c;
}

.btn-warning {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #eea321;
    --bs-btn-border-color: #eea321;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #eea321;
    --bs-btn-hover-border-color: #eea321;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #eea321;
    --bs-btn-active-border-color: #eea321;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #eea321;
    --bs-btn-disabled-border-color: #eea321;
}


/* 모바일 스타일 */
@media (max-width: 767.98px) {
    .main-bg {
        height: 100vw;
    }

    .rounded-circle {
        width: 50%;
    }

    h1 {
        font-size: 7vw;
    }
    
    h2 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 400;
        font-size: 38px;
    }
    
    h3 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 700;
        font-size: 24px;
    }
    
    h4 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    strong {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 400;
        font-size:70px;
        color: #DF9C3A;
    }
    
    p {
        font-size: 16px;
    }
    
    .navbar {
        font-weight: 700;
    }
    
    a:not(.page-link) {
        color: black !important;
    }
    
}

/* 데스크탑 스타일 */
@media (min-width: 768px) {
    .main-bg {
        height: 42.8571vw;
    }
    
    .rounded-circle {
        width: 70%;
    }

    h1 {
        font-size: 48px;
    }
    
    h2 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 400;
        font-size: 38px;
    }
    
    h3 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 700;
        font-size: 24px;
    }
    
    h4 {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    strong {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 400;
        font-size:70px;
        color: #DF9C3A;
    }
    
    p {
        font-size: 16px;
    }
    
    .navbar {
        font-weight: 700;
    }
    
    a:not(.page-link) {
        color: black !important;
    }
    
}

.main-bg {
    background: transparent;
}

.hamburgerContainer {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.hamburgerContainer .bar1 {
    width: 30px;
    height: 4px;
    position: absolute;
    left:0px;
    top:5px;
    border-radius: 2px;
    background: black;
    
    transform: scale(1.0) translateY(0) rotate(0);
    transform-origin: center;
    transition: transform .3s, opacity .3s;
    transition-timing-function: ease-in-out;
    will-change: transform;
}

.hamburgerContainer .bar2 {
    width: 30px;
    height: 4px;
    position: absolute;
    left:0px;
    top:13px;
    border-radius: 2px;
    background: black;
    opacity: 1;
    transition: transform .3s, width .3s;
    transition-timing-function: ease-in-out;
    will-change: transform;
}

.hamburgerContainer .bar3 {
    width: 30px;
    height: 4px;
    position: absolute;
    left:0px;
    top:13px;
    border-radius: 2px;
    background: black;
    
    transition:  transform .3s, width .3s;
    transition-timing-function: ease-in-out;
    will-change: transform;
}

.hamburgerContainer .bar4 {
    width: 30px;
    height: 4px;
    position: absolute;
    left:0px;
    top:21px;
    border-radius: 2px;
    background: black;
    opacity: 1.0;
    
    transform: scale(1.0) translateY(0) rotate(0);
    transition:  transform .3s, opacity .3s;
    transition-timing-function: ease-in-out;
    will-change: transform;
}

.hamburgerContainer.active .bar1{
    opacity: 0.0;
    transform: scale(0.5) translate(0, 6px);
}

.hamburgerContainer.active .bar2{
    transform: rotate(45deg);
}

.hamburgerContainer.active .bar3{
    transform: rotate(-45deg);
}

.hamburgerContainer.active .bar4{
    opacity: 0.0;
    transform: scale(0.5) translate(0, -6px);
}

#hamburger {
    z-index: 1;
    position: absolute;
    background: linear-gradient(rgba(255,255,255,1.0),90%,rgba(255,255,255,.0));
    height: 300px;
    top:62px;
    transform: translateY(-150px) scaleY(.0);
    transition: transform .4s;
    will-change: transform;
    text-align: right;
}

#hamburger.active {
    transform: translateY(0px) scaleY(1.0);
}

#hamburger .nav-link {
    opacity: .0;
    font-size: 20px;
    transition: opacity 0.2s;
    transition-timing-function: ease-in-out;
}

#hamburger.active .nav-link {
    opacity: 1.0;
}


#hamburger a {
    color: black;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px !important;
    line-height: 40px !important;
}

/* Pagination active style override (Bootstrap 5.2.x) */
.pagination {
  --bs-pagination-active-bg: transparent;
  --bs-pagination-active-color: #eea321;
  --bs-pagination-active-border-color: var(--bs-pagination-border-color);
}

.page-item.active .page-link {
  background-color: transparent;
  color: #eea321;
  border-color: var(--bs-pagination-border-color);
}

/* ------------------------------------------------------
   Buttons: ensure outline-secondary keeps white text
   on hover/active/focus while preserving existing design
   (site-wide override)
-------------------------------------------------------*/
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff !important; /* keep text white on gray hover */
}