/* site.css — 모든 페이지 공통 다듬기 (각 페이지 인라인 스타일 뒤에 로드)
 * - 한글 줄바꿈: 글자 중간이 아니라 띄어쓰기 단위로 / 짧은 라벨(배지·버튼·표 머리글·날짜)은 한 줄 유지
 * - 1180px 이하(작은 노트북·태블릿)에서는 상단 메뉴를 햄버거 메뉴로 전환 (메뉴 글자 꺾임 방지)
 * - 휴대폰: 게시판 표는 카드형, 정책/사양 표는 항목별 세로 배치
 * - 키보드 초점 표시, 선택 색, 스크롤바, 움직임 줄이기 설정 존중
 */
html { -webkit-text-size-adjust: 100%; }
/* 화면 밖으로 삐져나온 장식 요소 때문에 휴대폰에서 좌우로 흔들리는 현상 방지 (clip 은 sticky 를 깨지 않음) */
html, body { overflow-x: clip; }
.page-radial { max-width: 100vw; }
/* break-word 는 넘칠 때만 단어 중간 줄바꿈 (표 칸 최소 너비 계산에는 영향 없음 → 'TERRA/N' 같은 쪼개짐 방지) */
body { word-break: keep-all; overflow-wrap: break-word; }
input, textarea, pre, code { word-break: normal; overflow-wrap: normal; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: rgba(124, 50, 212, 0.45); color: #fff; }
:focus-visible { outline: 2px solid #b87cff; outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(124, 50, 212, 0.45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 50, 212, 0.45); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(160, 100, 232, 0.7); }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── 짧은 라벨은 한 줄로 ─────────────────────────────────────────── */
.nav-links a, .nav-actions button, .nav-actions a,
[class*="badge"], .tag, .chip, .pill,
th, td.col-date, td.col-stats, td.col-id,
.race-btn, .subtab-btn, .main-tab-btn, .btn-table-detail, .btn-refresh,
.rating-cell, .stat-num, .article-num, .policy-highlight,
.author-badge > span, .page-btn, .pagination button { white-space: nowrap; }
.author-badge { flex-wrap: nowrap; min-width: 0; }
.author-badge > span:last-child { overflow: hidden; text-overflow: ellipsis; max-width: 14em; }

/* ── 상단 메뉴: 1180px 이하 햄버거 전환 (페이지별 840px 규칙과 동일 동작) ── */
@media (max-width: 1180px) {
  .nav-links { display: none !important; }
  .nav-actions > a,
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary,
  .nav-actions .nav-user-info,
  .nav-actions > div:not(.nav-hamburger) { display: none !important; }
  .nav-hamburger { display: flex !important; }
}
@media (min-width: 1181px) and (max-width: 1360px) {
  .nav-links { gap: 18px !important; }
  .nav-links a { letter-spacing: 1px !important; }
}

/* 정책 표 첫 칸(구분)은 데스크톱에서 한 줄 */
@media (min-width: 601px) { table.policy-table td:first-child { white-space: nowrap; } }

/* ── 랭킹 표: 칸 안 글자가 꺾여 행 높이가 늘어나지 않게 (좁으면 표만 가로 스크롤) ── */
.ranking-table th, .ranking-table td { white-space: nowrap; }
.ranking-table td[colspan] { white-space: normal; }
.ranking-table .player-name-text { display: inline-block; max-width: 16em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .ranking-table th, .ranking-table td { padding: 10px 8px !important; }
  .ranking-table .player-name-text { max-width: 9em; }
  /* 휴대폰: 핵심 칸(순위·이름·티어·점수)만 보이게, 나머지는 숨김 (행을 누르면 상세가 열림) */
  .ranking-table[data-kind="player"] :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(7), :nth-child(8)),
  .ranking-table[data-kind="team"] :is(th, td):is(:nth-child(3), :nth-child(6)),
  .ranking-table[data-kind="clan"] :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8)) { display: none; }
  .ranking-table[data-kind] { width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  .ranking-table[data-kind] th { width: auto !important; letter-spacing: 0.5px !important; }
  .ranking-table[data-kind] td:last-child, .ranking-table[data-kind] th:last-child { padding-right: 12px !important; }
  .ranking-table[data-kind] .player-pfp { display: none; }
  .ranking-table[data-kind] .trophy-badge { display: none; }
  .ranking-table .clan-name-btn > span { display: inline-block; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
}

/* ── 게시판 표(공지·커뮤니티·클랜 홍보): 휴대폰에서는 카드형 ── */
@media (max-width: 640px) {
  .post-table, .post-table tbody { display: block; width: 100%; }
  .post-table thead { display: none; }
  .post-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid rgba(92, 24, 168, 0.22); }
  .post-table tbody tr > td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; max-width: none; text-align: left !important; background: none; }
  .post-table td.col-title { flex: 1 0 100%; order: -1; font-size: 14px; white-space: normal; }
  .post-table td.col-title .title-wrapper { flex-wrap: wrap; row-gap: 4px; }
  .post-table td.col-id { display: none !important; }
  .post-table td.col-category { order: 0; }
  .post-table td.col-author { order: 1; font-size: 12px; min-width: 0; }
  .post-table td.col-date { order: 2; font-size: 11px; opacity: 0.75; }
  .post-table td.col-stats { order: 3; font-size: 11px; opacity: 0.75; margin-left: auto; }
  .post-table td.col-date::before { content: "· "; opacity: 0.6; }
  .post-table tbody tr > td[colspan] { flex: 1 0 100%; }
}

/* ── 정책·사양 표: 휴대폰에서는 행마다 항목별 세로 배치 (머리글은 site-footer.js 가 data-label 로 붙임) ── */
@media (max-width: 600px) {
  table.policy-table, table.req-table { display: block; width: 100%; border: 0; }
  table.policy-table thead, table.req-table thead { display: none; }
  table.policy-table tbody, table.req-table tbody { display: block; }
  table.policy-table tr, table.req-table tr { display: block; padding: 12px 14px; margin-bottom: 10px; border: 1px solid rgba(92, 24, 168, 0.28); border-radius: 6px; background: rgba(20, 6, 40, 0.45); }
  table.policy-table td, table.req-table td { display: block; width: auto !important; padding: 4px 0 !important; border: 0 !important; text-align: left !important; white-space: normal; }
  table.policy-table td:first-child, table.req-table td:first-child { font-weight: 700; color: #ede6ff; padding-bottom: 6px !important; margin-bottom: 4px; border-bottom: 1px solid rgba(92, 24, 168, 0.22) !important; }
  table.policy-table td[data-label]:not(:first-child)::before,
  table.req-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.5px; color: #a064e8; margin-bottom: 2px; }
  table.policy-table td strong { white-space: normal; }
}

/* ── 아주 좁은 휴대폰(≤420px) 보정 ── */
@media (max-width: 600px) {
  .cache-notice { max-width: 100%; flex-wrap: wrap; }
  .sys-id, .sys-badge-line { flex-wrap: wrap; letter-spacing: 1.5px !important; row-gap: 2px; max-width: 100%; }
}
@media (max-width: 420px) {
  .race-filters { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; overflow: visible !important; }
  .race-filters .race-btn { min-width: 0; padding-left: 4px !important; padding-right: 4px !important; justify-content: center; font-size: 11px; letter-spacing: 0.3px !important; }
}

/* 게시판 제목이 길면 한 줄 말줄임 (데스크톱) — 행 높이 일정하게 */
@media (min-width: 641px) {
  .post-table .post-title-text, .post-table .post-title-link { display: inline-block; max-width: min(48vw, 620px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}