/* ============ 자격증 탭 ============ */
/*
   색은 전부 var(--) 로만 쓴다. 캐릭터 테마(15-themes.css)가 :root 를 갈아끼우면
   이 화면도 같이 따라가야 한다 — 여기에 색을 직접 박으면 그 테마에서만 튄다.
*/

/* ---- 요약 ---- */
.cert-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
}
.cert-summary-cell {
  background: var(--bg-elev);
  padding: 16px 18px;
}
.cert-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.cert-summary-value {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.1;
}

/* ---- 묶음 ---- */
.cert-group { margin-bottom: 26px; }
.cert-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cert-group-title span {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
}

/* ---- 카드 ---- */
.cert-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  margin-bottom: 10px;
  transition: border-color 0.14s;
}
.cert-card:hover { border-color: var(--border-strong); }
.cert-card.earned { border-left: 2px solid var(--success); }
/* 시험일이 지난 카드는 한 발 물러나 보이게 한다. 지우라는 뜻은 아니라 흐리게만. */
.cert-card.past { opacity: 0.62; }

.cert-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cert-names { min-width: 0; }
.cert-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: keep-all;
}
.cert-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cert-dday {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  background: var(--warning-bg);
  border-radius: var(--radius);
  padding: 4px 9px;
  white-space: nowrap;
}
.cert-dday.past {
  color: var(--text-muted);
  background: var(--bg-input);
}

/* ---- 학습 연동 판정 ---- */
.cert-ready {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 10px;
  color: var(--text-secondary);
}
.cert-ready-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.cert-ready.ready { color: var(--success); }
.cert-ready.ready .cert-ready-dot { background: var(--success); }
.cert-ready.soon  { color: var(--warning); }
.cert-ready.soon  .cert-ready-dot { background: var(--warning); }
.cert-ready.later .cert-ready-dot { background: var(--text-muted); }

/* ---- 조작 줄 ---- */
.cert-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.cert-chip {
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cert-chip:hover { background: var(--bg-hover); }
.cert-chip:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.cert-chip.ok   { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.cert-chip.warn { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.cert-chip.info { color: var(--purple);  border-color: var(--purple); }
.cert-chip.muted { color: var(--text-muted); }

.cert-date {
  /* 늘리지 않는다. flex:1 로 두면 날짜 칸이 카드 한 줄을 통째로 먹는다. */
  flex: 0 0 auto;
  width: 152px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
}
.cert-date:focus {
  outline: none;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
/* 크롬 기본 달력 아이콘이 어두운 배경에서 거의 안 보인다 */
.cert-date::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.cert-del {
  flex-shrink: 0;
  margin-left: auto;   /* 삭제는 항상 오른쪽 끝 */
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.cert-del:hover { color: var(--danger); border-color: var(--danger); }
.cert-del:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---- 추가 ---- */
.cert-add {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.cert-add-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 11px;
}
.cert-add-input:focus { outline: none; border-color: var(--border-strong); }
.cert-add-input::placeholder { color: var(--text-muted); }

.cert-add-error {
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 7px;
  min-height: 16px;
}

/* ---- 좁은 화면 ---- */
@media (max-width: 560px) {
  .cert-actions { flex-wrap: wrap; }
  .cert-date { width: 100%; order: 3; }
  .cert-del { order: 2; }
}