/* 스탯스토리 — 스킬 화면(js/skills.js): 머리(제목·MP 규칙), 장착한 스킬 네 칸, 고른 스킬 설명, 모든 스킬 목록.
   넓은 화면(761px 이상): 장비 화면처럼 왼쪽에 칸·설명(목록을 내려도 따라 내려온다), 오른쪽에 머리와 목록.
   좁은 화면: 머리 → 칸 → 설명 → 목록이 한 줄로. */

/* 바탕: 하늘색 위에 옅은 별빛 */
.skl-screen .scroll {
  background-color: #c4e2ff;
  background-image:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, .6) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 62%, rgba(124, 92, 255, .14) 0 3px, transparent 4px);
  background-size: 68px 68px, 100px 100px;
}
.skl-wrap { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "side head" "side list"; grid-template-rows: auto 1fr; gap: 16px 18px; align-items: start; padding-block: 16px 36px; }
.skl-head { grid-area: head; }
.skl-side { grid-area: side; display: grid; gap: 14px; min-width: 0; position: sticky; top: 14px; } /* 화면보다 길면 js 가 top 을 음수로 바꿔 아래쪽이 보이게 한다 */
.skl-all { grid-area: list; }

/* ---------- 머리: 제목 · 한 줄 설명 · MP 규칙 ---------- */
.skl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 12px 20px; padding: 14px 16px 16px; }
.skl-title { display: grid; gap: 6px; min-width: 0; }
.skl-title h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 6vw, 40px); line-height: 1.1; color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); letter-spacing: -.5px; }
.skl-title p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.skl-rules { display: grid; gap: 5px; min-width: 0; padding: 10px 14px 12px; background: linear-gradient(180deg, #f1f7ff, #e2eeff); border: 2.5px solid #4f95ff; border-radius: 14px; box-shadow: 0 3px 0 #2f6fd6; }
.skl-rules h2 { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-weight: 400; font-size: 17px; line-height: 1.2; color: #1d4c9e; }
.skl-rules h2 svg { width: 22px; height: 22px; flex: none; }
.skl-rules ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.skl-rules li { position: relative; padding-left: 15px; font-size: 14.5px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.skl-rules li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: #4f95ff; box-shadow: 0 0 0 1.5px var(--ink); }
.skl-rules b { font-family: var(--f-num); font-weight: 400; color: #1d4c9e; }

/* ---------- 마당 제목(장착한 스킬, 모든 스킬) ---------- */
.skl-hd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.skl-hd h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.15; }
.skl-cnt { font-family: var(--f-ui); font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.skl-cnt b { font-family: var(--f-num); font-weight: 400; font-size: 19px; color: var(--ink); }

/* 스킬 그림 · 갈래(공격 따뜻한 색, 지키기 파랑, 돕기 초록) · MP */
.skl-ico { display: block; flex: none; }
.skl-ico > svg, .skl-ico > img { display: block; width: 100%; height: 100%; max-width: none; }
.skl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.skl-kind { display: inline-flex; align-items: center; padding: 2px 8px 3px; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.15; white-space: nowrap; border: 2px solid; border-radius: 999px; }
.skl-kind.k-atk { color: #a63c0a; background: #ffeedd; border-color: #ff8a2a; }
.skl-kind.k-def { color: #1d4c9e; background: #e6f0ff; border-color: #4f95ff; }
.skl-kind.k-sup { color: #0f6a3a; background: #e2f7e9; border-color: #1fa95e; }
.skl-mp { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-num); font-size: 13.5px; line-height: 1; color: #1d4c9e; white-space: nowrap; }
.skl-mp svg { width: 15px; height: 15px; flex: none; }
.skl-mp b { font-weight: 400; }

/* ---------- 장착한 스킬: 네 칸. 고른 스킬이 든 칸은 보랏빛, 먼저 고른 칸(끼울 자리)은 금빛 ---------- */
.skl-equip { display: grid; gap: 10px; padding: 14px; min-width: 0; }
.skl-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 4px; }
.skl-slot {
  position: relative; min-width: 0; min-height: 120px; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 16px 3px 9px; cursor: pointer;
  font-family: var(--f-ui); color: var(--ink); text-align: center; line-height: 1.15;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .08s;
}
.skl-slot .skl-ico { width: 48px; height: 48px; }
.skl-slot .skl-nm { max-width: 100%; font-size: 12.5px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.skl-slot .skl-mp { font-size: 13px; }
.skl-no, .skl-key { position: absolute; top: 4px; z-index: 1; display: grid; place-items: center; height: 19px; font-family: var(--f-num); line-height: 1; }
.skl-no { left: 4px; width: 19px; font-size: 12px; color: #fff; background: var(--ink); border-radius: 50%; }
.skl-key { right: 4px; min-width: 19px; padding: 0 4px; font-size: 11.5px; color: var(--ink-2); background: var(--paper-2); border: 1.5px solid var(--ink-soft); border-bottom-width: 3px; border-radius: 5px; } /* 키보드 단축키(마우스 기기만) */
.skl-slot.empty { align-content: center; background: repeating-linear-gradient(45deg, #faf3e3 0 6px, #f2e8d2 6px 12px); border-style: dashed; box-shadow: none; color: var(--ink-soft); }
.skl-slot.empty .skl-no { background: var(--ink-soft); }
.skl-empty { font-size: 14px; }
.skl-slot.cur { border-color: var(--violet); box-shadow: 0 0 0 3px #e3dbff, 0 3px 0 var(--violet-deep); }
.skl-slot.on { border-color: var(--gold-deep); border-style: solid; background: #fff6d2; box-shadow: 0 0 0 4px rgba(255, 200, 61, .75), 0 3px 0 var(--gold-deep); }
.skl-slot.empty.on { background: repeating-linear-gradient(45deg, #fff6d2 0 6px, #ffecb0 6px 12px); color: #7a4d00; }
.skl-pick { position: absolute; left: 50%; bottom: -12px; z-index: 2; transform: translateX(-50%); padding: 1px 7px 2px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: #5a3a00; background: var(--gold); border: 2px solid var(--ink); border-radius: 8px; }
.skl-slot:active { transform: translateY(2px); }
.skl-slot.pop .skl-ico { animation: skl-pop .55s cubic-bezier(.2, 1.5, .4, 1); } /* 방금 끼운 칸 */
@keyframes skl-pop { 0% { transform: scale(.55); filter: brightness(1.8); } 60% { transform: scale(1.12); } 100% { transform: none; filter: none; } }
.skl-slot:focus-visible, .skl-card:focus-visible, .skl-num:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.skl-tip { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.skl-tip.on { padding: 7px 10px; color: #5a3a00; background: #fff6d2; border: 2px solid var(--gold-deep); border-radius: 10px; }
.skl-tip.on b { font-family: var(--f-ui); font-weight: 400; }
/* 아직 배운 스킬이 없을 때: 첫 목표 */
.skl-tip.goal { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-family: var(--f-ui); font-size: 15px; line-height: 1.45; color: var(--ink); background: linear-gradient(180deg, #fffdf2, #fff3cf); border: 2.5px solid var(--gold-deep); border-radius: 12px; box-shadow: 0 3px 0 var(--gold-deep); }
.skl-tip.goal svg { width: 26px; height: 26px; flex: none; }
.skl-tip.goal b { font-weight: 400; color: var(--violet-deep); }

/* ---------- 고른 스킬 설명 ---------- */
.skl-detail { display: grid; gap: 10px; padding: 14px; min-width: 0; }
.skl-dtop { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 12px; }
.skl-dico { position: relative; width: 80px; height: 80px; }
.skl-dico::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sk-c, #4f95ff) 42%, transparent) 0%, transparent 70%); } /* 스킬 색 빛 */
.skl-dico .skl-ico { position: relative; width: 80px; height: 80px; }
.skl-dtop.locked .skl-dico::before { content: none; }
.skl-dtop.locked .skl-ico, .skl-card.locked .skl-ico { filter: grayscale(1) opacity(.55); }
.skl-lock { position: absolute; right: -5px; bottom: -3px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; padding: 3px; background: #fff; border: 2.5px solid var(--ink); border-radius: 50%; }
.skl-lock svg { width: 100%; height: 100%; }
.skl-dh { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.skl-dnm { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.skl-dh .pill svg { width: 14px; height: 14px; flex: none; }
.skl-ds { margin: 0; font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
/* 그 챕터 개념과 잇는 한 줄: 시그마의 말풍선 */
.skl-concept { display: flex; align-items: flex-end; gap: 7px; }
.skl-owl { width: 38px; flex: none; }
.skl-owl .art-img, .skl-owl > svg { width: 100%; height: auto; }
.skl-concept p { position: relative; flex: 1; min-width: 0; margin: 0 0 6px; padding: 7px 11px 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); background: #f4f0ff; border: 2px solid #c9bcff; border-radius: 12px; word-break: keep-all; overflow-wrap: anywhere; }
.skl-concept p::before { content: ""; position: absolute; left: -7px; bottom: 9px; width: 10px; height: 10px; background: #f4f0ff; border-left: 2px solid #c9bcff; border-bottom: 2px solid #c9bcff; transform: rotate(45deg); }
.skl-facts { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.skl-facts li { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.skl-facts svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.skl-facts b { font-family: var(--f-ui); font-weight: 400; color: var(--ink); }
/* 끼우기: (먼저 고른 칸이 있으면) 큰 단추 · 숫자 단추 넷 · 빼기 */
.skl-acts { display: grid; gap: 8px; padding-top: 11px; border-top: 2.5px dashed var(--paper-line); }
.skl-acts > .btn.small { justify-self: start; min-height: 42px; padding-inline: 14px; }
.skl-put { width: 100%; }
.skl-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.skl-nums { display: flex; gap: 6px; }
.skl-num {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  font-family: var(--f-num); font-size: 19px; line-height: 1; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); transition: transform .08s;
}
.skl-num.empty { border-style: dashed; background: #faf3e3; }
.skl-num.mine { cursor: default; color: #fff; text-shadow: 0 2px 0 var(--mint-deep); background: linear-gradient(180deg, #84e6cf 0%, var(--mint) 58%); box-shadow: 0 3px 0 var(--ink), inset 0 -3px 0 var(--mint-deep); }
.skl-num.on { background: #fff6d2; border-color: var(--gold-deep); border-style: solid; box-shadow: 0 0 0 3px rgba(255, 200, 61, .75), 0 3px 0 var(--gold-deep); }
.skl-num:not(.mine):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.skl-off { min-height: 44px; margin-left: auto; padding-inline: 14px; }
.skl-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.skl-small b { font-family: var(--f-ui); font-weight: 400; color: var(--ink); }

/* ---------- 모든 스킬: 카드(배운 것은 흰 종이, 못 배운 것은 줄무늬 종이에 흐린 그림·자물쇠·배우는 곳) ---------- */
.skl-all { display: grid; gap: 10px; padding: 14px 16px 16px; min-width: 0; }
.skl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.skl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.skl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px 10px; padding-top: 6px; }
.skl-card {
  position: relative; min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 10px 11px; cursor: pointer;
  font-family: var(--f-body); color: var(--ink); text-align: left;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .12s;
}
.skl-card .skl-ico { width: 46px; height: 46px; margin-top: 2px; }
.skl-tx { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.skl-card .skl-nm { font-family: var(--f-ui); font-size: 16.5px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.skl-card .skl-ds { font-size: 13px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.skl-card[aria-pressed="true"] { border-color: var(--violet); background: #f6f2ff; box-shadow: 0 0 0 3px #d9ceff, 0 3px 0 var(--violet-deep); }
.skl-card:active { transform: translateY(2px); }
@media (hover: hover) { .skl-card:hover, .skl-slot:hover { transform: translateY(-2px); } }
.skl-card.locked { background: repeating-linear-gradient(45deg, #faf3e3 0 6px, #f4ead5 6px 12px); border-style: dashed; box-shadow: none; }
.skl-card.locked[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px #d9ceff; }
.skl-card.locked .skl-nm { color: var(--ink-2); }
.skl-where { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.2; color: var(--ink-soft); }
.skl-where svg { width: 15px; height: 15px; flex: none; }
.skl-badge, .skl-new { position: absolute; top: -11px; z-index: 2; padding: 1px 7px 2px; font-family: var(--f-ui); font-size: 12px; line-height: 1.2; white-space: nowrap; border: 2px solid var(--ink); border-radius: 8px; }
.skl-badge { right: -6px; color: #fff; background: var(--ok); } /* 끼운 칸 */
.skl-new { left: -6px; color: #5a3a00; background: var(--gold); } /* 이번에 처음 보는 스킬 */
.skl-allin { display: grid; gap: 10px; min-width: 0; }
/* 칸을 먼저 골랐을 때 목록 위에 붙어 따라오는 알림(좁은 화면만) */
.skl-pickbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 12px; font-family: var(--f-ui); font-size: 15px; line-height: 1.3; color: #5a3a00; background: #fff6d2; border: 2.5px solid var(--gold-deep); border-radius: 12px; box-shadow: 0 3px 0 var(--gold-deep), 0 6px 14px rgba(43, 33, 64, .18); }
.skl-pickbar b { font-weight: 400; color: var(--ink); }
.skl-pickbar .btn.small { flex: none; min-height: 38px; padding-inline: 12px; }
@media (min-width: 761px) { .skl-pickbar { display: none; } }

/* ---------- 좁은 화면 ---------- */
@media (min-width: 761px) and (max-width: 1040px) { /* 태블릿: 오른쪽 칸이 좁아 머리의 제목과 MP 규칙을 위아래로 */
  .skl-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) {
  .skl-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "list"; grid-template-rows: none; gap: 12px; padding-block: 12px 30px; }
  .skl-side { position: static; gap: 12px; }
  .skl-head { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px 14px; }
  .skl-title p { font-size: 14px; }
  .skl-rules { padding: 9px 12px 11px; }
  .skl-rules li { font-size: 14px; line-height: 1.5; }
  .skl-equip, .skl-detail, .skl-all { padding: 12px; }
  .skl-slots { gap: 6px; }
  .skl-slot { min-height: 112px; padding-inline: 2px; }
  .skl-slot .skl-ico { width: 44px; height: 44px; }
  .skl-slot .skl-nm { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .skl-slot.pop .skl-ico { animation: none; }
}