@charset "UTF-8";

/* ============================================================
   noble withus 브랜드 색감 — 골드 / 베이지 / 강조색 다크 카키
   noblewithusmember.com 팔레트에 맞춤.
   기존 CSS 뒤에 로드되어 색상만 덮어쓴다.
   되돌리려면 각 페이지의 이 파일 <link> 한 줄만 지우면 원상복구된다.
   ============================================================ */

:root,
[data-bs-theme=light] {
    /* --- 팔레트 --- */
    --nw-bg: #f3ebdd;
    /* 페이지 바탕 베이지 */
    --nw-surface: #fbf6ed;
    /* 가장 밝은 면 (카드/슬라이드 본문) */
    --nw-surface-2: #f2e9d8;
    /* 섹션 구분용 면 */
    --nw-surface-3: #e9dcc6;
    /* 푸터 */

    --nw-ink: #0d2b1d;
    /* 다크 카키 — 강조색 */
    --nw-ink-2: #40594b;
    --nw-muted: #5a7065;
    --nw-ink-3: #7e8f81;

    --nw-line: #ddceb0;
    --nw-line-strong: #c6b18a;

    --nw-gold: #a9782f;
    /* 면·선용 골드 */
    --nw-gold-deep: #8f6421;
    /* 밝은 배경 위 글자용 (대비 확보) */
    --nw-gold-light: #c89d51;
    /* 어두운 배경 위 글자용 */
    --nw-gold-soft: #f5e9d2;

    /* --- 부트스트랩 변수 연결 --- */
    --bs-primary: var(--nw-gold);
    --bs-primary-rgb: 169, 120, 47;
    --bs-secondary: var(--nw-ink-2);
    --bs-secondary-rgb: 90, 112, 101;
    --bs-secondary-dark: var(--nw-ink);

    --bs-body-color: var(--nw-ink);
    --bs-body-color-rgb: 13, 43, 29;
    --bs-body-bg: var(--nw-bg);
    --bs-emphasis-color: var(--nw-ink);
    --bs-emphasis-color-rgb: 13, 43, 29;
    --bs-secondary-color: var(--nw-muted);
    --bs-tertiary-bg: var(--nw-surface-2);
    --bs-border-color: var(--nw-line);

    --bs-link-color: var(--nw-ink);
    --bs-link-color-rgb: 13, 43, 29;
    --bs-link-hover-color: var(--nw-gold-deep);

    --bs-dark: var(--nw-ink);
    --bs-dark-rgb: 13, 43, 29;

    /* nariya 테마 변수 */
    --na-nav-bg: var(--nw-surface);
    --na-sub-bg: var(--nw-surface);
    --na-sub-link-color: var(--nw-ink);
    --na-sub-hover-color: var(--nw-ink);
    --na-sub-hover-bg: var(--nw-gold-soft);
    --na-sub-active-color: var(--nw-gold-deep);
    --na-sub-active-bg: var(--nw-gold-soft);
    --na-primary-hover: var(--nw-gold-deep);
    --na-line-color: var(--nw-line-strong);
}

body {
    background-color: var(--nw-bg);
    color: var(--nw-ink);
}

/* 밝은 배경 위의 골드 글자는 한 단계 깊게 (대비 4.8:1) */
.text-primary {
    color: var(--nw-gold-deep) !important;
}

/* 어두운 배경(메인 히어로) 위에서는 밝은 골드로 */
.section1 .contents .text-primary,
.section6 .text-primary {
    color: var(--nw-gold-light) !important;
}


/* ---------- 헤더 ---------- */
#header-navbar.active {
    background-color: rgba(251, 246, 237, 0.88);
    backdrop-filter: blur(6px);
}

#header-navbar.active i.bi {
    color: var(--nw-ink) !important;
}

#header-navbar.active .nav-link {
    color: var(--nw-ink);
}


/* ---------- 메인 섹션 ---------- */
.section1 .section1-container {
    background-color: var(--nw-ink);
}

/* 사진 톤을 베이지·골드 쪽으로 살짝 데운다 */
.section1 .reveal img,
.section2 .swiper-slide .slide-img img,
.section7-img img {
    filter: grayscale(0.35) sepia(0.28) brightness(0.94);
}

/* 히어로 사진의 밝은 부분에서도 흰 글자·골드 라벨이 읽히도록 따뜻한 스크림 */
.section1 .reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(78% 58% at 50% 52%, rgba(26, 21, 12, .62), rgba(26, 21, 12, .22) 76%, transparent),
        linear-gradient(180deg, rgba(26, 21, 12, .30), rgba(26, 21, 12, .06) 45%, rgba(26, 21, 12, .30));
}

/* 서브페이지 배너 오버레이도 차가운 검정 대신 따뜻한 톤으로 */
.main-banner:before {
    background-color: rgba(26, 21, 12, 0.32);
}

.section2 .swiper-slide .contents {
    background-color: var(--nw-surface);
}

.section3,
.section5 {
    background-color: var(--nw-surface-2);
}

.section4 .withus-marquee {
    color: var(--nw-ink);
}


/* ---------- 슬라이드 탭 ---------- */
.swiper-pagination.custom-progress {
    border-color: var(--nw-line-strong);
}

.swiper-pagination-bullet {
    color: var(--nw-ink-3);
    border-right-color: var(--nw-line-strong);
}

.swiper-pagination-bullet-active {
    background: var(--nw-ink);
    color: #fff !important;
}

.swiper-pagination-bullet .progress {
    background: var(--nw-gold-light);
}


/* ---------- 전문성 비교표 (index 인라인 style 덮어쓰기) ---------- */
.table_professional .table-professional-comparison {
    border-color: var(--nw-line) !important;
}

.table_professional .table-professional-comparison thead th,
.table_professional .table-professional-comparison tbody th {
    background: var(--nw-ink) !important;
    border-color: var(--nw-line) !important;
}

.table_professional .table-professional-comparison tbody td {
    background: var(--nw-surface) !important;
    color: var(--nw-ink) !important;
    border-color: var(--nw-line) !important;
}


/* ---------- 선·버튼 ---------- */
.button.arrow-black::before,
.button.arrow-black::after {
    background: var(--nw-ink);
}

.division::before {
    background-color: var(--nw-ink);
}

.gray {
    color: var(--nw-line-strong);
}

/* 강조 버튼은 다크 카키, hover 시 골드 */
.btn-primary {
    --bs-btn-bg: var(--nw-ink);
    --bs-btn-border-color: var(--nw-ink);
    --bs-btn-hover-bg: var(--nw-gold);
    --bs-btn-hover-border-color: var(--nw-gold);
    --bs-btn-active-bg: var(--nw-gold-deep);
    --bs-btn-active-border-color: var(--nw-gold-deep);
    --bs-btn-disabled-bg: var(--nw-ink-3);
    --bs-btn-disabled-border-color: var(--nw-ink-3);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--nw-gold) !important;
    border-color: var(--nw-gold) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--nw-gold-deep);
    --bs-btn-border-color: var(--nw-gold);
    --bs-btn-hover-bg: var(--nw-gold);
    --bs-btn-hover-border-color: var(--nw-gold);
}


/* ---------- 푸터 ---------- */
.site-footer-wrap {
    background-color: var(--nw-surface-3);
    color: var(--nw-ink-2);
}

.site-footer-wrap a {
    color: var(--nw-ink);
}

.site-footer-wrap a:hover {
    color: var(--nw-gold-deep);
}


/* ---------- 서브 페이지 / 게시판 ---------- */
.company .overlay:after {
    background: rgba(251, 246, 237, 0.45);
}

.offcanvas {
    background-color: var(--nw-surface);
    color: var(--nw-ink);
}

/* 전체메뉴 안의 구글 번역 위젯이 흰 글자라 크림 배경에서 안 보였다 */
#google_translate_element_offcanvas *,
.offcanvas #google_translate_element * {
    color: var(--nw-ink) !important;
}

.active div#google_translate_element * {
    color: var(--nw-ink) !important;
}

.na-title,
.board-title {
    background-color: var(--nw-surface-2);
}

/* 게시판·폼의 회색 테두리를 베이지 라인으로 */
.table > :not(caption) > * > *,
.form-control,
.form-select,
.input-group-text,
.list-group-item,
.card {
    border-color: var(--nw-line);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nw-line-strong);
    box-shadow: 0 0 0 0.2rem rgba(169, 120, 47, 0.18);
}

/* 그누보드 기본 스킨에 남아 있던 파란색 계열을 브랜드 색으로 */
.btn_submit,
a.btn02,
button.btn02 {
    background: var(--nw-ink) !important;
    border-color: var(--nw-ink) !important;
    color: #fff !important;
}

.btn_submit:hover,
a.btn02:hover,
button.btn02:hover {
    background: var(--nw-gold) !important;
    border-color: var(--nw-gold) !important;
}

.pg_current {
    background: var(--nw-ink) !important;
    border-color: var(--nw-ink) !important;
}

.new_win .win_total,
.new_win .win_ul li a {
    color: var(--nw-gold-deep);
}