:root {
    --bg-color: #f8f9fa;
    --surface-color: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --primary-blue: #007bff;
    --primary-blue-hover: #0056b3;
    --border-radius: 4px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.1);

    --page-max-lg: 1040px;                 /* 1200~1399px 구간 최대폭 */
    --page-max-xl: 1120px;                 /* 1400px 이상 최대폭 (맥북에어 전체화면에 해당) */
    --gutter-xs: 10px;                      /* 모바일(≤576px)에서 좌우 여백을 약 10px로 */

}

/* 부트스트랩 컨테이너 전역 여백/최대폭 조정 */
/* 부트스트랩 .container 사용 페이지 */
@media (min-width: 1200px){
  .container{ max-width: var(--page-max-lg); }
}
@media (min-width: 1400px){
  .container{ max-width: var(--page-max-xl); }
}

/* 우리가 쓰는 래퍼(.rs-wrap)에도 동일 정책 적용 */
@media (min-width: 1200px){
  .rs-wrap{ max-width: var(--page-max-lg); margin: 0 auto; }
}
@media (min-width: 1400px){
  .rs-wrap{ max-width: var(--page-max-xl); }
}


@media (max-width: 575.98px){
  .container,
  .rs-wrap{
    padding-left: var(--gutter-xs) !important;
    padding-right: var(--gutter-xs) !important;
  }

  /* 드롭다운 패널도 화면 안쪽으로 살짝만 여백 */
  .rs-panel{
    left: var(--gutter-xs);
    right: var(--gutter-xs);
    min-width: auto;
  }

  /* 카드/결과 박스는 기본 라운드 유지 (0으로 만들었던 규칙이 있었다면 제거) */
  /* .result-card, .card { border-radius: 0; }  <-- 이 줄이 있었다면 지워주세요 */
}

/* 선택: 태블릿 작은 구간(576–768px)에서 12px 정도로 살짝 키우기 */
:root{ --gutter-sm: 12px; }
@media (min-width: 576px) and (max-width: 767.98px){
  .container, .rs-wrap{
    padding-left: var(--gutter-sm) !important;
    padding-right: var(--gutter-sm) !important;
  }
}

html, body { overflow-x: hidden; }
body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.navbar-brand {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-brand:hover {
    color: var(--primary-blue);
}

.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
}

.language-flag {
    width: 22px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    display: inline-block;
}

.language-flag--menu {
    width: 20px;
    height: 14px;
}

.language-label {
    flex: 1 1 auto;
}

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

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
}

.btn-outline-primary {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 500;
}

.btn-outline-primary:hover {
    background-color: var(--primary-blue);
    color: #ffffff;
}

.form-label {
    color: var(--text-primary);
    font-weight: 500;
}

.form-control, .form-select {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--border-radius);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
  border: 1px solid var(--border-color);
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--surface-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-control::placeholder {
    color: var(--text-secondary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface-color);
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    color: var(--text-primary);
}

.form-control[type="file"]::file-selector-button {
    background-color: var(--primary-blue);
    color: #ffffff;
    border: none;
    padding: .5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.form-control[type="file"]::file-selector-button:hover {
    background-color: var(--primary-blue-hover);
}

textarea.form-control {
    min-height: 120px;
}

.form-page-container {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.tab-content {
    padding-top: 1.5rem;
}

.search-section {
    background-color: var(--surface-color);
    padding-bottom: 2rem !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
}

.carousel-section {
    background-color: var(--bg-color);
}

.carousel {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.carousel-inner img {
    filter: none;
}

.carousel-caption {
    background: none;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.section-title {
    color: var(--text-primary);
    font-weight: bold;
    border-left: 4px solid var(--primary-blue);
    padding-left: 1rem;
}

.card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    box-shadow: var(--shadow);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
}

.card-subtitle {
    color: var(--text-secondary);
}

.card-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.card-text .lucide {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

.company-logo {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    object-fit: cover;
    background-color: #f8f9fa;
    padding: 5px;
    border: 1px solid var(--border-color);
}

.footer {
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--text-primary);
}

.badge {
    font-weight: 500;
}

.accordion-item {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
}
.accordion-button {
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: var(--primary-blue);
    box-shadow: inset 0 -1px 0 var(--border-color);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: var(--primary-blue);
}
.accordion-body {
    background-color: var(--surface-color);
}

.bookmark-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, fill 0.2s;
}

.bookmark-icon:hover {
    color: var(--primary-blue);
}

.bookmark-icon.active {
    color: var(--primary-blue);
    fill: var(--primary-blue);
}

.stars .lucide {
    width: 1.2rem;
    height: 1.2rem;
}

.stars .lucide.filled {
    color: #ffc107;
    fill: #ffc107;
}

.stars .lucide {
    color: var(--border-color);
}

/* ==== Hover lift 효과 전면 비활성화 ==== */

/* 카드/타일/박스 계열에서 hover 시 transform 제거 */
.card:hover,
[class*="card"]:hover,
.tile:hover,
.box:hover,
.feature-card:hover,
.job-card:hover,
.company-card:hover,
.category-item:hover,
.stat-card:hover,
.cta-card:hover,
.hover-lift:hover,
[data-hover="lift"]:hover {
  transform: none !important;
  top: auto !important;              /* position 기반 틱도 방지 */
/*  box-shadow: inherit !important; */   /* 그림자 강화도 막고 기본값 유지 */
}

/* 기본 상태에서도 transform/transition 자체를 비활성화(애니메이션 미감소용) */
.card,
[class*="card"],
.tile,
.box,
.feature-card,
.job-card,
.company-card,
.category-item,
.stat-card,
.cta-card,
.hover-lift,
[data-hover="lift"] {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Resume Edit 페이지 전용 파란 라벨 */
.resume-edit .form-label,
.resume-edit  {
  color: var(--bs-primary); /* Bootstrap primary(#0d6efd) */
}


/* 생년월일 단위(unit)만 원래 색상으로 되돌리기 */
.resume-edit .dob-row .dob-item .unit {
  color: #212529; /* Bootstrap 기본 body text 색상 */
  font-size: .9rem;
  font-weight: 600;
  margin-right: .25rem;
  line-height: 1;
}


/* ==== Resume Edit: DOB compact & readable ==== */
.resume-edit .dob-row {
  gap: 0 !important;
}

/* 각 항목을 더 타이트하게 정렬 */
.resume-edit .dob-row .dob-item {
  display: inline-flex;
  align-items: center;
  /* 항목들 사이 간격: 오른쪽만 살짝 */
  margin-right: .25rem;
}

/* dob-item 간 간격 조정 */
.resume-edit .dob-row .dob-item:not(:last-child) {
  margin-right: .5rem; /* pr-1과 비슷 (~4px) */
}


/* 셀렉트 박스 - 폭/높이 모두 콤팩트하게 */
.resume-edit .dob-row .dob-item .form-select {
  width: 4.75rem;            /* ↓ 기존 6.25rem → 4.75rem */
  max-width: 4.75rem;
  font-size: .8125rem;       /* .875 → .8125 (살짝 더 작게) */
  line-height: 1.1;          /* 높이 줄이기 */
  padding: .25rem .75rem .25rem .5rem; /* 상하 패딩 축소, 우측 드롭다운 여유 유지 */
  border-radius: .375rem;    /* 살짝만 둥글게(기본보다 약간 작게 보이도록) */
}

/* 모바일(≤576px)에서는 더 콤팩트 */
@media (max-width: 575.98px) {
  .resume-edit .dob-row .dob-item .form-select {
    width: 4.25rem;          /* ↓ 모바일 더 좁게 */
    max-width: 4.25rem;
    font-size: .8rem;
    padding: .25rem .65rem .25rem .45rem;
  }
}

/* 필요 시: 모든 form-select-sm을 전역이 아닌 이 영역에서만 더 작게 */
.resume-edit .form-select-sm {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: .8125rem;
}


/* 성별 그룹 전용 피드백 들여쓰기 (라디오 원 위치만큼) */
.gender-group .gender-feedback {
  margin-left: 1.6rem; /* .form-check-input 폭만큼 들여쓰기 */
  margin-top: .125rem;
}


/* 성별 라디오 정렬 보정 */
.gender-group .form-check {
  padding-left: 0;              /* 기본 좌측 패딩 제거 */
  display: inline-flex;
  align-items: center;
  gap: .375rem;                 /* 라디오와 라벨 간격 */
}
.gender-group .form-check .form-check-input {
  position: static;             /* 음수 마진 제거 효과 */
  margin: 0;                    /* 여백 리셋 */
}
.gender-group .form-check .form-check-label {
  margin: 0;
  line-height: 1.25;
}
/* 그룹 피드백은 전체 폭으로 */
.gender-group .gender-feedback {
  margin-left: 0;
}

.gender-group .form-check + .form-check { margin-left: .5rem; }

.dob-valid { color: var(--bs-success); font-weight: 700; }

/* DOB(연·월·일) 셀렉트의 부트스트랩 'valid' 체크아이콘 숨기기 */
.resume-edit form.was-validated .dob-row .form-select:valid,
.resume-edit .dob-row .form-select.is-valid {
  background-image: none !important; /* 아이콘 제거 */
  padding-right: .75rem;             /* 아이콘 없으니 우측 여백 줄이기 */
}

/* 비활성화된 종료 필드의 래퍼를 살짝 흐리게 */
.field-disabled { opacity: .6; }


/* === Common primitives for lists/filters === */
/* ---------- Dropdown filter ---------- */
.rs-wrap{max-width:960px;margin:0 auto}
.rs-hstack{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rs-vstack{display:flex;flex-direction:column}

/* Buttons (link 밑줄 제거 포함) */
.rs-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  border:1px solid var(--border-color);border-radius:10px;background:#fff;
  cursor:pointer;font-weight:600;color:inherit;text-decoration:none}
.rs-btn.primary{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff}
a.rs-btn,a.rs-btn:hover,a.rs-btn:focus{text-decoration:none}

/* Chips */
.rs-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;
  border-radius:999px;background:#f3f4f6;font-size:12px;color:#374151;
  border:1px solid var(--border-color)}

/* Dropdown panel */
.rs-dd{position:relative}
.rs-panel{position:absolute;z-index:20;top:40px;left:0;min-width:280px;max-width: calc(100vw - 20px);background:#fff;
  border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.08);
  padding:12px;display:none}
.rs-panel.show{display:block}
.rs-soft{background:#F8FAFC;border:1px solid #EEF2F7;border-radius:12px;padding:10px}


/* Result card */
.result-card{background:#fff;border:1px solid var(--border-color);border-radius:14px;
  padding:16px;box-shadow:var(--shadow);margin-bottom:14px}

/* Section line: e.g., 경력/학력/언어 */
.badge-line{display:flex;align-items:center;gap:8px;flex-wrap:no-wrap;margin-top:6px;align-self: flex-start;overflow: hidden;;}
.badge-title{font-size:14px;font-weight:700; color:#2563eb; white-space:nowrap; margin-right:8px;align-self: flex-start;}
.badge-text{font-size:14px;color:#374151}
.badge-line .txt{font-size:14px;color:#374151}


/* Language chips */
.lang-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center;  max-width: 100%;
  flex: 1 1 auto;
  overflow-x: auto;                  /* 칩 많을 땐 내부에서만 가로 스크롤 */
  -webkit-overflow-scrolling: touch; }
.lang-chip{ display:inline-flex; gap:6px; align-items:center;
padding:2px 8px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-size:12px; }
.lang-chip .lvl{ color:#6b7280; font-size:12px; }

/* 버튼 밑줄 제거 (초기화/프로필 보기 모두) */
a.btn-view, a.btn-view:hover, a.btn-view:focus { text-decoration:none !important; }

/* 한 단계 더 강한 이름 타이틀 */
.rs-title-xl{
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 왼쪽에 아주 얇은 포인트(선택 사항) */
.rs-title-accent{
  position: relative;
  padding-left: 10px;
}
.rs-title-accent::before{
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mx-blue);
}


/* Global sticky header */
.mx-header{
  position: fixed !important;  /* ← 이 한 줄만 추가 */
  top:0; left:0; right:0;
  z-index:1100;
  background:#fff;
  border-bottom:1px solid var(--border-color, #e5e7eb);
  backdrop-filter:saturate(180%) blur(6px);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  width:100%;
}


/* iPhone notch 안전영역 대응 (선택) */
@media (max-width: 575.98px){
  .mx-header{ top: env(safe-area-inset-top, 0); }
}

/* 네비/드롭다운이 헤더 위로 잘 뜨도록 (프로젝트 클래스에 맞춰 조정) */
.mx-header .dropdown-menu,
.mx-header .rs-panel{ z-index: 1110; }

body.has-fixed-header{ padding-top: var(--header-h, 64px); }

.verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.mx-icon-bell {
  width: 20px;
  height: 20px;
  display: inline-block;
}