/* client/lobby.css — 대기화면(#join) 세계관 통일 (수묵·전장)
   목표: 로고에만 있던 사무라이 수묵 분위기를 입력창·버튼·하단메뉴·여백까지 확장.
   팔레트 5색 엄수(철칙 3): 종이 #F5EFE0 · 먹 #1A1A1A · 담묵 #8A8578 · 혈홍 #B3271E · 금 #C9A227.
   ★#join 전용으로만 스코프 — 사망화면·모달·인게임 UI 무영향. index.html 인라인 <style> 뒤에 로드돼 우선한다. */

/* ── ③ (비움 · 2026-08-10 태현) 옛 먹연기·칼자국·핏점 CSS 장식을 걷었다 ──
   배경 그림이 없던 시절 "전투 직전의 정적"을 만들던 레이어인데, 로비 배경화면
   (까마귀·매화·꽂힌 칼)이 들어온 뒤로는 그림 위에 빨간 점과 가는 선이 둥둥 떠
   보였다 — 그림에 안 그려진 핏자국이 화면에 있으면 얼룩으로 읽힌다.
   #joinFx 요소 자체는 남긴다(마크업·z층 유지, 배경만 제거). */
#joinFx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* 콘텐츠(로고·입력·버튼) 층 순서는 그대로 — 콘텐츠 스크롤이 z1 */
#join .scroll { z-index: 1; }

/* ── ② 서브타이틀: 얇지만 날카로운 세리프 (향수 브랜드 느낌 제거) ── */
#brandSubtitle {
  margin: -8px 0 2px;               /* 로고에 살짝 붙임 — .content gap(16px) 일부 상쇄 */
  font-family: "Noto Serif KR", serif;
  font-size: clamp(10px, 2.7vw, 14px);   /* 살짝 작게 */
  letter-spacing: 0.22em;
  text-indent: 0.24em;
  font-weight: 600;
  color: #6f665a;                 /* 담묵보다 조금 짙게 — 존재감 */
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
}

/* ── ② 이름 입력: 밑줄 대신 거친 붓 획 + 세리프 + 먹 커서 ── */
#join .nickrow input#nick {
  font-family: "Noto Serif KR", serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1A1A1A;
  caret-color: #B3271E;           /* 인주색 커서 */
  border-bottom: none;            /* 평평한 밑줄 제거 */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 9px;
  /* 붓으로 그은 밑줄(테이퍼드·거친 위 가장자리) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='9' viewBox='0 0 220 9' preserveAspectRatio='none'%3E%3Cpath d='M4 4.6 C 34 3.2 70 2.4 112 3 C 156 3.6 190 2.6 216 4 C 192 7 150 6.4 108 6.4 C 62 6.4 32 6 4 5.2 Z' fill='%231A1A1A'/%3E%3C/svg%3E");
  padding-bottom: 12px;
}
#join .nickrow input#nick::placeholder {
  color: #9a9384; font-weight: 500; letter-spacing: 0.06em; opacity: 1;
}
#join .nickrow input#nick:focus {
  /* 포커스 시 획이 조금 짙어지고 먹이 번진다 */
  filter: none;
}
#join .nickrow input#nick:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='9' viewBox='0 0 220 9' preserveAspectRatio='none'%3E%3Cpath d='M3 4.4 C 34 2.8 70 2 112 2.7 C 156 3.4 192 2.2 217 3.8 C 192 7.4 150 6.8 108 6.9 C 60 7 30 6.4 3 5.4 Z' fill='%23111'/%3E%3C/svg%3E");
}

/* ── ④ ENTER 버튼: 붓으로 칠한 듯 살짝 불규칙 + 먹 번짐 ── */
#joinBtn {
  position: relative;
  font-family: "Noto Serif KR", serif;
  font-weight: 800;
  letter-spacing: 0.24em; text-indent: 0.24em;
  color: #F5EFE0;
  background: #1A1A1A;
  border-radius: 0;
  padding: 12px 46px;
  /* 붓 자국처럼 가장자리를 미세하게 불규칙하게 (직선 아님) */
  clip-path: polygon(2% 14%, 10% 3%, 34% 7%, 62% 2%, 88% 6%, 98% 16%, 97% 52%, 99% 86%, 90% 97%, 60% 93%, 30% 98%, 8% 92%, 2% 66%, 3% 34%);
  transition: transform .12s ease-out, background .2s;
}
/* 버튼 뒤 옅은 먹 번짐 */
#joinBtn::before {
  content: ''; position: absolute; inset: -7px -4px; z-index: -1;
  background: radial-gradient(60% 70% at 50% 55%, rgba(26,26,26,.22), transparent 72%);
  filter: blur(6px);
  transition: background .2s;
}
#joinBtn:hover:not(:disabled) { background: #1A1A1A; transform: translateY(-1px); }
#joinBtn:hover:not(:disabled)::before { background: radial-gradient(62% 74% at 50% 55%, rgba(179,39,30,.30), transparent 72%); }   /* 호버 시 혈홍 번짐 */

/* ── ① 하단 메뉴: 회색 앱 메뉴 → 먹선 목패 느낌 (아이콘 숨김·글자 진하게·붓 구분선) ── */
#join .joinlinks {
  bottom: max(14px, env(safe-area-inset-bottom));
  font-family: "Noto Serif KR", serif;
  font-size: 12.5px; letter-spacing: 0.06em;
}
#join .joinlinks .ico { display: none; }               /* 제각각 아이콘 숨김 — 텍스트만 */
#join .joinlinks a { color: #4a453c; gap: 0; }          /* 담묵보다 진하게 */
#join .joinlinks a:hover { color: #B3271E; }            /* 호버 인주색 */
#join .joinlinks .sep { margin: 0 12px; color: #b8b0a0; }
/* 메뉴 위 얇은 붓 구분선 */
#join .joinlinks::before {
  content: ''; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: min(56%, 300px); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26,26,26,.30) 22%, rgba(26,26,26,.30) 78%, transparent);
  border-radius: 2px;
}

/* ── 주사위(랜덤 이름): 서양 보드게임 느낌 완화 — 더 작고 옅게, 인주 호버 ── */
#join #rollNick .ico { opacity: .5; }
#join #rollNick:hover .ico { opacity: .95; }

/* ── 설정 모달로 옮겨온 개인정보·피드백 링크 행 ── */
#settings .lp-links { display: flex; gap: 14px; justify-content: center; margin-top: 2px; }
#settings .lp-links a {
  color: #6f665a; text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
}
#settings .lp-links a:hover { color: #B3271E; }
#settings .lp-links .ico { opacity: .6; }

@media (max-width: 600px) {
  #join .joinlinks { font-size: 12px; }
  #join .joinlinks .sep { margin: 0 9px; }
}

/* ── 링크를 화면 바닥에 못박는다 (2026-08-16 폴드5 제보 "튜토리얼·수련장·설정 클릭 안 됨") ──
   원래 의도는 처음부터 '화면 하단'이었다(.joinlinks { position:absolute; bottom:10px } —
   .overlay가 fixed inset:0이니 보통은 그게 곧 화면 하단이다). 그런데 #join은 스크롤 컨테이너라
   **콘텐츠가 뷰포트를 넘는 순간 absolute의 기준이 화면이 아니라 늘어난 콘텐츠 상자**가 된다.
   그때부터 링크의 자리는 위 콘텐츠 길이가 정한다 — 소임 3줄이 뜨는 날 링크가 통째로 화면 밖으로
   밀려났다(실측 376×640: top 661 > 640, elementFromPoint가 null을 돌려줬다).
   ★sticky도 답이 아니다: sticky는 정상 위치가 스크롤포트 안에 들어와야 붙잡는다 —
     아직 화면 아래에 있는 것을 끌어올리지는 못한다(실측: scrollTop 0에서 626~656 그대로).
   ★fixed는 조상에 transform/will-change가 있으면 그 요소에 갇힌다 — .op-hub-enter의
     `will-change: transform` 잔재가 정확히 그 사고를 냈다(opening.js settle이 이제 걷는다).
   ★세로가 넉넉한 화면에서도 소임 3줄이 뜨면 넘친다(실측 1280×800: 콘텐츠 837 > 800).
     그래서 이 규칙엔 화면 크기 조건을 걸지 않는다 — 넘침은 세로 길이가 아니라 콘텐츠가 정한다.
   겹침은 #join의 padding-bottom이 자리를 비워 막는다(index.html의 짝 규칙).
   ★z-index 11: `#join .scroll`이 z1이라 그냥 두면 소임·전장 띠가 링크 **위**에 그려져
     눈에는 보이는데 클릭은 안 먹는 상태가 된다(태현 화면이 정확히 그랬다).
   ※이 규칙이 lobby.css에 있는 이유: 위 `#join .joinlinks`의 bottom을 여기서 이미 잡고 있고,
     이 파일이 인라인 <style>보다 나중에 로드돼 늘 이긴다. index.html에 쓰면 조용히 진다. */
#join .joinlinks {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 11;
  max-width: none; padding: 22px 12px calc(8px + env(safe-area-inset-bottom));
  /* 스크롤된 콘텐츠가 링크 밑을 지날 때 글자가 겹쳐 읽히지 않게 — 종이색으로 녹인다.
     ★위쪽 패딩을 넉넉히 잡아 **글자에 닿기 전에** 다 녹게 한다. 짧으면(8px) 소임 한 줄이
       링크와 같은 높이에서 반투명하게 겹쳐 둘 다 읽기 나빠진다(실측 화면에서 그랬다). */
  background: linear-gradient(180deg, transparent, #F5EFE0 38%, #F5EFE0);
}
#join .joinlinks::before { display: none; }   /* 붓 구분선 자리는 종이 페이드가 대신한다 */

/* ═══════════ 허브 사이드 탭·패널 (榜/検 → 영문 기능명 + 한자 장식) ═══════════ */

/* ── 사이드 탭: 붓 사각형. 언어별 기능명(주) 세로 정립 + 한자 장식(보) + 활성 인주 표시 ──
   ★배경이 알파 마스크다(assets/ui/tab_mask_256.png). RGB는 흰색이고 형태가 알파에만 있어
     색은 여기서 입힌다 — 먹 #1A1A1A. 상태(선택/비활성)도 이 색 하나로 갈린다.
   ★마스크는 버튼이 아니라 ::before가 진다. 버튼에 직접 걸면 **글자와 배지까지 같이 잘려**
     붓의 거친 가장자리에서 획이 깎인다. 글자는 폰트로 위에 얹고 종이색으로 남겨야 읽힌다.
   ★그래서 버튼 자신의 background는 반드시 none이어야 한다 — 남아 있으면 각진 사각형이
     마스크를 통째로 덮는다(실제로 그랬다).
   ※이 블록이 탭 생김새의 단일 주인이다. index.html 인라인 .hub-tab은 폴백일 뿐이라
     거기를 고쳐도 화면은 안 바뀐다. */
/* ★벽에 붙인다 — 붓 가장자리는 너덜너덜해서 left:0에 그냥 두면 '떨어져 있는' 것처럼 보인다.
   마스크에 투명 여백은 없다(측정: 알파가 x 0~255 전폭). 문제는 여백이 아니라 결의 들쭉날쭉함이라,
   벽 쪽 --tab-bleed 만큼을 화면 밖으로 물려 **잘라낸다** — 벽에 닿은 면은 곧고, 안쪽만 붓이 산다.
   글자는 같은 값만큼 안쪽 패딩을 더해 가운데를 되돌린다(안 하면 라벨이 벽으로 쏠린다). */
.hub-tabstack { --tab-bleed: 7px; }
.hub-tab {
  writing-mode: horizontal-tb;                 /* 인라인 vertical 해제 — flex column으로 재구성 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 38px; padding: 17px 4px;
  background: none; color: #F5EFE0;
  border-radius: 0; opacity: 1;
  position: relative; isolation: isolate;      /* ::before(z -1)를 이 버튼 안에 가둔다 */
  box-sizing: content-box;
}
.hub-tabstack:not(.hub-tabstack-r) { left: calc(-1 * var(--tab-bleed)); }
.hub-tabstack:not(.hub-tabstack-r) .hub-tab { padding-left: calc(4px + var(--tab-bleed)); }
.hub-tabstack-r { right: calc(-1 * var(--tab-bleed)); }
.hub-tabstack-r .hub-tab { padding-right: calc(4px + var(--tab-bleed)); }
.hub-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #1A1A1A;                         /* 먹 원색 — 흐리게 깔면 빛바랜 종이처럼 보인다 */
  -webkit-mask: url("assets/ui/tab_mask_256.png") no-repeat center / 100% 100%;
  mask: url("assets/ui/tab_mask_256.png") no-repeat center / 100% 100%;
}
/* 우측 탭은 마스크를 좌우 반전 — 붓 결이 양쪽에서 같은 방향이면 붙여 놓은 티가 난다 */
.hub-tab-r::before, .hub-tabstack-r .hub-tab::before { transform: scaleX(-1); }
.hub-tab .ht-en {
  writing-mode: vertical-rl; text-orientation: upright;   /* 영문 세로 정립 스택(RANK/PROFILE) */
  font-family: "Noto Serif KR", serif; font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.hub-tab .ht-han {
  font-family: "Noto Serif KR", serif; font-size: 15px; color: rgba(245, 239, 224, 0.5);   /* 담묵 톤 장식 */
}
/* ★먹은 항상 원색(불투명)이다. 상태는 인주 획(아래 ::after)과 한자 색이 맡는다 —
   투명도로 상태를 만들면 비활성 탭이 '빛바랜' 것처럼 보인다(태현 지적 2026-08-04). */
.hub-tab:hover .ht-han { color: rgba(245, 239, 224, 0.85); }
/* 열린 쪽 = 인주(혈홍) 한 획. ★box-shadow는 마스크를 안 따르므로 ::after로 그린다 —
   버튼에 inset shadow를 주면 붓 자국 밖 각진 사각형 변에 선이 생겨 마스크가 무의미해진다. */
.hub-tab.on::after {
  content: ''; position: absolute; top: 18%; bottom: 18%; width: 3px;
  background: var(--blood); pointer-events: none;
}
.hub-tab-l.on::after, .hub-tabstack:not(.hub-tabstack-r) .hub-tab.on::after { right: 2px; }
.hub-tab-r.on::after, .hub-tabstack-r .hub-tab.on::after { left: 2px; }
.hub-tab.on .ht-han { color: var(--blood); }
@media (max-width: 600px) { .hub-tab { width: 34px; padding: 14px 3px; } .hub-tab .ht-en { font-size: 11px; letter-spacing: 1.5px; } }

/* ── 배경 스크림: 패널 열릴 때 뒤를 살짝 어둡게 (바깥 클릭 시 close) ── */
#hubScrim {
  position: fixed; inset: 0; z-index: 12;      /* 탭·배너(z12) 위, 패널(z13) 아래 */
  background: rgba(26, 26, 26, 0.30);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s 0.28s;
}
#hubScrim.on { opacity: 1; visibility: visible; transition: opacity 0.28s ease; }

/* ── 패널 헤더 통일: 한자 장식 + 영문 제목 + 부제 + 붓 구분선 ── */
.hub-panel .hp-h {
  position: relative; align-items: baseline; gap: 9px; padding-bottom: 9px; letter-spacing: 0;
}
.hub-panel .hp-h::after {   /* 붓 구분선 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(26, 26, 26, 0.34), rgba(26, 26, 26, 0.12) 72%, transparent);
}
.hub-panel .hp-han { font-family: "Noto Serif KR", serif; font-size: 21px; line-height: 1; color: #8A8578; opacity: 0.72; }
.hub-panel .hp-title { flex: 1; font-family: "Noto Serif KR", serif; font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: #1A1A1A; }
.hub-panel .hp-close { margin-left: auto; align-self: flex-start; }
.hub-panel .hp-sub { font-size: 11px; color: #8A8578; letter-spacing: 0.03em; margin: -4px 0 2px; }

/* ── 내 순위 고정 박스: 목록 스크롤과 무관하게 패널 하단에 항상. 위엔 탑랭커, 아래 내 위치 ── */
.hub-you {
  position: sticky; bottom: -18px; margin: 8px -16px -18px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: #1A1A1A; color: #F5EFE0;
  display: flex; align-items: baseline; gap: 11px;
  box-shadow: 0 -6px 14px rgba(245, 239, 224, 0.9);   /* 스크롤 목록과 경계 */
}
.hub-you .yb-me { font-family: "Noto Serif KR", serif; font-weight: 800; letter-spacing: 0.14em; font-size: 11px; color: var(--blood); }
.hub-you .yb-rk { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hub-you .yb-sc { margin-left: auto; font-size: 11.5px; color: rgba(245, 239, 224, 0.62); letter-spacing: 0.02em; }
.hub-you .yb-sc b { color: #F5EFE0; font-size: 13.5px; font-weight: 700; }

/* ── Top3 톤 (팔레트 안: 1위 금, 2·3위 먹 강조) ── */
.hub-rows .hr.p1 .rk { color: var(--gold); font-weight: 800; }
.hub-rows .hr.p2 .nm, .hub-rows .hr.p2 .sc, .hub-rows .hr.p2 .rk { color: #1A1A1A; font-weight: 700; }
.hub-rows .hr.p3 .nm, .hub-rows .hr.p3 .rk { color: #4a453c; font-weight: 700; }

/* ═══════════ 인게임 HUD 정리 (1차) ═══════════ */
/* 킬피드: 승자 이름 진하게(전투 중 가독 — 옅은 회색이 안 보이던 것), 破(결진 격파)만 금 */
#killlog .kw { color: #1A1A1A; font-weight: 600; }
#killlog .fb { color: var(--gold); }