/* ============================================================
   미래일터 탐험대 · /skills/ 역량 나무 전용 스타일
   접두사: sk-   (tokens.css → base.css → comp.css → anim.css 뒤에 로드)
   원칙: 라이브러리 0 · 320px 대응 · prefers-reduced-motion 존중 · 인쇄 안전
   ============================================================ */

/* ── 역량 나무 인포그래픽 ─────────────────────────────── */
.sk-tree{
  background:linear-gradient(180deg,#F3F7FF 0%,#FFFFFF 58%,#F6F3EC 100%);
  border:1.5px solid var(--border);
  border-radius:var(--radius-kid-lg);
  padding:var(--sp-4);
}
.sk-tree__svg{ display:block; width:100%; height:auto; max-width:720px; margin:0 auto; }
.sk-tree__svg a{ cursor:pointer; }
.sk-tree__svg a:focus-visible{ outline:3px solid var(--brand-link); outline-offset:3px; border-radius:8px; }
.sk-tree__svg a text{ text-decoration:none; }
.sk-tree__svg a:hover circle{ stroke-width:4; }
.sk-tree__key{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center;
  margin:var(--sp-4) 0 0; padding:0; list-style:none;
}
.sk-tree__key li{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:750; color:var(--text);
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-pill); padding:5px 13px;
}
.sk-tree__key i{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.sk-tree__note{ margin:var(--sp-3) 0 0; text-align:center; font-size:13px; color:var(--text-muted); }

/* ── 공통 스킬 TOP 순위 ───────────────────────────────── */
.sk-top{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.sk-top__row{
  display:grid; grid-template-columns:38px 1fr; gap:4px var(--sp-3); align-items:center;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-kid); padding:var(--sp-3) var(--sp-4);
}
@media(min-width:760px){
  .sk-top__row{ grid-template-columns:38px minmax(180px,1.1fr) 120px 1.4fr; }
}
.sk-top__rank{
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:var(--planet-tint); color:var(--planet-ink); font-weight:850; font-size:15px;
}
.sk-top__row:nth-child(-n+3) .sk-top__rank{ background:var(--planet); color:#fff; }
/* 11위부터 이어지는 목록에서는 상위 3위 강조를 끈다. */
.sk-top--rest .sk-top__row:nth-child(-n+3) .sk-top__rank{ background:var(--planet-tint); color:var(--planet-ink); }
.sk-top__name{ font-size:15.5px; font-weight:800; color:var(--text-strong); word-break:keep-all; }
.sk-top__n{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); }
.sk-top__bar{ grid-column:1/-1; }
@media(min-width:760px){ .sk-top__bar{ grid-column:auto; } }
.sk-top__doms{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; grid-column:1/-1; }
@media(min-width:760px){ .sk-top__doms{ grid-column:auto; } }
.sk-top__doms a{
  display:inline-flex; align-items:center; gap:3px; text-decoration:none;
  font-size:12.5px; font-weight:700; color:var(--text);
  background:var(--surface-2); border-radius:var(--radius-pill); padding:3px 9px;
}
.sk-top__doms a:hover{ background:var(--planet-tint); color:var(--planet-ink); }

/* ── 14개 역량 카드 ───────────────────────────────────── */
.sk-cards{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; margin-top:var(--sp-5); }
@media(min-width:640px){ .sk-cards{ grid-template-columns:1fr 1fr; } }
@media(min-width:1080px){ .sk-cards{ grid-template-columns:repeat(3,1fr); } }
.sk-card{
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid-lg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:10px;
  border-top:5px solid var(--planet);
}
.sk-card__no{ font-size:12px; font-weight:800; color:var(--text-muted); letter-spacing:.08em; }
.sk-card__name{ font-size:18px; font-weight:850; color:var(--text-strong); margin:0; line-height:1.35; word-break:keep-all; }
.sk-card__en{ display:block; font-size:12.5px; font-weight:650; color:var(--text-muted); margin-top:2px; }
.sk-card__desc{ margin:0; font-size:15px; line-height:1.65; color:var(--text); }
.sk-card__count{ display:flex; flex-wrap:wrap; gap:6px; }
.sk-how{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sk-how li{ background:var(--surface); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; line-height:1.6; }
.sk-how b{ display:block; font-size:12px; font-weight:800; margin-bottom:3px; }
.sk-how li[data-lv="elem"]{ box-shadow:inset 4px 0 0 var(--g-elem); }
.sk-how li[data-lv="elem"] b{ color:var(--g-elem); }
.sk-how li[data-lv="middle"]{ box-shadow:inset 4px 0 0 var(--g-middle); }
.sk-how li[data-lv="middle"] b{ color:var(--g-middle); }
.sk-how li[data-lv="high"]{ box-shadow:inset 4px 0 0 var(--g-high); }
.sk-how li[data-lv="high"] b{ color:var(--g-high); }
.sk-how__src{ display:block; margin-top:4px; font-size:12px; color:var(--text-muted); }
.sk-card__planets{ margin-top:auto; padding-top:6px; }
.sk-card__planets p{ margin:0 0 5px; font-size:12px; font-weight:800; color:var(--text-muted); }
.sk-card__planets ul{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; }
.sk-card__planets a{
  display:inline-flex; gap:3px; text-decoration:none; font-size:12.5px; font-weight:750;
  color:var(--text); background:var(--surface-2); border-radius:var(--radius-pill); padding:3px 9px;
}
.sk-card__planets a:hover{ background:var(--planet-tint); color:var(--planet-ink); }

/* ── 하드스킬 매트릭스 ────────────────────────────────── */
.sk-matrix{ font-size:13.5px; }
.sk-matrix th[scope="col"]{ text-align:center; font-size:12px; line-height:1.3; vertical-align:bottom; padding:8px 4px; }
.sk-matrix th[scope="col"] .sk-mx__e{ display:block; font-size:19px; }
.sk-matrix th[scope="row"]{ text-align:left; font-weight:800; min-width:168px; word-break:keep-all; }
/* 셀 안에 중첩 요소를 두지 않으려고 점 표시는 ::before 로 그린다(노드 수 절감). */
.sk-matrix td{ text-align:center; padding:7px 4px !important; }
.sk-matrix td::before{ content:""; display:inline-block; border-radius:50%; vertical-align:middle; }
.sk-matrix td.is-on::before{
  width:15px; height:15px;
  background:var(--pc,var(--planet)); box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,var(--planet)) 18%,transparent);
}
.sk-matrix td.is-empty::before{ width:5px; height:5px; background:var(--border); }
.sk-matrix tbody th small{ display:block; font-weight:700; color:var(--text-muted); font-size:11.5px; }
.sk-dl{ margin:0; }
.sk-dl dt{ font-weight:800; color:var(--text-strong); margin-top:var(--sp-3); font-size:15px; }
.sk-dl dd{ margin:3px 0 0; font-size:14px; color:var(--text); line-height:1.6; }
.sk-dl dd .badge{ margin-right:5px; }

/* ── 3년 성장 로드맵 ──────────────────────────────────── */
.sk-road{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; margin-top:var(--sp-5); counter-reset:band; }
@media(min-width:700px){ .sk-road{ grid-template-columns:1fr 1fr; } }
@media(min-width:1100px){ .sk-road{ grid-template-columns:repeat(4,1fr); } }
.sk-band{
  position:relative; background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-kid-lg); padding:var(--sp-5); display:flex; flex-direction:column; gap:10px;
}
.sk-band::before{
  content:""; position:absolute; left:var(--sp-5); right:var(--sp-5); top:0; height:5px;
  background:linear-gradient(90deg,var(--bc),var(--bc2)); border-radius:0 0 6px 6px;
}
.sk-band__when{ font-size:12.5px; font-weight:850; color:var(--bc); letter-spacing:.04em; }
.sk-band__title{ margin:0; font-size:17.5px; font-weight:850; color:var(--text-strong); }
.sk-band__lead{ margin:0; font-size:14px; color:var(--text-muted); line-height:1.6; }
.sk-band ol{ margin:0; padding-left:1.15em; display:grid; gap:9px; }
.sk-band li{ font-size:14.5px; line-height:1.6; }
.sk-band li b{ display:block; color:var(--text-strong); }
.sk-band li span{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.sk-wef{
  display:inline-block; margin-top:3px; font-size:11.5px; font-weight:800;
  background:var(--info-tint); color:var(--info); border-radius:var(--radius-pill); padding:2px 8px;
}

/* ── 정규화 규칙 · 출처 ───────────────────────────────── */
.sk-rules{ margin:0; padding-left:1.15em; font-size:14px; line-height:1.7; }
.sk-rules code{ font-size:12.5px; }
.sk-srcbox{ margin-top:var(--sp-5); }
.sk-srcbox a{ word-break:break-all; }

/* ── 인쇄 ─────────────────────────────────────────────── */
@media print{
  .sk-tree{ background:none; }
  .sk-cards{ grid-template-columns:1fr 1fr; }
  .sk-card,.sk-band,.sk-top__row{ break-inside:avoid; }
}
@media (prefers-reduced-motion:reduce){
  .sk-tree__svg a:hover circle{ stroke-width:3; }
}