/* =========================================
   SkillLens — 공통 컴포넌트
   카드, 칩, 통계, 테이블, 탭, AI 검색창
   ========================================= */

/* ── KPI 카드 ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.kpi-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.kpi-card:hover {
  border-color: var(--o);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  cursor: pointer;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--og);
  opacity: 0;
  transition: opacity var(--dur);
}
.kpi-card:hover::before { opacity: 1; }

.kpi-label { font-size: 12px; color: var(--g5); margin-bottom: 6px; font-weight: 500; }
.kpi-value { font-size: 32px; font-weight: 800; color: var(--bk); line-height: 1; letter-spacing: -1px; }
.kpi-unit  { font-size: 14px; font-weight: 400; color: var(--g5); }
.kpi-sub   { font-size: 12px; color: var(--g4); margin-top: 6px; }

/* ── AI 검색창 ── */
.ai-search-bar {
  background: var(--bg);
  border: 1.5px solid var(--g2);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.ai-search-bar:focus-within {
  border-color: var(--o);
  box-shadow: 0 0 0 3px rgba(244,119,33,0.1);
}

.ai-search-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--o);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-search-input-wrap { display: flex; gap: 10px; align-items: center; }
.ai-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--bk);
  background: transparent;
  font-family: var(--font);
}
.ai-search-input::placeholder { color: var(--g4); }

.ai-search-btn {
  padding: 8px 18px;
  background: var(--o);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--dur);
  flex-shrink: 0;
}
.ai-search-btn:hover { background: var(--o2); }

.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-chip  {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--g1);
  color: var(--g5);
  border: 1px solid var(--bd);
  cursor: pointer;
  transition: all var(--dur);
}
.ai-chip:hover { background: var(--orange-bg); color: var(--o); border-color: var(--o); }

/* AI 답변 카드 */
.ai-answer {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff9f5, #fff);
  border: 1px solid rgba(244,119,33,0.2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--g7);
  line-height: 1.7;
  display: none;
}
.ai-answer.visible { display: block; }
.ai-answer-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--o);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* ── 섹션 레이아웃 ── */
.section { margin-bottom: 40px; }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-title { font-size: 18px; font-weight: 800; color: var(--bk); }
.section-more  { font-size: 13px; color: var(--o); font-weight: 600; }
.section-more:hover { text-decoration: underline; }

/* ── 직무 카드 ── */
.job-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.job-card:hover {
  border-color: var(--o);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.job-title { font-size: 15px; font-weight: 700; color: var(--bk); margin-bottom: 4px; }
.job-code  { font-size: 11px; color: var(--g4); font-family: var(--mono); }
.job-zone  { font-size: 12px; color: var(--g5); margin-top: 8px; }
.job-salary { font-size: 14px; font-weight: 700; color: var(--green); margin-top: 6px; }
.job-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }

/* ── 스킬 바 ── */
.skill-bar {
  display: grid;
  grid-template-columns: 140px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.skill-name { font-size: 13px; color: var(--g7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-track {
  height: 8px;
  background: var(--g1);
  border-radius: 4px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--og);
  width: 0;
  transition: width 1.2s var(--ease);
}
.skill-fill.soft { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.skill-fill.hard { background: linear-gradient(90deg, #15803d, #22c55e); }
.skill-score { font-size: 12px; color: var(--g5); text-align: right; font-family: var(--mono); }

/* ── 탭 ── */
.tabs { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--bd); }
.tab-btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g5);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur);
}
.tab-btn:hover { color: var(--bk); }
.tab-btn.active { color: var(--o); border-bottom-color: var(--o); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ══════════════════════════════════════════════════════════════
   공용 컴포넌트 (docs/design-system.md) — 버튼/뱃지는 새로 만들지 말고 아래 재사용.
   ══════════════════════════════════════════════════════════════ */

/* ── 버튼 6종 ── */
.btn-primary{background:var(--o);color:#fff;padding:13px 26px;border-radius:var(--r-control);font-size:var(--fs-subtitle);font-weight:800;border:none;cursor:pointer;transition:all var(--dur,.2s)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:#fff;border:1.5px solid var(--bd2);color:var(--g5);padding:13px 26px;border-radius:var(--r-control);font-size:var(--fs-subtitle);font-weight:800;cursor:pointer;transition:all var(--dur,.2s)}
.btn-secondary:hover{border-color:var(--o);color:var(--o)}
/* 툴 토글 — 커스텀 편집/커스텀 직무 등 작은 액션. 보라색 새로 만들지 말 것! */
.btn-tool{font-size:var(--fs-body);font-weight:700;color:var(--g5);border:1.5px solid var(--bd2);border-radius:var(--r-badge);padding:5px 12px;background:var(--bd2);cursor:pointer;transition:all var(--dur,.2s)}
.btn-tool:hover{border-color:var(--o);color:var(--o)}
.btn-tool.on{background:var(--o);border-color:var(--o);color:#fff}
/* 추가(점선) */
.btn-add{width:100%;padding:11px;border:1.5px dashed var(--bd);border-radius:var(--r-control);background:#fff;font-size:var(--fs-body);font-weight:700;color:var(--g5);cursor:pointer;transition:all var(--dur,.2s)}
.btn-add:hover{border-color:var(--o);color:var(--o)}
/* 필터 알약칩 */
.btn-chip{font-size:var(--fs-caption);font-weight:700;padding:4px 12px;border-radius:var(--r-pill);border:1.5px solid var(--bd);background:#fff;color:var(--g5);cursor:pointer;transition:all var(--dur,.2s)}
.btn-chip.on{background:var(--o);border-color:var(--o);color:#fff}
/* 보조 CTA(도움받기 류) */
.btn-cta{padding:9px 15px;border:1.5px solid var(--o);border-radius:var(--r-control);background:var(--orange-bg);font-size:var(--fs-body);font-weight:800;color:var(--o);cursor:pointer;transition:all var(--dur,.2s)}
.btn-cta:hover{background:var(--o);color:#fff}

/* ── 뱃지 (축을 섞지 않는다: 색=유형, 커스텀=옆에 붙는 태그) ── */
.badge-type{font-size:var(--fs-caption);font-weight:800;padding:2px 8px;border-radius:var(--r-badge)}
.badge-type.hard{background:var(--orange-bg);color:var(--o)}      /* 하드=주황 */
.badge-type.soft{background:var(--blue-bg);color:var(--blue)}     /* 소프트=파랑 */
.tag-custom{font-size:var(--fs-caption);font-weight:800;padding:2px 6px;border-radius:var(--r-badge);background:var(--purple);color:#fff}  /* 커스텀=보라 태그 */
.badge-req{font-size:var(--fs-caption);font-weight:800;padding:3px 9px;border-radius:var(--r-badge);color:#fff}
.badge-req.essential{background:var(--green)}   /* 필수=초록 */
.badge-req.optional{background:var(--g4)}        /* 선택=회색 */
.badge-count{font-size:var(--fs-caption);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);background:var(--g1);color:var(--g5)}