/* 머리말 배치는 모든 언어·화면이 skin.css와 mobile.css를 함께 쓴다. */

/* 공식 능력치 영문은 6열의 좁은 요약 칸 밖으로 샌다. 한국어 배치는 유지한다. */
html[lang="en"] #summary .abils {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--sp-2);
}
html[lang="en"] #summary .summary-line .lv {
  width: auto;
  min-width: 2em;
  flex: none;
  text-align: left;
}
html[lang="en"] #summary .summary-line > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 긴 영문 능력 이름은 좁은 뇌 그림에서 겹친다. 나무의 간격을 유지하고
   그 영역만 가로로 스크롤한다. 노드 좌표와 요구 조건 선은 그대로 둔다. */
html[lang="en"] .tadtree-viewport {
  max-width: 100%;
  overflow-x: auto;
  padding-inline: 20px;
}
html[lang="en"] .tadtree-viewport .tadtree { min-width: 620px; }

/* 안내는 **실제로 스크롤할 때만** 뜬다. 나무는 620px + 좌우 안여백 20px 이라
   그보다 넓은 칸에서는 스크롤이 안 생기고, 그때 「옆으로 밀어 보세요」는 거짓말이다.
   기본값을 숨김으로 두고 좁은 화면에서만 켠다(칸은 뷰포트보다 좁으니 넉넉히 잡는다). */
html[lang="en"] .tadtree-scroll-hint { display: none; }
@media (max-width: 900px) {
  html[lang="en"] .tadtree-scroll-hint { display: block; }
}