/* ── 이력 페이지 전용 스타일 ──────────────────────────────
   기본 톤·색 토큰(--ink, --point 등)은 style.css를 계승.
   여기서는 이력 페이지 레이아웃만 정의하고 새 색은 만들지 않는다. */

.history { padding-bottom: 72px; }

/* ① 페이지 헤더 — 담백하게 (히어로처럼 거창하게 X) */
.history__header {
  padding: 48px 0 8px;
  border-bottom: 1px solid var(--line);
}

.history__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.history__lead {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* 공통 섹션 제목 (실무 자료 톤) */
.section-title {
  margin: 40px 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
}

.section-title__sub {
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* ② 시간 궤적 차트 */
.chart-block { margin-top: 36px; }

.chart-wrap {
  position: relative;
  width: 100%;
  /* 반응형: 가로폭에 따라 높이 확보. 폰에서도 찌그러지지 않게 */
  height: 320px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.chart-note {
  margin: 8px 2px 0;
  font-size: 0.75rem;
  color: #a3a3a3;
}

/* 차트 미로딩 시 폴백 텍스트 (canvas가 가리면 안 보임) */
.chart-fallback {
  position: absolute;
  inset: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ③ 경험 카드 3장 — 전폭 1열로 쌓기 (시딩 → 데이터 → 채용) */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

/* 카드 상단 민트 띠 (포인트 절제 사용) */
.card__label {
  font-size: 1.02rem;
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--point);
}

.card__slot { margin-top: 12px; }
.card__slot:first-of-type { margin-top: 0; }

.card__slot-key {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--point-ink);
  margin-bottom: 4px;
}

.card__slot-val {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ④ 해본 일 / ⑤ 다룰 수 있는 것 — 납작한 리스트 */
.flatlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.flatlist li {
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.55;
}

.flatlist .k { font-weight: 700; }
.flatlist .d { color: var(--ink-soft); }

/* 다룰 수 있는 것: 등급 배지
   숙련도가 높을수록 민트(--point)에 가깝게, 낮을수록 옅고 회색 쪽으로 단계 구분.
   능숙(진한 민트 채움) → 활용(연한 민트) → 기초(회색).
   '적극 활용'은 순수 등급이 아니라 태도라, 능숙과 활용 사이의 외곽선 민트로 따로 둠. */
.grade {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  margin: 0 4px;
  border: 1px solid transparent;
}

/* 능숙 — 가장 진한 민트(채움) */
.grade--high {
  color: #ffffff;
  background: var(--point);
}

/* 적극 활용 — 태도 표현. 능숙·활용 사이의 외곽선 민트로 별도 톤 */
.grade--active {
  color: var(--point-ink);
  background: var(--point-soft);
  border-color: var(--point);
}

/* 활용 — 연한 민트 채움 */
.grade--mid {
  color: var(--point-ink);
  background: var(--point-soft);
}

/* 기초 — 옅은 회색 */
.grade--low {
  color: #8a9196;
  background: #eef0f1;
}

/* ⑥ 언어 — 툴과 시각적으로 분리 */
.lang {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
}

.lang .k { font-weight: 700; }

/* ⑦ 랜딩으로 돌아가기 */
.back {
  margin-top: 48px;
  text-align: center;
}

.back a {
  color: var(--point-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
}

.back a:hover { text-decoration: underline; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .chart-wrap { height: 300px; }
}