/* --- 사용자 정의 스타일 --- */
:root {
    --primary-color: #7E4F22;
    --secondary-color: #B88000;
    --accent-color: #000000;
    --bs-primary: var(--primary-color) !important;
    --bs-primary-rgb: 126, 79, 34 !important;
    --bs-secondary: var(--secondary-color);
    --bs-secondary-rgb: 184, 128, 0;
    --bs-body-font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --bs-body-bg: #ffffff;

    /* Typography Scale (Desktop 1200px+) */
    --h1-font-size: 2rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --h4-font-size: 1.125rem;
    --h5-font-size: 1rem;
    --h6-font-size: 0.875rem;
    --base-font-size: 1rem;
    --p-font-size: 1rem;
    --small-font-size: 0.875rem;
    --form-label-font-size: 0.95rem;
    --form-control-font-size: 0.95rem;
    --btn-font-size: 1rem;
    --price-font-size: 1.25rem;
    --card-text-font-size: 0.9em;
    --footer-font-size: 0.9em;
    --copyright-font-size: 0.85em;
    /* Icon Link Size Variables (Desktop) */
    --icon-link-bg-size: 5.5rem; --icon-link-icon-size: 2.0rem;
}
/* Tablet Typography (768px - 1199px) */
@media (max-width: 1199.98px) {
    :root {
        --h1-font-size: 1.75rem;
        --h2-font-size: 1.375rem;
        --h3-font-size: 1.15rem;
        --h4-font-size: 1.0625rem;
        --h5-font-size: 0.9375rem;
        --h6-font-size: 0.85rem;
        --base-font-size: 0.9375rem;
        --p-font-size: 0.9375rem;
        --small-font-size: 0.85rem;
        --form-label-font-size: 0.9rem;
        --form-control-font-size: 0.9rem;
        --btn-font-size: 0.9375rem;
        --price-font-size: 1.15rem;
        --icon-link-bg-size: 5.0rem;
        --icon-link-icon-size: 1.8rem;
    }
}
/* Mobile Typography (~767px) */
@media (max-width: 767.98px) {
    :root {
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.1rem;
        --h4-font-size: 1rem;
        --h5-font-size: 0.9rem;
        --h6-font-size: 0.85rem;
        --base-font-size: 0.875rem;
        --p-font-size: 0.875rem;
        --small-font-size: 0.8125rem;
        --form-label-font-size: 0.85rem;
        --form-control-font-size: 0.85rem;
        --btn-font-size: 0.875rem;
        --price-font-size: 1.05rem;
        --icon-link-bg-size: 4.5rem;
        --icon-link-icon-size: 1.6rem;
    }
    .review-card .card-text { font-size: calc(0.9em * 0.9); }
    .product-card .card-title { font-size: calc(var(--h5-font-size) * 0.95); }
}


html {
    scroll-behavior: smooth;
    min-width: 320px;
}

body {
    min-width: 320px;
    background-color: var(--bs-body-bg);
    font-family: var(--bs-body-font-family), serif;
    font-size: var(--base-font-size);
}
body.search-layer-open { overflow: hidden; }

/* Container Max Width Override */
@media (min-width: 1400px) { .container, .container-xxl { max-width: 1440px !important; } }

/* ==================== Container Width Override (UPDATED) ==================== */
/* 기본적으로 모든 container를 full-width로 설정 (Bootstrap 기본값 덮어쓰기) */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100% !important; /* sm, md, lg, xl 에서 max-width 없애기 */
    /* Bootstrap 기본 좌우 패딩은 유지됨 (--bs-gutter-x 기반) */
    padding-right: var(--bs-container-padding-x, var(--bs-gutter-x, 0.75rem));
    padding-left: var(--bs-container-padding-x, var(--bs-gutter-x, 0.75rem));
    margin-right: auto;
    margin-left: auto;
}

/* xxl breakpoint 이상에서만 max-width 1440px 적용 */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
         max-width: 1440px !important; /* xxl 이상에서 최대 너비 설정 */
    }
}
/* 이전 < 1200px 패딩 조정 규칙 제거됨 */


/* ==================== Header Styles ==================== */
.sticky-header { position: sticky; top: 0; z-index: 1020; background-color: var(--bs-body-bg); border-bottom: 1px solid #dee2e6; }

/* 네비게이션 링크 기본 스타일.
   Bootstrap 5.3 의 .navbar-expand-lg .navbar-nav .nav-link (specificity 0,3,0) 가
   padding-x 를 var(--bs-navbar-nav-link-padding-x, 0.5rem) 으로 강제하므로
   변수 override 로 1rem 유지. !important 불필요. */
.navbar-expand-lg {
    --bs-navbar-nav-link-padding-x: 1rem;
}
.navbar-nav .nav-link {
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    color: #212529;
}

.navbar-nav a { 
    text-decoration: none !important; 
    color: #212529; 
    font-size: 1rem !important; 
}

.navbar-nav a:hover, 
.navbar-nav .nav-link:hover, 
.navbar-nav .submenu-list a:hover, 
.navbar-nav .list-unstyled a:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    font-weight: 500;
}

/* 반응형 폰트 크기 설정 */
@media (max-width: 991.98px) {
    .navbar-nav a,
    .navbar-nav .nav-link,
    .submenu-list .sub-link,
    .mega-menu-column .list-unstyled a { 
        font-size: 0.95rem !important; 
    }
}

@media (max-width: 767.98px) {
    .navbar-nav a,
    .navbar-nav .nav-link,
    .submenu-list .sub-link,
    .mega-menu-column .list-unstyled a { 
        font-size: 0.9rem !important; 
    }
}

/* 헤더 아이콘 스타일 */
.header-icons {
    /* 데스크탑 gap — dropdown(52px) 와 a(44px) 자식이 혼재해도 균등하게 보이도록 축소 */
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.header-icons .bi { 
    font-size: 1.25rem; 
    color: var(--accent-color); 
    cursor: pointer; 
    display: inline-block; 
}

.header-icons .dropdown > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    text-decoration: none;
    margin-right: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
}

.header-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    text-decoration: none;
    color: var(--accent-color);
}

.cart-icon-link {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--primary-color, #8B4513);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff;
}

.cart-badge[hidden] {
    display: none;
}

.home-icon-mobile i {
    font-size: 1.25rem;
    color: var(--primary-color);
    vertical-align: middle;
}

.home-icon-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0.25rem;
}

@media (min-width: 768px) { 
    .header-icons .bi, 
    .home-icon-mobile i { 
        font-size: 1.5rem; 
    } 
    
    .home-icon-mobile {
        margin-left: 1rem;
    }
}

@media (max-width: 991.98px) { 
    .header-icons.d-lg-none { 
        gap: 1rem; 
        margin-left: auto; 
        margin-right: 0.5rem; 
    } 
    
    .header-icons.d-lg-none .bi { 
        margin-left: 0; 
    } 
    
    .header-icons.d-lg-none .dropdown > a { 
        margin-left: 0;
        color: var(--accent-color);
        text-decoration: none;
    } 
    
    .home-icon-mobile { 
        margin-right: auto; 
    } 
}

@media (max-width: 767.98px) {
    .header-icons.d-lg-none {
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    /* 모바일 헤더 한 줄 레이아웃 유지 — 너비는 축소(WCAG 2.5.8 AA 24px 이상), 높이 44px 유지 */
    .header-icons.d-lg-none {
        gap: 0;
        margin-right: 0 !important;
    }
    .header-icons .dropdown > a {
        min-width: 44px;
        margin-right: 0;
        padding: 4px 2px;
    }
    .header-icon-link {
        min-width: 44px;
        padding: 4px 2px;
    }
    .home-icon-mobile {
        min-width: 44px;
        margin-left: 0;
    }
    .navbar-toggler {
        min-width: 44px;
    }
    /* nav container 좌우 패딩 축소 — flex 여유 확보 */
    .navbar.container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* 햄버거 메뉴 버튼 스타일 - 테두리 제거 */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    font-size: 1.25rem;
    background-color: transparent;
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 1.5em;
    height: 1.5em;
}

/* 모바일 헤더 아이콘 크기 조정 - 모든 페이지 공통 적용 */
@media (max-width: 767.98px) {
    .sticky-header .header-icons.d-lg-none .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn {
        font-size: 0.9rem;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sticky-header .header-icons.d-lg-none .bi {
        font-size: 1.1rem;
    }

    .sticky-header .header-icons.d-lg-none .btn-icon + .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn + .btn {
        margin-left: 4px;
    }

    /* 모바일 링크 스타일 통일 (드롭다운 아이템 제외) */
    .sticky-header .header-icons.d-lg-none a:not(.dropdown-item) {
        color: var(--accent-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sticky-header .header-icons.d-lg-none a:not(.dropdown-item):hover {
        color: var(--primary-color);
    }

    /* 모바일 토글 버튼 — 터치 타깃 44×44 유지 */
    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.25rem;
        font-size: 1rem;
    }

    .navbar-toggler-icon {
        width: 1.25em;
        height: 1.25em;
    }
}

/* 더 작은 모바일 화면 — 44×44 유지, gap/padding만 축소 */
@media (max-width: 375px) {
    .sticky-header .header-icons.d-lg-none .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn {
        font-size: 0.8rem;
        padding: 0;
    }

    .sticky-header .header-icons.d-lg-none .bi {
        font-size: 1rem;
    }

    .sticky-header .header-icons.d-lg-none .btn-icon + .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn + .btn {
        margin-left: 2px;
    }

    .navbar-toggler {
        padding: 0.15rem;
        font-size: 0.9rem;
    }

    .navbar-toggler-icon {
        width: 1.1em;
        height: 1.1em;
    }
}

/* 320px 이하 초소형 화면 — 44×44 유지, 폰트/간격만 축소 */
@media (max-width: 320px) {
    .sticky-header .header-icons.d-lg-none .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn {
        font-size: 0.75rem;
    }
    
    .sticky-header .header-icons.d-lg-none .bi {
        font-size: 0.9rem;
    }
    
    .sticky-header .header-icons.d-lg-none .btn-icon + .btn-icon,
    .sticky-header .header-icons.d-lg-none .btn + .btn {
        margin-left: 2px;
    }
    
    /* 초소형 화면에서 토글 버튼 최소화 */
    .navbar-toggler {
        padding: 0.1rem 0.3rem;
        font-size: 0.8rem;
    }
    
    .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }
}

/* ==================== Dropdown Menu Mobile Styles ==================== */
/* 반응형 드롭다운 메뉴 스타일 - 언어 선택 메뉴 등 */
@media (max-width: 767.98px) {
    .dropdown-menu {
        min-width: 12rem;
        padding: 0.7rem 0;
        margin: 0.125rem 0 0;
        font-size: 1rem;
    }
    
    .dropdown-menu .dropdown-item {
        padding: 0.8rem 1.5rem;
        font-weight: 400;
        color: #212529;
    }
    
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: #f8f9fa;
    }
    
    /* 언어/통화 선택 드롭다운에 대한 특별 스타일 */
    .header-icons .dropdown .dropdown-menu {
        min-width: 10rem;
        max-width: 85vw;
        margin-top: 0.5rem;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }

    /* 화면 왼쪽 가장자리에 가까울 때 우측 정렬 처리 */
    .header-icons.d-lg-none .dropdown:first-child .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }

    .header-icons .dropdown .dropdown-menu .dropdown-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.5rem 1rem;
    }
    
}

/* 매우 작은 모바일 화면에 대한 추가 스타일 */
@media (max-width: 375px) {
    .dropdown-menu {
        min-width: 10rem;
        font-size: 0.95rem;
    }
    
    .dropdown-menu .dropdown-item {
        padding: 0.75rem 1.2rem;
    }
    
    .header-icons .dropdown .dropdown-menu {
        min-width: 9.5rem;
    }
}

/* 태블릿 환경에서의 헤더 아이콘 스타일 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sticky-header .header-icons.d-lg-none a:not(.dropdown-item) {
        color: var(--accent-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sticky-header .header-icons.d-lg-none a:not(.dropdown-item):hover {
        color: var(--primary-color);
    }
    
    /* 태블릿: 아이콘 사이 간격을 데스크탑과 동일한 수준으로 좁힘 (사용자 피드백) */
    .header-icons.d-lg-none {
        gap: 0.4rem;
    }
    
    .home-icon-mobile {
        margin-left: 0.9rem;
        margin-right: auto;
    }
    
    /* 태블릿 환경 - 드롭다운 정렬을 위한 추가 스타일 */
    .header-icons .dropdown .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .header-icons .dropdown:first-child .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }
}

/* 데스크탑 환경 - 드롭다운 정렬을 위한 추가 스타일 */
@media (min-width: 992px) {
    .header-icons .dropdown .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
}

/* ==================== Navigation ==================== */
.navbar {
    padding: 1rem 0;
    background-color: #fff;
}

.navbar-brand img {
    max-height: 40px;
}

.nav-link {
    color: #000;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.nav-link:hover, 
.nav-link:focus,
.nav-link.active {
    color: var(--primary-color);
}

.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 1.2em;
    height: 1.2em;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1rem 0;
    }
    
    .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid #f5f5f5;
    }
}

/* ============================================================
   Region Selector — Minimal Modern
   흰 배경 · 시스템 sans-serif · 절제된 강조
   클릭 영역 안정 — pseudo-element pointer-events:none, hover 시 layout shift 없음
   ============================================================ */
:root {
    --region-surface: #FFFFFF;
    --region-ink: #111315;
    --region-ink-soft: #5B6066;
    --region-ink-muted: #9AA0A6;
    --region-active-bg: #F5F6F7;
    --region-accent: var(--primary-color);
    --region-shadow: 0 24px 56px -24px rgba(17, 19, 21, 0.18), 0 0 1px rgba(17, 19, 21, 0.08);
}

/* ── Trigger (header) ─────────────────────────────────────── */
.region-trigger .region-current-label {
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.region-trigger .region-current-lang { font-weight: 600; }
.region-trigger .region-current-sep {
    margin: 0 0.25rem;
    color: var(--region-ink-muted);
    font-weight: 300;
}
.region-trigger .region-current-curr {
    color: var(--region-ink-soft);
    font-weight: 400;
}
@media (max-width: 575.98px) {
    /* 모바일은 헤더 폭이 빠듯해 라벨 숨김 — 🌐 아이콘만 노출. 현재 선택값은 modal 안에서 확인 */
    .region-trigger .region-current-label { display: none; }
}

/* ── Modal frame ──────────────────────────────────────────── */
.region-modal .modal-dialog {
    max-width: 380px;
    margin: 1.75rem auto;
}
@media (max-width: 575.98px) {
    .region-modal .modal-dialog {
        max-width: calc(100% - 1.5rem);
        margin: 1rem auto;
    }
}
.region-modal .modal-content,
.region-modal__content {
    background: var(--region-surface);
    border: none;
    border-radius: 14px;
    box-shadow: var(--region-shadow);
    color: var(--region-ink);
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
}
@media (max-width: 575.98px) {
    .region-modal .modal-content,
    .region-modal__content { padding: 1.25rem 1.25rem 1rem; }
}

/* ── Head ─────────────────────────────────────────────────── */
.region-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem 0;
}
.region-modal__title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--region-ink);
    margin: 0;
    line-height: 1.3;
}
.region-modal__close {
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    color: var(--region-ink-soft);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 150ms ease, background-color 150ms ease;
}
.region-modal__close:hover {
    color: var(--region-ink);
    background-color: var(--region-active-bg);
}
.region-modal__close:focus-visible {
    outline: 2px solid var(--region-accent);
    outline-offset: 1px;
}

/* ── Section ──────────────────────────────────────────────── */
.region-modal .region-section { margin-bottom: 1.25rem; }
.region-modal .region-section:last-of-type { margin-bottom: 0; }
.region-modal .region-section__title {
    font-size: 0.72rem;
    color: var(--region-ink-muted);
    letter-spacing: 0.06em;
    margin: 0 0 0.4rem 0;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Option list ──────────────────────────────────────────── */
.region-modal .region-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.region-modal .region-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--region-ink);
    font-size: 0.94rem;
    font-weight: 500;
    border-radius: 8px;
    position: relative;
    transition: background-color 140ms ease, color 140ms ease;
    cursor: pointer;
}
.region-modal .region-option:hover {
    background-color: var(--region-active-bg);
    color: var(--region-ink);
}
.region-modal .region-option:focus-visible {
    outline: 2px solid var(--region-accent);
    outline-offset: -2px;
    background-color: var(--region-active-bg);
}

/* Active — checkmark + bg tint, layout 안정 (padding/size 변화 없음) */
.region-modal .region-option.active {
    background-color: var(--region-active-bg);
    color: var(--region-ink);
    font-weight: 600;
}
.region-modal .region-option.active::after {
    content: "";
    width: 14px; height: 14px;
    margin-left: auto;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3.2 3.2L13 5' stroke='%237E4F22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    flex-shrink: 0;
}

/* Currency code/symbol — 모노스페이스 느낌 정렬 */
.region-modal .region-option__code {
    flex: 1;
    font-variant-numeric: tabular-nums;
}
.region-modal .region-option__sym {
    color: var(--region-ink-muted);
    font-weight: 400;
    min-width: 1.2ch;
    text-align: right;
}
.region-modal .region-option.active .region-option__sym { color: var(--region-accent); }

@media (prefers-reduced-motion: reduce) {
    .region-modal .region-option,
    .region-modal__close { transition: none; }
}

/* ==================== Button Styles ==================== */
.btn { font-size: var(--btn-font-size); }
.btn-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
.btn-primary:hover { background-color: #6a401c !important; border-color: #613a18 !important; color: #fff !important; }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.25rem rgba(126, 79, 34, 0.5) !important; background-color: #6a401c !important; border-color: #613a18 !important; }
.btn-primary:active, .btn-primary.active { background-color: #543114 !important; border-color: #472a11 !important; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; opacity: 0.65 !important; }

/* 장바구니 버튼 스타일 변경 (검정 아웃라인 -> 호버 시 검정 채움) */
.btn-outline-primary {
    color: var(--accent-color); /* 검정 텍스트 */
    border-color: var(--accent-color); /* 검정 테두리 */
    background-color: transparent;
    border-width: 1px; /* 두께 유지 */
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #fff !important; /* 흰색 텍스트 */
    background-color: var(--accent-color) !important; /* 검정 배경 채움 */
    border-color: var(--accent-color) !important; /* 검정 테두리 */
}
/* 포커스/활성 상태는 기본 Bootstrap 또는 필요시 조정 */
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5); }
.btn-outline-primary:active, .btn-outline-primary.active, .show>.btn-outline-primary.dropdown-toggle { color: #fff; background-color: #000; border-color: #000; }

.btn-outline-secondary {
    color: #000 !important;
    border-color: #000 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-check:checked + .btn-outline-secondary {
    color: #FFF !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

.btn-secondary {
    color: #FFF !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    color: #FFF !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

/* 모든 버튼 텍스트 색상이 흰색이 아닌 경우 흰색으로 변경 */
.btn:not([class*="btn-link"]):not([class*="btn-outline"]):not(.text-white):not(.text-light) {
    color: #FFF !important;
}

/* ==================== Separator Line Style ==================== */
.section-divider-line { height: 0; border: none; border-top: 1px solid #dee2e6; margin: 0; opacity: 1; }

/* ==================== Search Layer Styles ==================== */
#search-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1040; display: none; align-items: flex-start; justify-content: center; }
#search-layer.show { display: flex; }
.search-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; }
.search-panel { position: relative; background-color: #fff; padding: 2rem; margin-top: 10vh; margin-top: 10dvh; width: 90%; max-width: 800px; border-radius: 0.3rem; max-height: 80vh; max-height: 80dvh; overflow-y: auto; }
.search-close-btn { position: absolute; top: 1rem; right: 1rem; z-index: 10; }
.search-panel h6 { font-weight: bold; margin-bottom: 0.75rem; font-size: 1rem; }
.search-panel .btn-outline-secondary { border-radius: 1rem; font-size: 0.9em; }
.recent-search-tag { display: inline-flex; align-items: center; }
.recent-search-remove { cursor: pointer; font-size: 1.1em; line-height: 1; opacity: 0.6; }
.recent-search-remove:hover { opacity: 1; }

/* Search Layer responsive */
@media (max-width: 767.98px) {
    .search-panel { padding: 1.25rem; margin-top: 0; max-height: 100vh; max-height: 100dvh; width: 100%; border-radius: 0; }
    .search-panel h3 { font-size: 1.25rem; margin-bottom: 1rem !important; }
    .search-panel .input-group-lg > .form-control { font-size: 1rem; }
    .search-panel h6 { font-size: 0.9rem; }
    .search-panel .btn-outline-secondary { font-size: 0.8em; }
}

/* ==================== Footer Styles (UPDATED Font Size) ==================== */
footer { background-color: #f8f9fa; padding-top: 2rem; padding-bottom: 0; font-size: var(--footer-font-size); color: #777; }
footer a { color: #777; text-decoration: none; }
footer a:hover { color: var(--accent-color); text-decoration: underline; }
/* 모바일 터치 타깃 확보 — 푸터 링크 리스트 아이템 tap area */
@media (max-width: 767.98px) {
    footer ul.list-unstyled li { margin-bottom: 0.25rem; }
    footer ul.list-unstyled li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; }
}
footer h5 { font-size: calc(var(--h5-font-size) / var(--footer-font-size) * 1em ); margin-bottom: 0.8rem; }
footer p { line-height: 1.6; margin-bottom: 0.5rem; font-size: 1em; }
.footer-copyright {
    background-color: transparent !important;
    padding-top: 1.5rem;    /* 간격 증가 */
    padding-bottom: 1.5rem; /* 간격 증가 */
    margin-top: 2rem;
    border-top: 1px solid #dee2e6;
    font-size: var(--copyright-font-size); /* 변수 적용 */
    color: #777;
}

/* Footer styles remain gray */
footer, footer a, footer p, .footer-copyright {
    color: #777;
}
footer .text-muted {
    color: #777 !important;
}

/* Footer copyright links */
.footer-links a {
    color: #777;
    text-decoration: none;
    margin: 0 0.3rem;
    font-size: var(--copyright-font-size);
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* ==================== Anchor Styles ==================== */
/* Global anchor styles */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #6a401c;
    text-decoration: underline;
}

/* ==================== Breadcrumb Styles ==================== */
/* Breadcrumb 링크 스타일 - 전역 우선순위 적용 */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.breadcrumb-item a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #000;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #000;
}

/* Responsive breadcrumb font sizes */
@media (max-width: 991.98px) {
    .breadcrumb {
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .breadcrumb {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
}

/* ==================== Text Styles ==================== */
/* 헤딩 스타일 */
h1 { font-size: var(--h1-font-size); font-weight: 700; }
h2 { font-size: var(--h2-font-size); font-weight: 700; }
h3 { font-size: var(--h3-font-size); font-weight: 700; }
h4 { font-size: var(--h4-font-size); font-weight: 700; }
h5, .h5 { font-size: var(--h5-font-size); font-weight: 700; }
h6 { font-size: var(--h6-font-size); font-weight: 700; }
p { font-size: var(--p-font-size); margin-bottom: 1rem; }
small, .small { font-size: var(--small-font-size); }
label, .form-label { font-size: var(--form-label-font-size); }
.form-control, .form-select { font-size: var(--form-control-font-size); }
section { padding-top: 3rem; padding-bottom: 2rem; }

/* 글자수 카운트 */
.char-count {
    font-size: 0.8rem;
    flex-shrink: 0;
    color: #999 !important;
}

/* Text-muted override to use black instead of gray */
.text-muted:not(.active) {
    color: #000 !important;
}
/* KG이니시스 INIStdPay 결제창 표시 보호.
   z-index 는 sticky-header(1020) / select2(9999) 등 다른 fixed/sticky 레이어에 안 가리게.
   opacity/background 는 INIStdPay.css 의 .fade.in {opacity:1} 룰이 모든 환경에서 안정적으로
   적용된다는 보장이 없어 안전망으로 강제. 결제창은 opacity:1, backdrop 은 부드럽게
   rgba(0,0,0,.5) 로 적당히 어둡게. */
.inipay_modal-backdrop {
    z-index: 2147483640 !important;
}
.inipay_modal-backdrop.fade,
.inipay_modal-backdrop {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}
#inicisModalDiv,
.inipay_modal,
.inipay_modal-body,
.inipay_iframe {
    z-index: 2147483647 !important;
}
#inicisModalDiv.fade,
.inipay_modal.fade {
    opacity: 1 !important;
}