/* ../css/theme.css */

/* ====================================================== */
/* 플로팅 바 & 하단 패널 스타일 */
/* ====================================================== */
#floating-action-bar {
    background-color: rgba(255, 255, 255, 0.9);
}

#theme-toggle-btn .fas {
    color: #4a5568; /* 라이트모드 아이콘 색상 (회색 계열) */
    transition: transform 0.3s ease-in-out, color 0.3s;
}

/* 라이트 모드일 때 테마 버튼 호버 */
#theme-toggle-btn:hover .fa-moon {
    color: #ef4444; /* red-500 */
}
/* 언어 버튼 호버 (모든 모드) */
#lang-button:hover .fa-globe {
    color: #ef4444; /* red-500 */
}

/* 하단 언어 패널 */
#language-bottom-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1100;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
#language-bottom-panel.show {
    transform: translateY(0);
}
#language-bottom-panel a {
    font-size: 1.125rem;
    color: #374151;
    text-decoration: none;
    transition: color 0.2s;
}
#language-bottom-panel a:hover {
    color: #ef4444;
}
#close-lang-panel {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
}

/* 선택된 언어 강조 */
#language-bottom-panel a.lang-active {
    color: #ef4444; /* red-500 */
    font-weight: 700; /* bold */
    text-decoration: underline;
}

/* ====================================================== */
/* 다크 모드 스타일 (통합 및 수정) */
/* ====================================================== */

/* --- 기본 배경 및 텍스트 --- */
body.dark-mode {
  background-color: #0f172a; /* slate-900 */
  color: rgb(226 232 240); /* slate-200 */
}

/* --- 플로팅 바 & 하단 패널 --- */
body.dark-mode #floating-action-bar { 
    background-color: rgb(45, 55, 72); 
}
body.dark-mode #lang-button:hover .fa-globe { 
    color: #ef4444; 
}
body.dark-mode .fa-globe { 
    color: #9ca3af; 
}
body.dark-mode #theme-toggle-btn .fas { 
    color: #f6e05e; 
}
body.dark-mode #theme-toggle-btn:hover { 
    background-color: rgba(74, 85, 104, 0.7); 
}
body.dark-mode #language-bottom-panel { 
    background-color: #1f2937; 
}
body.dark-mode #language-bottom-panel a { 
    color: #d1d5db; 
}
body.dark-mode #language-bottom-panel a:hover { 
    color: #ef4444; 
}
body.dark-mode #language-bottom-panel a.lang-active {
    color: #ef4444;
}
body.dark-mode #close-lang-panel { 
    color: #9ca3af; 
}

/* --- 대시보드: 타이틀 섹션 --- */
body.dark-mode .intro h1 {
  color: #ffffff;
}
body.dark-mode .intro #hoverText {
  color: rgb(203 213 225); /* slate-300 */
}

/* --- 대시보드: 스켈레톤 UI --- */
body.dark-mode #skeleton {
  background-color: rgb(51 65 85); /* slate-700 */
}
body.dark-mode #skeleton .animate-pulse div {
  background-color: rgb(71 85 105); /* slate-600 */
}

/* --- 대시보드: 프로필 사진 섹션 --- */
body.dark-mode #profileImage {
  border-color: rgb(71 85 105); /* slate-600 */
}
body.dark-mode #profile-picture-section p {
  color: rgb(203 213 225); /* slate-300 */
}

/* --- 대시보드: 카드 및 버튼 섹션 --- */
body.dark-mode #user-profile-section,
body.dark-mode section.rounded-2xl {
  background-color: rgb(30 41 59); /* slate-800 */
  border-color: rgb(51 65 85); /* slate-700 */
}
body.dark-mode .group {
  background-image: none;
  background-color: rgb(30 41 59); /* slate-800 */
  border-color: rgb(51 65 85); /* slate-700 */
}
body.dark-mode .group:hover {
    background-color: rgb(51 65 85); /* slate-700 */
}
body.dark-mode .group p,
body.dark-mode section h2 {
  color: rgb(203 213 225); /* slate-300 */
}
body.dark-mode .bg-indigo-100 { background-color: rgba(79, 70, 229, 0.4); }
body.dark-mode .bg-sky-100 { background-color: rgba(14, 165, 233, 0.4); }
body.dark-mode .bg-blue-100 { background-color: rgba(59, 130, 246, 0.4); }
body.dark-mode .bg-teal-100 { background-color: rgba(20, 184, 166, 0.4); }
body.dark-mode .bg-white { background-color: rgb(51 65 85); }
body.dark-mode .bg-amber-100 { background-color: rgba(245, 158, 11, 0.4); }
body.dark-mode .bg-green-100 { background-color: rgba(34, 197, 94, 0.4); }
body.dark-mode .bg-gray-200 { background-color: rgb(51 65 85); }
body.dark-mode .bg-rose-100 { background-color: rgba(244, 63, 94, 0.4); }


/* ====================================================== */
/* 기타 효과 및 컴포넌트 */
/* ====================================================== */

#particles-js{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}

/* ===== Glass Cards ================================== */
:root{
  --glass-blur: 18px;
  --glass-saturate: 160%;
  --glass-alpha: .70;
  --glass-alpha-hover: .32;
  --glass-bg-light: 255,255,255;
  --glass-bg-dark: 17,25,40;
}
.glass-card{
  position: relative;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: rgba(var(--glass-bg-light), var(--glass-alpha));
  border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: background .25s, box-shadow .25s, transform .25s, border-color .25s, opacity .25s;
  isolation: isolate;
  will-change: transform, backdrop-filter;
}
.glass-card:hover{
  background: rgba(var(--glass-bg-light), var(--glass-alpha-hover));
  box-shadow: 0 16px 42px rgba(0,0,0,0.18);
}
.glass-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events:none;
}
body.dark-mode .glass-card {
  background-color: rgba(var(--glass-bg-dark), calc(var(--glass-alpha) + .10));
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
  color: #e2e8f0;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .glass-card{
    background: rgba(255,255,255,0.65);
    filter: saturate(120%);
  }
}



/* ===== Glass footer =============================================== */
.glass-footer {
    position: relative;
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    backdrop-filter: blur(6px) saturate(130%);
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04);
    isolation: isolate;
    color: #475569;
}
.glass-footer::before {
    content: none;
}
body.dark-mode .glass-footer {
    background: rgba(17, 25, 40, 0.14);
    border-top-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
    color: #cbd5e1;
}
body.dark-mode .glass-footer a {
    color: #cbd5e1;
    transition: color 0.2s;
}
body.dark-mode .glass-footer a:hover {
    color: #ffffff;
}

/* ===== Blue Glass Header =============================================== */
:root{
  --gh-blur:12px;
  --gh-sat:160%;
  --gh-alpha:.08;
  --gh-tint1:56,189,248;
  --gh-tint2:59,130,246;
  --gh-base-light:255,255,255;
  --gh-base-dark:17,25,40;
}
.glass-header{
  position:sticky; top:0; z-index:50; isolation:isolate;
  -webkit-backdrop-filter: blur(var(--gh-blur)) saturate(var(--gh-sat));
  backdrop-filter: blur(var(--gh-blur)) saturate(var(--gh-sat));
  background:
    linear-gradient(90deg, rgba(var(--gh-tint1),.16), rgba(var(--gh-tint2),.16)),
    rgba(var(--gh-base-light), var(--gh-alpha));
  border-bottom:1px solid rgba(59,130,246,.28);
  box-shadow:0 8px 20px rgba(2,6,23,.12);
}
.glass-header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--gh-tint1),.9), rgba(var(--gh-tint2),.9));
  opacity:.85;
}
body.dark-mode .glass-header{
    background:
      linear-gradient(90deg, rgba(var(--gh-tint1),.16), rgba(var(--gh-tint2),.16)),
      rgba(var(--gh-base-dark), .28);
    border-bottom-color: rgba(56,189,248,.22);
    box-shadow:0 10px 26px rgba(0,0,0,.35);
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .glass-header{ background: rgba(255,255,255,.75); }
}
.glass-header .nav a{
  color:#0f172a;
}
body.dark-mode .glass-header .nav a{ color:#e2e8f0; }

/* Dark mode text contrast fix */
body.dark-mode .text-gray-600 { color: rgb(203 213 225) !important; } /* slate-300 */
body.dark-mode .text-gray-700 { color: rgb(226 232 240) !important; } /* slate-200 */
body.dark-mode .text-gray-500 { color: rgb(148 163 184) !important; } /* slate-400 */
body.dark-mode label, 
body.dark-mode p { color: inherit; }

/* Dark-mode quick patch for common Tailwind utilities on this page */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800 { color:#e5e7eb; }       /* slate-200 */
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 { color:#cbd5e1; }       /* slate-300 */

body.dark-mode .bg-gray-50 { background-color:#1f2937; }  /* gray-800-ish */
body.dark-mode .border-gray-300 { border-color:#475569; }  /* slate-600 */

/* 약관/개인정보 박스 */
body.dark-mode #termsContent,
body.dark-mode #privacyContent {
  background-color:#111827;  /* gray-900 */
  border-color:#374151;      /* gray-700 */
  color:#e5e7eb;
}

/* 커스텀 체크박스 다크 스킨 */
body.dark-mode .form-checkbox {
  background-color:#334155;  /* slate-700 */
  border-color:#475569;      /* slate-600 */
}
body.dark-mode .form-checkbox:checked {
  background-color:#3b82f6;  /* blue-500 */
  border-color:#3b82f6;
}


/* --- 텍스트 색상 --- */
body.dark-mode .text-slate-800 { color: #f1f5f9; } /* slate-100 */
body.dark-mode .text-slate-600 { color: #94a3b8; } /* slate-400 */
body.dark-mode .text-slate-500 { color: #64748b; } /* slate-500 */
body.dark-mode .text-slate-400 { color: #475569; } /* slate-600 */

/* --- 배경 및 경계선 색상 (동적으로 생성될 뉴스 카드 대응) --- */
body.dark-mode .bg-white { background-color: #1e293b; } /* slate-800 */
body.dark-mode .border-slate-200 { border-color: #334155; } /* slate-700 */
body.dark-mode .hover\:bg-slate-50:hover { background-color: #334155; } /* slate-700 */

/* --- Dark mode visibility fixes for chips --- */
body.dark-mode .text-slate-700 { color: #cbd5e1 !important; } /* slate-300 수준 */
body.dark-mode .job-chip {
  background-color: #334155;   /* slate-700 */
  color: #e2e8f0;              /* slate-200 */
  border: 1px solid #475569;   /* slate-600 */
}

/* --- 새로운 코드 (파일 하단에 추가 또는 기존 .job-chip 관련 코드에 병합) --- */
/* 칩 기본 스타일 (카드/리스트 공통) */
.job-chip {
  font-size: 11px !important;      /* 11px 폰트 크기 (우선순위 확보) */
  line-height: 1rem !important;    /* 16px 줄 간격 */
  padding: 2px 8px !important;     /* 상하 2px, 좌우 8px (py-0.5, px-2 와 동일) */
}

/* 다크 모드 칩 스타일 (기존 코드를 아래 내용으로 보강) */
body.dark-mode .job-chip {
  background-color: #334155;   /* slate-700 */
  color: #e2e8f0;              /* slate-200 */
  border: 1px solid #475569;   /* slate-600 */
}

/* 타이틀 다크모드 대응 */
.job-title {
  color: #0f172a; /* slate-900 (light) */
}
body.dark-mode .job-title {
  color: #f1f5f9; /* slate-100 (dark) */
}
body.dark-mode .job-title a:hover {
  color: #93c5fd; /* light-blue-300 hover */
}

/* 기본 타이틀 색상 (라이트 모드) */
.job-title a {
  color: #111827; /* slate-900 */
}
.job-title a:hover {
  color: #2563eb; /* indigo-600 */
}

/* 다크 모드 전용 타이틀 */
body.dark-mode .job-title a {
  color: #f1f5f9; /* slate-100 */
}
body.dark-mode .job-title a:hover {
  color: #60a5fa; /* blue-400 */
}