/* ==========================================================================
   지원콕 Refined Theme  v1.0
   - 기존 템플릿의 마크업·레이아웃은 그대로 두고, 이 파일을 각 페이지 <head>의
     "맨 마지막"(페이지 <style> 뒤)에 넣어 색·타이포·여백·디테일만 덮어쓴다.
   - recolor.py 가 페이지 안의 색을 정리하고, 이 파일이 공통 컴포넌트를 다듬는다.
   ========================================================================== */

:root {
  /* Brand — 기존 #0056b3 을 이어받은 블루 */
  --jk-blue-50:  #f2f6fc;
  --jk-blue-100: #e3ecf8;
  --jk-blue-200: #c6d8f1;
  --jk-blue-500: #2b6fd0;
  --jk-blue-600: #0b57b3;   /* primary */
  --jk-blue-700: #08488f;
  --jk-navy-800: #0f2a4f;
  --jk-navy-900: #0b1b33;
  /* Accent — 기존 포인트 옐로를 차분한 앰버로 */
  --jk-amber:    #f6c04a;
  --jk-amber-50: #fdf6e3;
  /* Neutrals — 살짝 푸른 슬레이트 */
  --jk-ink:      #141c2b;
  --jk-ink-2:    #3a4456;
  --jk-ink-3:    #667085;
  --jk-ink-4:    #98a2b3;
  --jk-line:     #e4e8ef;
  --jk-line-2:   #eef1f5;
  --jk-bg:       #f6f8fb;
  --jk-surface:  #ffffff;
  /* Status */
  --jk-red:   #d14343;
  --jk-green: #2f9461;
  --jk-orange:#e07a2f;
  /* Shape & depth */
  --jk-r-sm: 8px;
  --jk-r-md: 12px;
  --jk-r-lg: 16px;
  --jk-shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --jk-shadow-2: 0 4px 12px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --jk-shadow-3: 0 12px 32px rgba(16,24,40,.10);
  --jk-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* Bootstrap 5.3 변수 덮어쓰기 */
  --bs-primary: #0b57b3;
  --bs-primary-rgb: 11,87,179;
  --bs-link-color: #0b57b3;
  --bs-link-color-rgb: 11,87,179;
  --bs-link-hover-color: #08488f;
  --bs-link-hover-color-rgb: 8,72,143;
  --bs-body-color: #141c2b;
  --bs-body-color-rgb: 20,28,43;
  --bs-secondary-color: #667085;
  --bs-body-bg: #f6f8fb;
  --bs-border-color: #e4e8ef;
  --bs-body-font-family: var(--jk-font);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-sm: 8px;
  --bs-danger: #d14343;
  --bs-danger-rgb: 209,67,67;
  --bs-success: #2f9461;
  --bs-success-rgb: 47,148,97;
  --bs-warning: #f6c04a;
  --bs-warning-rgb: 246,192,74;
  --bs-info: #3b8fae;
  --bs-info-rgb: 59,143,174;
  --bs-light: #f6f8fb;
  --bs-light-rgb: 246,248,251;
  --bs-focus-ring-color: rgba(11,87,179,.22);
}

/* ---------- 타이포그래피 ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--jk-font) !important;
  color: var(--jk-ink);
  background-color: var(--jk-bg) !important;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}
/* 페이지마다 지정된 말랑말랑 폰트를 Pretendard 로 통일 (아이콘 폰트는 제외) */
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]) {
  font-family: var(--jk-font) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
p { line-height: 1.65; }
b, strong, .fw-bold { font-weight: 650 !important; }
small, .small { letter-spacing: -0.005em; }
.text-muted { color: var(--jk-ink-3) !important; }
.text-primary { color: var(--jk-blue-600) !important; }
.text-danger { color: var(--jk-red) !important; }
.text-success { color: var(--jk-green) !important; }
.text-warning { color: #c98a10 !important; }
a { text-underline-offset: 3px; }
::selection { background: var(--jk-blue-100); color: var(--jk-navy-900); }

/* ---------- 버튼 ---------- */
.btn {
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn.rounded-pill { border-radius: 999px !important; }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--bs-focus-ring-color) !important; }
.btn-primary {
  --bs-btn-bg: var(--jk-blue-600);
  --bs-btn-border-color: var(--jk-blue-600);
  --bs-btn-hover-bg: var(--jk-blue-700);
  --bs-btn-hover-border-color: var(--jk-blue-700);
  --bs-btn-active-bg: var(--jk-navy-800);
  --bs-btn-active-border-color: var(--jk-navy-800);
  --bs-btn-disabled-bg: #9db6d8;
  --bs-btn-disabled-border-color: #9db6d8;
  box-shadow: 0 1px 2px rgba(11,87,179,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-outline-primary {
  --bs-btn-color: var(--jk-blue-600);
  --bs-btn-border-color: var(--jk-blue-200);
  --bs-btn-hover-bg: var(--jk-blue-50);
  --bs-btn-hover-color: var(--jk-blue-700);
  --bs-btn-hover-border-color: var(--jk-blue-500);
  --bs-btn-active-bg: var(--jk-blue-100);
  --bs-btn-active-color: var(--jk-blue-700);
  --bs-btn-active-border-color: var(--jk-blue-500);
}
.btn-outline-secondary {
  --bs-btn-color: var(--jk-ink-2);
  --bs-btn-border-color: var(--jk-line);
  --bs-btn-hover-bg: #f1f4f8;
  --bs-btn-hover-color: var(--jk-ink);
  --bs-btn-hover-border-color: #d3d9e2;
  background: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--jk-red);
  --bs-btn-border-color: #f0c9c9;
  --bs-btn-hover-bg: #fdf1f1;
  --bs-btn-hover-color: #b23434;
  --bs-btn-hover-border-color: var(--jk-red);
}
.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--jk-line);
  --bs-btn-color: var(--jk-ink-2);
  --bs-btn-hover-bg: #f1f4f8;
  --bs-btn-hover-border-color: #d3d9e2;
}
.btn-success { --bs-btn-bg: var(--jk-green); --bs-btn-border-color: var(--jk-green); --bs-btn-hover-bg: #267a50; --bs-btn-hover-border-color: #267a50; }
.btn-danger  { --bs-btn-bg: var(--jk-red);   --bs-btn-border-color: var(--jk-red);   --bs-btn-hover-bg: #b23434; --bs-btn-hover-border-color: #b23434; }
.btn-warning { --bs-btn-bg: var(--jk-amber); --bs-btn-border-color: var(--jk-amber); --bs-btn-color: #3b2a05; --bs-btn-hover-bg: #eab234; --bs-btn-hover-border-color: #eab234; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.05rem; border-radius: 12px; }

/* ---------- 폼 ---------- */
.form-control, .form-select {
  border-color: var(--jk-line);
  border-radius: 10px;
  color: var(--jk-ink);
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--jk-ink-4); }
.form-control:focus, .form-select:focus {
  border-color: var(--jk-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(11,87,179,.12) !important;
}
.form-label { font-weight: 600; color: var(--jk-ink-2); font-size: .92rem; margin-bottom: .4rem; }
.form-check-input:checked { background-color: var(--jk-blue-600); border-color: var(--jk-blue-600); }

/* ---------- 카드 · 표 · 알림 ---------- */
.card {
  border: 1px solid var(--jk-line) !important;
  border-radius: var(--jk-r-lg) !important;
  box-shadow: var(--jk-shadow-1);
  background: var(--jk-surface);
}
.card-header { background: #fbfcfd; border-bottom-color: var(--jk-line-2); }
.table { --bs-table-border-color: var(--jk-line-2); color: var(--jk-ink-2); }
.table > thead th, .table th {
  color: var(--jk-ink-3);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: 0;
  background: #f8fafc;
}
.alert { border-radius: 12px; border-width: 1px; }
.badge { font-weight: 600; letter-spacing: 0; }
.dropdown-menu, .dropdown-menu-custom {
  border: 1px solid var(--jk-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--jk-shadow-3) !important;
  padding: 6px !important;
}
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; }
.dropdown-item:hover { background: var(--jk-blue-50); color: var(--jk-blue-700); }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 64px rgba(16,24,40,.18); }
hr { border-color: var(--jk-line); opacity: 1; }

/* ---------- 페이지네이션 ---------- */
.pagination { gap: 6px; --bs-pagination-border-width: 0; }
.page-link {
  border: 1px solid var(--jk-line) !important;
  border-radius: 10px !important;
  color: var(--jk-ink-2) !important;
  background: #fff !important;
  min-width: 38px;
  text-align: center;
  font-weight: 600;
  box-shadow: none !important;
}
.page-link:hover { background: var(--jk-blue-50) !important; color: var(--jk-blue-700) !important; border-color: var(--jk-blue-200) !important; }
.page-item.active .page-link {
  background: var(--jk-blue-600) !important;
  border-color: var(--jk-blue-600) !important;
  color: #fff !important;
}
.page-item.disabled .page-link { color: var(--jk-ink-4) !important; background: #f8fafc !important; }

/* ---------- 데스크톱 공통 헤더 ---------- */
.header-section {
  background: var(--jk-navy-900) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(11,27,51,.18) !important;
  border-bottom: 0 !important;
}
.center-menu-btn, .user-menu-btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e9eef6 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  letter-spacing: -0.01em;
}
.center-menu-btn:hover, .user-menu-btn:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
  transform: none !important;
}
.beta-badge, .coming-soon-badge, .nav-coming-soon-badge {
  background: var(--jk-amber) !important;
  color: #3b2a05 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* ---------- 데스크톱 공통 푸터 ---------- */
.footer {
  background: var(--jk-navy-900) !important;
  color: #aab4c5 !important;
  border-top: 0 !important;
}
.footer a, .footer-nav-link { color: #d5dce7 !important; }
.footer a:hover, .footer-nav-link:hover { color: #fff !important; }
.footer-info, .footer-info *, .disclaimer, .company-subtitle { color: #8e9ab0 !important; }
.footer-info strong, .footer-info b { color: #c3cbd8 !important; }
.footer-bottom { border-top-color: rgba(255,255,255,.08) !important; }
.copyright { color: #c3cbd8 !important; }

/* ---------- 모바일 공통 ---------- */
.mobile-header {
  background: var(--jk-navy-900) !important;
  box-shadow: 0 4px 16px rgba(11,27,51,.16) !important;
  border-bottom: 0 !important;
}
.mobile-page-header, .page-header {
  background: linear-gradient(160deg, #0f3a73 0%, #0b2a52 100%) !important;
  box-shadow: none !important;
}
.mobile-footer { background: var(--jk-navy-900) !important; color: #aab4c5 !important; }
.mobile-footer a { color: #d5dce7 !important; }
.mobile-footer-info, .mobile-footer-disclaimer, .mobile-footer-copy, .mobile-footer-subtitle { color: #8e9ab0 !important; }
.bottom-nav {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--jk-line) !important;
  box-shadow: 0 -4px 16px rgba(16,24,40,.05) !important;
}
.bottom-nav .nav-link { color: var(--jk-ink-3) !important; }
.bottom-nav .nav-link.active, .bottom-nav .active { color: var(--jk-blue-600) !important; }
.mobile-card, .mobile-list-item {
  border: 1px solid var(--jk-line) !important;
  box-shadow: var(--jk-shadow-1) !important;
}
.mobile-btn-primary {
  background: var(--jk-blue-600) !important;
  border-color: var(--jk-blue-600) !important;
  box-shadow: 0 1px 2px rgba(11,87,179,.25) !important;
}
.mobile-btn-secondary {
  background: #fff !important;
  color: var(--jk-ink-2) !important;
  border: 1px solid var(--jk-line) !important;
}

/* ---------- 필터 칩 / 탭 ---------- */
.region-btn, .filter-tab, .filter-buttons .btn {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
}

/* ---------- 광고 슬롯 (위치·비율은 유지, 테두리만 정리) ---------- */
.banner-ad img, .ad-banner-secondary img {
  border-radius: 12px;
}

/* ---------- 포커스 접근성 ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--jk-blue-500);
  outline-offset: 2px;
}

/* ==========================================================================
   반복 패턴: 검색 히어로 / 페이지 헤더 배너 / 공고 리스트
   ========================================================================== */
:root { --primary-color: #0b57b3; --accent-color: #f6c04a; --text-color: #141c2b; }

/* 검색 히어로(데스크톱 65개 화면 공통) — 원색 그라디언트 → 딥 네이비 */
.search-section,
.page-header, .section-header, .profile-header, .announcement-header,
.welcome-header, .nr-header {
  background: radial-gradient(120% 140% at 0% 0%, #164a8c 0%, #0e3466 45%, #0b2447 100%) !important;
  box-shadow: 0 10px 30px rgba(11,36,71,.18), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.search-section h1, .search-section h2 { letter-spacing: -0.035em !important; font-weight: 750 !important; }
.search-input {
  border: 1px solid rgba(255,255,255,.0) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(3,12,28,.18) !important;
}
.search-btn {
  border-radius: 12px !important;
  background: var(--jk-amber) !important;
  color: #2b1f04 !important;
  box-shadow: 0 8px 24px rgba(3,12,28,.18) !important;
}
.filter-tab, .region-btn {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #dfe7f3 !important;
  border-radius: 999px !important;
  transform: none !important;
}
.filter-tab:hover, .region-btn:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
  transform: none !important;
}
.filter-tab.active, .region-btn.active {
  background: var(--jk-amber) !important;
  border-color: var(--jk-amber) !important;
  color: #2b1f04 !important;
  box-shadow: 0 4px 14px rgba(246,192,74,.28) !important;
  transform: none !important;
}
.filter-divider { background: rgba(255,255,255,.12) !important; }

/* 모바일 상단 헤더 / 페이지 헤더 */
.mobile-header {
  background: var(--jk-navy-900) !important;
}
.mobile-page-header {
  background: radial-gradient(130% 160% at 0% 0%, #164a8c 0%, #0e3466 50%, #0b2447 100%) !important;
}

/* 공고 리스트 카드 */
.list-view-item {
  border: 1px solid var(--jk-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--jk-shadow-1) !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease !important;
}
.list-view-item.even-row { background: #eef5ff !important; }  /* 짝수 행 옅은 파란색 */
.list-view-item:hover {
  border-color: var(--jk-blue-200) !important;
  box-shadow: var(--jk-shadow-2) !important;
  transform: translateY(-1px) !important;
}
.list-view-item.featured {
  background: linear-gradient(180deg, #f6f9fe 0%, #fff 100%) !important;
  border-color: var(--jk-blue-200) !important;
}
.list-view-item.urgent { border-left: 3px solid var(--jk-red) !important; }
.announcement-title { color: var(--jk-ink) !important; letter-spacing: -0.025em; }
.announcement-title:hover { color: var(--jk-blue-600) !important; }
.announcement-meta { color: var(--jk-ink-3) !important; }
.announcement-meta i, .list-view-item .meta i { color: var(--jk-ink-4) !important; }
.date-separator { border-bottom: 1px solid var(--jk-line) !important; }
.date-separator-text { color: var(--jk-ink) !important; letter-spacing: -0.03em; }
.date-count-text { color: var(--jk-blue-600) !important; }
.mobile-list-item::before { background: var(--jk-blue-600) !important; }

/* 클래스 없이 쓰인 기본 입력창(로그인·아이디찾기 등)도 같은 스타일로 */
form input[type="text"]:not(.form-control):not(.search-input),
form input[type="email"]:not(.form-control),
form input[type="password"]:not(.form-control),
form input[type="tel"]:not(.form-control),
form input[type="number"]:not(.form-control),
form select:not(.form-select):not(.form-control),
form textarea:not(.form-control) {
  border: 1px solid var(--jk-line) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  background: #fff !important;
  color: var(--jk-ink) !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
form input:not(.form-control):focus, form select:focus, form textarea:focus {
  border-color: var(--jk-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(11,87,179,.12) !important;
}

/* 광고 소개 계열 히어로 — 다색 그라디언트를 네이비로 */
.hero-section, .lp-hero {
  background: radial-gradient(120% 140% at 0% 0%, #164a8c 0%, #0e3466 45%, #0b2447 100%) !important;
}
.hero-section::before, .lp-hero::before { opacity: .35 !important; }

/* 푸터 '광고하기' · '공고의뢰' 버튼 — 글자색을 푸터 바탕색(딥 네이비)으로 */
.footer .footer-nav a.btn-light,
.footer .footer-nav a.btn-light:hover,
.mobile-footer a.mobile-footer-adbtn,
.mobile-footer a.mobile-footer-adbtn:hover { color: var(--jk-navy-900) !important; }

/* 부트스트랩 info 알림(청록) → 브랜드 블루 톤 */
.alert-info { background: var(--jk-blue-50) !important; border-color: var(--jk-blue-200) !important; color: var(--jk-blue-700) !important; }
.alert-info .alert-heading, .alert-info h4, .alert-info h5 { color: var(--jk-blue-700) !important; }