/* ═══════════════════════════════════════════════════
   진연(주) 브랜드 컬러 & 모바일 반응형
   로고 기준: J(teal #38B4C4) + Y(navy #1B3D5E)
   ═══════════════════════════════════════════════════ */

:root {
  --jy-navy:       #1B3D5E;   /* 로고 Y — 네비, 헤더 */
  --jy-navy-dark:  #132E47;   /* 더 어두운 네이비 */
  --jy-teal:       #38B4C4;   /* 로고 J — 강조색 */
  --jy-teal-hover: #2CA3B3;   /* 강조색 hover */
  --jy-teal-light: #E5F6F8;   /* 연한 배경 */
  --jy-text-muted: #94a3b8;
}

/* ── 로고 브랜드 ───────────────────────────────────── */
.nav-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.nav-brand img {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.nav-brand span {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
}

/* ── 네비게이션 브랜드 색상 ────────────────────────── */
nav {
  background: var(--jy-navy) !important;
}
nav a:hover  { color: var(--jy-teal) !important; }
nav a.active { color: var(--jy-teal) !important; }

/* index.html 헤더 + 탭 */
.header   { background: var(--jy-navy) !important; }
.tab-nav  { background: var(--jy-navy-dark) !important; }
.tab-btn.active { border-bottom-color: var(--jy-teal) !important; }
.tab-btn:hover  { background: rgba(56,180,196,.12) !important; }

/* ── 버튼 브랜드 색상 ──────────────────────────────── */
.btn-primary          { background: var(--jy-navy) !important; }
.btn-primary:hover    { background: var(--jy-teal) !important; color: #fff !important; }
.btn.btn-primary      { background: var(--jy-navy) !important; }
.btn.btn-primary:hover{ background: var(--jy-teal) !important; }

/* index.html 전용 버튼 */
.btn { }
.btn:not(.btn-sm):not(.btn-cancel):not(.btn-complete):not(.btn-supplement):not(.btn-green) {
  background: var(--jy-navy);
  color: #fff;
}

/* 검색/조회 버튼 입력 포커스 */
input:focus, select:focus, textarea:focus {
  border-color: var(--jy-teal) !important;
  outline: none;
}

/* login.html 버튼 */
.card > button { background: var(--jy-navy) !important; }
.card > button:hover { background: var(--jy-teal) !important; }

/* ── 품질 드롭다운 ─────────────────────────────────── */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 20px;
}
.nav-dropdown-toggle {
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.nav-dropdown-toggle:hover { color: #fff; }
.nav-dropdown-toggle.active { color: var(--jy-teal) !important; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--jy-navy);
  border-radius: 8px;
  min-width: 110px;
  padding: 4px 0;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 16px;
  color: #94a3b8;
  font-size: 13px;
  text-decoration: none;
  margin: 0 !important;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: #fff !important; background: rgba(56,180,196,.15) !important; }
.nav-dropdown-menu a.active { color: var(--jy-teal) !important; }

/* ── 햄버거 메뉴 버튼 (기본: 숨김) ────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  line-height: 1;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }

/* ── 모바일 (≤768px) ────────────────────────────── */
@media (max-width: 768px) {

  /* 네비게이션 */
  nav {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    position: relative;
  }
  nav h1 { flex: 1; font-size: 15px !important; }

  .nav-toggle {
    display: inline-flex !important;
    order: 2;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 10px;
    order: 3;
  }
  nav.open .nav-links {
    display: flex;
  }
  .nav-links a {
    margin: 0 !important;
    padding: 11px 4px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-links a:last-child { border-bottom: none; }

  /* 드롭다운 모바일 — 인라인 펼침 */
  .nav-dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    width: 100%;
  }
  .nav-dropdown-toggle {
    padding: 11px 4px;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-dropdown-menu {
    display: block;
    position: static;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    min-width: auto;
  }
  .nav-dropdown-menu a {
    padding: 10px 4px 10px 18px !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #7a9ab0 !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
  }
  .nav-dropdown-menu a:last-child { border-bottom: none; }

  /* 컨테이너 */
  .container { padding: 12px !important; }

  /* 테이블 → 가로 스크롤 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  td, th { white-space: nowrap; }

  /* 카드 그리드: 2열 */
  .cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .card { padding: 14px !important; }
  .card .value { font-size: 22px !important; }

  /* 2열 그리드 → 1열 */
  .main-grid { grid-template-columns: 1fr !important; }

  /* 모달 전체 너비 */
  .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 20px 16px !important;
  }
  .modal-overlay { padding: 0 !important; }

  /* toolbar 세로 배치 */
  .toolbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .toolbar-right { flex-wrap: wrap !important; }

  /* 버튼 터치 영역 */
  .btn { min-height: 42px !important; padding: 8px 14px !important; }

  /* 날짜 필터 줄바꿈 */
  .date-filter { flex-wrap: wrap !important; gap: 6px !important; }
  .date-filter input[type=date] { font-size: 12px !important; }

  /* index 탭 스크롤 */
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-nowrap: nowrap;
    padding: 0 8px !important;
  }
  .tab-btn { white-space: nowrap; padding: 10px 14px !important; font-size: 13px !important; }

  /* 요약 카드 (연차) */
  .leave-summary-cards {
    grid-template-columns: 1fr !important;
  }

  /* 채팅 패널 */
  .chat-messages { height: 220px !important; }

  /* 검색 박스 */
  .search-box { flex-wrap: wrap !important; }
  .search-box input { font-size: 14px !important; }

  /* login 카드 */
  body.login-page .card,
  .card[style*="360px"] {
    width: 94vw !important;
    max-width: 360px !important;
    padding: 28px 18px !important;
  }
}

/* ── 초소형 (≤480px) ────────────────────────────── */
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
  .quick-btns { flex-wrap: wrap !important; }
}