/* =========================================================
   팀메이커 · base.css
   모든 페이지 공통: 색상 변수, 기본 스타일, 헤더, 푸터,
   버튼, 입력창, 아바타, 토스트
   색상은 전부 변수 → 야간모드는 값만 바뀜
   ========================================================= */

/* ---------- 색상 · 공통 값 ---------- */
:root {
  --bg: #f6f7f9;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --border: #e6e8ec;
  --divider: #eef0f3;
  --input-bg: #fbfbfc;
  --input-border: #d5d9e0;
  --input-disabled: #f1f2f5;
  --text: #1d2127;
  --text-2: #5f6672;
  --text-3: #6b7280;
  --chip: #f1f2f5;
  --chip-text: #4b5260;
  --accent: #0b7f89;
  --accent-hover: #075f67;
  --accent-soft: rgba(11, 127, 137, 0.1);
  --on-accent: #ffffff;
  --scrim: rgba(17, 20, 26, 0.45);
  --online: #2f9e5f;
  --offline: #b8bec8;
  --busy: #d08a00;
  --wait: #b38600; --wait-dot: #e6b800; --wait-soft: rgba(230, 184, 0, 0.14);   /* 대기 중 (노랑) */
  --play: #2f9e5f; --play-soft: rgba(47, 158, 95, 0.12);                        /* 경매 중 (초록) */
  --danger: #c0392b;
  --danger-hover: #e05656;                     /* 닫기 · 삭제 호버 (눈이 편한 빨강) */
  --danger-soft: rgba(224, 86, 86, 0.1);
  /* 롤 티어 글자 색 */
  --tier-iron: #6e6a68; --tier-bronze: #9a5b35; --tier-silver: #7b8794; --tier-gold: #b8860b;
  --tier-platinum: #1a9a8f; --tier-emerald: #12945a; --tier-diamond: #3d6ee0; --tier-master: #9b4fd1;
  --tier-grandmaster: #d03c3c; --tier-challenger: #c99a00;
  --tooltip-bg: #1d2127;
  --tooltip-text: #f4f5f8;
  --tooltip-sub: #b8bec8;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --font: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-title: 'Paperlogy', var(--font);   /* 큰 제목 전용 (font.css) */
}

[data-theme="dark"] {
  --bg: #15171c;
  --header-bg: #1b1e24;
  --surface: #1d2027;
  --surface-2: #191c22;
  --border: #2b2f38;
  --divider: #262a32;
  --input-bg: #16181d;
  --input-border: #353a45;
  --input-disabled: #1f232a;
  --text: #e6e8ec;
  --text-2: #a3aab5;
  --text-3: #8e96a3;
  --chip: #262a33;
  --chip-text: #c3c8d1;
  --accent: #4fc1c9;
  --accent-hover: #7fd4da;
  --accent-soft: rgba(79, 193, 201, 0.14);
  --on-accent: #0f1a1c;
  --scrim: rgba(0, 0, 0, 0.6);
  --online: #4cc38a;
  --offline: #5c6370;
  --busy: #e0a43a;
  --wait: #f2c94c; --wait-dot: #f2c94c; --wait-soft: rgba(242, 201, 76, 0.14);
  --play: #4cc38a; --play-soft: rgba(76, 195, 138, 0.14);
  --danger: #ff8a80;
  --danger-hover: #f28b82;
  --danger-soft: rgba(242, 139, 130, 0.14);
  --tier-iron: #a8a29e; --tier-bronze: #d08a5c; --tier-silver: #b4bfcc; --tier-gold: #f2c14e;
  --tier-platinum: #4fd1c5; --tier-emerald: #3fd28a; --tier-diamond: #7aa2ff; --tier-master: #c58cf2;
  --tier-grandmaster: #ff7a7a; --tier-challenger: #ffd75e;
  --tooltip-bg: #2b2f38;
  --tooltip-text: #f4f5f8;
  --tooltip-sub: #a3aab5;
}

/* ---------- 기본 ---------- */
/* 스크롤바: 얇고 은은하게 (바탕 투명, 손잡이만 살짝 · 야간 모드는 더 어둡게) */
:root { --scroll-thumb: #d5d9e0; --scroll-thumb-hover: #b8bec8; }
[data-theme="dark"] { --scroll-thumb: #2b2f38; --scroll-thumb-hover: #3d434e; }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
img { display: block; }
/* 이미지 저장(html2canvas)이 글자 높이를 잴 때 쓰는 1px 그림은 원래대로 → 저장 이미지 글자가 아래로 밀리지 않음 */
img[src^="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP"] { display: inline; }

/* 라이트 · 다크 이미지 바꾸기: 같은 자리에 두 장을 넣고 테마에 맞는 쪽만 보여줌 */
[data-theme="dark"] .only-light,
:root:not([data-theme="dark"]) .only-dark { display: none !important; }

/* 큰 제목 글꼴 */
.font-title { font-family: var(--font-title); font-weight: 900; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- 헤더 ---------- */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; padding-bottom: 12px;
}
.logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo img { width: auto; height: 36px; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* 문의하기: 넓은 화면은 글자 포함 이미지, 좁은 화면은 말풍선만 */
.btn-ghost .inquiry-full { width: auto; height: 18px; }
.btn-ghost .inquiry-icon { width: 20px; height: 20px; }
.btn-ghost .inquiry-icon { display: none; }

/* 프로필 + 메뉴 */
.auth-area { position: relative; }
.profile-chip {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); text-align: left;
}
.profile-chip:hover { background: var(--chip); }
.profile-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px; padding: 6px;
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.profile-menu button, .profile-menu a {
  min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  display: flex; align-items: center; text-align: left; font-size: 14px; color: var(--text); text-decoration: none;
}
.profile-menu button:hover, .profile-menu a:hover { background: var(--chip); color: var(--text); }
.profile-text { display: flex; flex-direction: column; line-height: 1.2; }
.profile-name { font-size: 14px; font-weight: 600; }
.profile-uid { font-size: 12px; color: var(--text-3); }

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--header-bg); }
.footer-inner {
  padding-top: 20px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--text-3); line-height: 1.6;
}
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { color: var(--chip-text); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links a.is-strong { font-weight: 600; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600;
}
.btn-lg { min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); font-size: 15px; }
.btn-sm { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { color: var(--on-accent); filter: brightness(0.93); }
.btn-outline { background: var(--surface); border-color: var(--input-border); color: var(--text); }
.btn-outline:hover { color: var(--text); background: var(--chip); }
.btn-accent-outline { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.btn-done { background: var(--chip); border-color: var(--chip); color: var(--text-3); cursor: default; }

.btn-ghost {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--chip-text); font-size: 14px;
}
.btn-ghost:hover { background: var(--chip); }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--chip); }
.icon-btn-sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.icon-btn-plain {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 0; background: transparent;
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
}
.icon-btn-plain { transition: color .15s, background .15s; }
.icon-btn-plain:hover, .icon-btn-plain:focus-visible { background: var(--danger-soft); color: var(--danger-hover); }   /* 닫기(X) */
/* 휴지통 같은 위험한 동작 버튼: 평소엔 회색, 호버하면 빨강 */
.icon-btn.is-danger { color: var(--text-3); transition: color .15s, background .15s, border-color .15s; }
.icon-btn.is-danger:hover, .icon-btn.is-danger:focus-visible { background: var(--danger-soft); border-color: var(--danger-hover); color: var(--danger-hover); }
.btn-danger { background: var(--danger-hover); color: #fff; }
.btn-danger:hover { filter: brightness(0.95); }

.text-link { font-size: 14px; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- 입력창 ---------- */
.input {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--text); font-size: 15px;
}
select.input { background: var(--surface); padding-right: 8px; }
.input:disabled { background: var(--input-disabled); border-color: var(--border); color: var(--text-3); cursor: not-allowed; }
.input.is-error { border-color: var(--danger); }
.input-sm { min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
.input-md { min-height: 42px; font-size: 14px; }
.checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* ---------- 글자 ---------- */
.label { font-size: 14px; font-weight: 600; }
.caption { font-size: 12px; color: var(--text-3); }
.hint { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.hint.is-error { color: var(--danger); }
.hint-strong { color: var(--chip-text); }
.hint-dark { font-size: 13px; color: var(--text-2); }
.hint-inline { font-weight: 400; color: var(--text-3); }
.accent-text { color: var(--accent); }
.t-center { text-align: center; }

/* ---------- 작은 부품 ---------- */
.avatar {
  position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: var(--chip); color: var(--chip-text);
}
.avatar.is-accent { background: var(--accent-soft); color: var(--accent); }
.avatar.is-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar .dot {
  /* 접속 표시: 프로필 원의 약 1/9 넓이 (지름 1/3) */
  position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--offline);
}
.avatar.is-sm .dot { width: 11px; height: 11px; }
.avatar.is-lg .dot { width: 15px; height: 15px; border-width: 2.5px; }
.avatar .dot.is-online { background: var(--online); }
/* 방장 왕관: 프로필 사진 왼쪽 위에 겹쳐서 (배경 · 그림자 없이 노란 왕관만) */
.avatar .host-crown {
  position: absolute; left: -6px; top: -10px; width: 18px; height: 18px; z-index: 1;
  display: flex; align-items: center; justify-content: center; pointer-events: auto;
  color: #f5b400; transform: rotate(-24deg);
}
.avatar .host-crown svg { width: 18px; height: 18px; }
.avatar.is-lg .host-crown { width: 24px; height: 24px; left: -7px; top: -13px; }
.avatar.is-lg .host-crown svg { width: 24px; height: 24px; }
[data-theme="dark"] .avatar .host-crown { color: #ffc93c; }
/* 프로필 사진이 있으면 원 안을 사진으로 채움 */
.avatar.has-img { background: var(--chip); }
.avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* 네모 사진 칸(경매 · 결과 · 티어 테두리 안)에 넣은 사진: 칸 모양 그대로 꽉 채움 */
.pic-img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* 친구 요청 작은 알림 (오른쪽 아래, 10초) */
.ftoast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px;
  width: min(320px, calc(100vw - 32px)); pointer-events: none; }
.ftoast { position: relative; overflow: hidden; display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; align-items: center;
  column-gap: 10px; row-gap: 10px; padding: 14px 12px 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); pointer-events: auto; animation: ftoast-in 0.18s ease-out; }
.ftoast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; }
.ftoast-text { font-size: 13.5px; line-height: 1.45; color: var(--text-2); word-break: keep-all; }
.ftoast-text b { color: var(--text); }
.ftoast-x { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
  background: none; color: var(--text-3); cursor: pointer; align-self: start; }
.ftoast-x:hover { color: var(--danger-hover); background: var(--danger-soft); }
.ftoast-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 남은 시간: 위쪽 테두리 선이 10초 동안 오른쪽부터 줄어듦 */
.ftoast-bar { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left;
  animation: ftoast-bar 10s linear forwards; }   /* 10초 = friend-toast.js SHOW_MS */
.ftoast.is-hold .ftoast-bar { animation-play-state: paused; }
@keyframes ftoast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ftoast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ftoast { animation: none; } }

.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--chip-text); }

/* ---------- 배치 도우미 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row-inline { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.row-wrap.align-end { align-items: flex-end; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.grow-1 { flex: 1 1 200px; }
.grow-2 { flex: 2 1 260px; }
.grow-3 { flex: 3 1 260px; }
.min-140 { flex-basis: 140px; }
.min-220 { flex-basis: 220px; }
.mt-auto { margin-top: auto; }
.pb-12 { padding-bottom: 12px; }
.w-110 { width: 110px; }
.w-170 { width: 170px; }
.w-120 { width: 120px; }
.is-line-wide .w-120 { width: 252px; }      /* 올라인: 주라인 + 간격 + 부라인 넓이 */
.w-200 { width: 200px; }
.t-right { text-align: right; }

/* ---------- 로그인 돌아오는 페이지 ---------- */
.callback-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.callback-box img { border-radius: 16px; }
.callback-msg { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.6; text-align: center; word-break: keep-all; color: var(--text-2); }
.callback-msg.is-error { color: var(--danger); }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 60;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 14px;
}

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .btn-ghost .inquiry-full { display: none !important; }
  .btn-ghost .inquiry-icon { display: block; }
  .btn-ghost { padding: 0 10px; }
  .profile-text { display: none; }
  .profile-chip { padding: 0 6px; }
  .logo img { height: 30px; }
}

/* 봇 확인(Turnstile) 상자: 의심스러울 때만 오른쪽 아래에 잠깐 보임 */
.captcha-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 90; max-width: calc(100vw - 32px); }   /* 사람 확인 상자: 화면 가운데 (필요할 때만 보임) */
.captcha-box:empty { display: none; }
.hint-note { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 1.55; word-break: keep-all; }   /* 최고 티어 안내 같은 작은 주석 */
.captcha-slot { display: flex; justify-content: center; min-height: 0; }
.captcha-slot:empty { display: none; }

/* ---------- 드롭다운 (dropdown.js) ---------- */
.dd { position: relative; min-width: 0; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd-btn {
  width: 100%; min-height: 44px; padding: 0 12px 0 14px;   /* 입력칸과 같은 높이 */
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--input-border); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--text); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.dd-btn:hover:not(:disabled) { border-color: var(--text-3); }
.dd-btn:focus-visible, .dd.is-open .dd-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dd-btn:disabled { background: var(--input-disabled); color: var(--text-3); cursor: not-allowed; }
.dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn.is-placeholder .dd-text { color: var(--text-3); font-weight: 400; }
.dd-arrow { flex-shrink: 0; color: var(--text-3); transition: transform .2s; }
.dd.is-open .dd-arrow { transform: rotate(180deg); color: var(--accent); }
.dd:has(select.is-error) .dd-btn { border-color: var(--danger); }
.dd-list {
  position: fixed; z-index: 65; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--input-border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); outline: none;
  animation: dd-in .12s ease-out;
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 42px; padding: 0 12px; border-radius: 10px; font-size: 15px; cursor: pointer; user-select: none;
}
.dd-list li.is-active { background: var(--surface-2); }
.dd-list li[aria-selected="true"] { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.dd-list li[aria-disabled="true"] { color: var(--text-3); opacity: .55; cursor: not-allowed; }
.dd-check { flex-shrink: 0; }
.dd-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 긴 항목(긴 닉네임 등)은 한 줄 + … */
@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } .dd-arrow { transition: none; } }
.callback-msg b { color: var(--text); }

/* ---------- 롤 티어 글자 색 ---------- */
.tier { font-weight: 700; }
.tier-iron { color: var(--tier-iron); } .tier-bronze { color: var(--tier-bronze); } .tier-silver { color: var(--tier-silver); }
.tier-gold { color: var(--tier-gold); } .tier-platinum { color: var(--tier-platinum); } .tier-emerald { color: var(--tier-emerald); }
.tier-diamond { color: var(--tier-diamond); } .tier-master { color: var(--tier-master); }
.tier-grandmaster { color: var(--tier-grandmaster); } .tier-challenger { color: var(--tier-challenger); }
/* 챌린저 글자: 골드와 구분되게 금색 → 하늘색 */
.tier-challenger { background: linear-gradient(90deg, var(--tier-challenger) 15%, #3fa9f5 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] .tier-challenger { background-image: linear-gradient(90deg, var(--tier-challenger) 15%, #6cc6ff 85%); }
.tier-none { color: var(--text-3); font-weight: 500; }

/* ---------- 마우스를 올리면 뜨는 짧은 이름표 (data-tip) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 5px 9px; border-radius: 8px; background: var(--tooltip-bg); color: var(--tooltip-text);
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 5;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip-wide[data-tip]::after { white-space: normal; width: 260px; line-height: 1.5; text-align: left; font-weight: 500; }   /* 긴 설명용 말풍선 */

/* =========================================================
   직접 만든 SVG 아이콘 (content/icon/*.svg)
   - 파일 모양을 '틀'로만 쓰고 색은 글자색(currentColor)을 칠함 → 낮 · 야간 한 장으로 씀
   - 아이콘을 바꾸려면 같은 이름의 SVG 파일만 덮어쓰면 됨
   - 사용: <span class="svg-icon i-invite ic-24" aria-hidden="true"></span>
   ========================================================= */
.svg-icon { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.svg-icon.ic-18 { width: 18px; height: 18px; }
.svg-icon.ic-20 { width: 20px; height: 20px; }
.svg-icon.ic-22 { width: 22px; height: 22px; }
.svg-icon.ic-24 { width: 24px; height: 24px; }
.i-invite      { -webkit-mask-image: url("../icon/invite_icon.svg?v=2e72068277");      mask-image: url("../icon/invite_icon.svg?v=2e72068277"); }
.i-team-member { -webkit-mask-image: url("../icon/team_member_icon.svg?v=eeb247b569"); mask-image: url("../icon/team_member_icon.svg?v=eeb247b569"); }
.i-dark-switch { -webkit-mask-image: url("../icon/dark_switch.svg?v=b1b9f9c429");      mask-image: url("../icon/dark_switch.svg?v=b1b9f9c429"); }
.i-light-switch{ -webkit-mask-image: url("../icon/light_switch.svg?v=d733c70c83");     mask-image: url("../icon/light_switch.svg?v=d733c70c83"); background-color: var(--accent); }   /* 해는 청록색 */
.i-refresh     { -webkit-mask-image: url("../icon/refresh_icon.svg?v=e7a9e61276");     mask-image: url("../icon/refresh_icon.svg?v=e7a9e61276"); }
.i-friend      { -webkit-mask-image: url("../icon/friend_icon.svg?v=b2eaf6e212");      mask-image: url("../icon/friend_icon.svg?v=b2eaf6e212"); }
.i-setting     { -webkit-mask-image: url("../icon/setting_icon.svg?v=0acd58a351");     mask-image: url("../icon/setting_icon.svg?v=0acd58a351"); }
/* 메뉴: 프로필 · 친구 (전용 아이콘 파일이 오면 이 두 줄의 파일 이름만 바꾸면 됨) */
.i-nav-profile { -webkit-mask-image: url("../icon/profile_icon.svg?v=9cfff6d3bd");     mask-image: url("../icon/profile_icon.svg?v=9cfff6d3bd"); }       /* 프로필 페이지: 프로필 수정 */
.i-nav-friends { -webkit-mask-image: url("../icon/team_member_icon.svg?v=eeb247b569"); mask-image: url("../icon/team_member_icon.svg?v=eeb247b569"); }   /* 프로필 페이지: 친구 관리 */
.i-link        { -webkit-mask-image: url("../icon/link_icon.svg?v=12358b816f");        mask-image: url("../icon/link_icon.svg?v=12358b816f"); }          /* 링크 복사 */
.i-gavel       { -webkit-mask-image: url("../icon/main_another__icon.svg?v=65f31fcedc"); mask-image: url("../icon/main_another__icon.svg?v=65f31fcedc");
                 -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: left center; mask-position: left center; }   /* 파일 캔버스가 가로로 길어서(3750×1000) 그림이 있는 왼쪽 정사각형만 */

/* ---------- 티어 테두리 (롤 방 · 프로필) ----------
   모양 = content/icon/tier_outline_big_.svg · tier_outline_small_.svg (512 캔버스, 가운데 440이 사진 자리)
   색 = 티어 색, 명암 = 왼쪽 위에서 빛 (위 > 왼쪽 > 오른쪽 > 아래 변 순으로 밝음) + 변 가운데로 갈수록 살짝 어둡게 */
.tframe { position: relative; display: block; flex-shrink: 0; --tier-c: transparent; }
.tframe.tf-big { width: 156px; height: 156px; }
.tframe.tf-small { width: 60px; height: 60px; }
.tframe > :not(.tframe-line) { position: absolute; inset: 7.03%; width: auto; height: auto; margin: 0; border-radius: 3px; }   /* 36 / 512 */
.tframe.tf-none > * { border-radius: 10px; }   /* 언랭크: 테두리 없이 둥근 사진 */
.tframe-line { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../icon/tier_outline_big_.svg?v=9f3565e291") center / 100% 100% no-repeat; mask: url("../icon/tier_outline_big_.svg?v=9f3565e291") center / 100% 100% no-repeat;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.22) 0 52%, rgba(0, 0, 0, 0) 92%),
    conic-gradient(from -45deg,
      color-mix(in srgb, var(--tier-c), #fff 38%) 0 90deg,      /* 위 */
      color-mix(in srgb, var(--tier-c), #000 22%) 90deg 180deg, /* 오른쪽 */
      color-mix(in srgb, var(--tier-c), #000 40%) 180deg 270deg,/* 아래 */
      color-mix(in srgb, var(--tier-c), #fff 18%) 270deg 360deg);/* 왼쪽 */
}
.tframe.tf-small .tframe-line { -webkit-mask-image: url("../icon/tier_outline_small_.svg?v=0b3cbd79b8"); mask-image: url("../icon/tier_outline_small_.svg?v=0b3cbd79b8"); }
.tf-iron { --tier-c: var(--tier-iron); } .tf-bronze { --tier-c: var(--tier-bronze); } .tf-silver { --tier-c: var(--tier-silver); }
.tf-gold { --tier-c: var(--tier-gold); } .tf-platinum { --tier-c: var(--tier-platinum); } .tf-emerald { --tier-c: var(--tier-emerald); }
.tf-diamond { --tier-c: var(--tier-diamond); } .tf-master { --tier-c: var(--tier-master); } .tf-grandmaster { --tier-c: var(--tier-grandmaster); }
.tf-challenger { --tier-c: var(--tier-challenger); }
/* 챌린저: 골드와 구분되게 금색 → 하늘색으로 넘어가는 테두리 + 하늘색 빛 */
.tf-challenger { --tier-c2: #3fa9f5; }
[data-theme="dark"] .tf-challenger { --tier-c2: #6cc6ff; }
.tf-challenger .tframe-line { background:
    radial-gradient(circle, rgba(0, 0, 0, 0.18) 0 52%, rgba(0, 0, 0, 0) 92%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--tier-c), #fff 45%) 0%,
      var(--tier-c) 32%,
      color-mix(in srgb, var(--tier-c), #fff 65%) 48%,     /* 가운데는 밝게 (금 + 파랑을 섞으면 탁해져서) */
      color-mix(in srgb, var(--tier-c2), #fff 55%) 56%,
      var(--tier-c2) 76%,
      color-mix(in srgb, var(--tier-c2), #000 30%) 100%); }
/* 다이아몬드 이상: 은은한 빛 */
.tf-diamond, .tf-master, .tf-grandmaster, .tf-challenger { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tier-c), transparent 45%)); }
.tf-small.tf-diamond, .tf-small.tf-master, .tf-small.tf-grandmaster, .tf-small.tf-challenger { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tier-c), transparent 45%)); }
.tf-challenger { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tier-c2), transparent 35%)); }
.tf-small.tf-challenger { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tier-c2), transparent 35%)); }

/* 화면에는 안 보이고 화면 낭독기만 읽는 글자 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 롤 라인 아이콘 (content/icon/lane_*.svg, 같은 이름으로 덮어쓰면 교체) ----------
   색 = 사이트 청록, 파일 안의 반투명 부분은 자동으로 연한 청록 */
.lane-ic { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; vertical-align: -4px; background-color: var(--accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.lane-ic.is-sm { width: 15px; height: 15px; vertical-align: -3px; }
.lane-ic.is-lg { width: 24px; height: 24px; }
.lane-TOP     { -webkit-mask-image: url("../icon/lane_top.svg?v=b3e0b40583");     mask-image: url("../icon/lane_top.svg?v=b3e0b40583"); }
.lane-JUNGLE  { -webkit-mask-image: url("../icon/lane_jungle.svg?v=417870a435");  mask-image: url("../icon/lane_jungle.svg?v=417870a435"); }
.lane-MID     { -webkit-mask-image: url("../icon/lane_mid.svg?v=9c979a97a6");     mask-image: url("../icon/lane_mid.svg?v=9c979a97a6"); }
.lane-ADC     { -webkit-mask-image: url("../icon/lane_bottom.svg?v=1b6ab18088");  mask-image: url("../icon/lane_bottom.svg?v=1b6ab18088"); }
.lane-SUPPORT { -webkit-mask-image: url("../icon/lane_support.svg?v=2a63fe46e9"); mask-image: url("../icon/lane_support.svg?v=2a63fe46e9"); }
.lane-FILL    { -webkit-mask-image: url("../icon/lane_all.svg?v=d6a9a81cbc");     mask-image: url("../icon/lane_all.svg?v=d6a9a81cbc"); }
.lane-tx { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }   /* 아이콘 + 라인 이름 */
.dd-text .lane-ic, .dd-list .lane-ic { margin-right: 6px; }

/* ===== 연결 문제 안내 팝업 (netcheck.js) · 모든 페이지 공통 ===== */
.nc-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nc-box { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 20px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.nc-box h2 { margin: 0; font-size: 20px; text-align: center; word-break: keep-all; }
.nc-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); text-align: center; word-break: keep-all; white-space: pre-line; }
.nc-desc.is-bad { color: var(--text); background: var(--danger-soft); border-radius: 12px; padding: 12px 14px; }
.nc-desc.is-ok { color: var(--text); background: var(--play-soft); border-radius: 12px; padding: 12px 14px; }
.nc-list { list-style: none; margin: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px; }
.nc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.nc-row:last-child { border-bottom: 0; }
.nc-st { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.nc-st.ok { background: var(--play-soft); color: var(--play); }
.nc-st.bad { background: var(--danger-soft); color: var(--danger); }
.nc-st.wait { background: var(--chip); color: var(--text-3); }
.nc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-t b { font-size: 14px; }
.nc-t span { font-size: 12px; color: var(--text-3); }
.nc-r { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.nc-r.ok { color: var(--play); } .nc-r.bad { color: var(--danger); } .nc-r.wait { color: var(--text-3); }
.nc-dev { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nc-dev span { background: var(--chip); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.nc-reload { width: 100%; }