/* 제목용 공고딕. 한글 전 영역 + 라틴을 담은 서브셋이다.
   베트남어 성조 부호(ế, ự …)가 없어 vi 에서는 본문 폰트를 그대로 쓴다. */
@font-face{
  font-family:"Gong Gothic";
  src:url("gong-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gong Gothic";
  src:url("gong-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
    --ground:#E3DCCD;
    --surface:#F3EFE6;
    --surface-2:#EAE4D6;
    --ink:#231D17;
    --ink-2:#5E554A;
    --ink-3:#877D6F;
    --rule:#CCC2AE;
    --rule-soft:#D9D1BF;
    --brass:#8E7220;
    --sq-a:#2E7A4E;
    --sq-b:#AC3830;
    --sq-c:#2A5B99;
    --sq-d:#B96820;
    --sq-a-wash:#DCE8DF;
    --sq-b-wash:#EFDDDA;
    --sq-c-wash:#DBE3EE;
    --sq-d-wash:#F0E1D2;
    --shadow:0 1px 2px rgba(35,29,23,.07), 0 8px 22px -14px rgba(35,29,23,.30);

    --display:"Gong Gothic",var(--sans);
    --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"D2Coding","Noto Sans Mono",monospace;

    --step--1:clamp(.75rem,.73rem + .1vw,.8rem);
    --step-0:clamp(.94rem,.91rem + .16vw,1rem);
    --step-1:clamp(1.05rem,1rem + .26vw,1.19rem);
    --step-2:clamp(1.24rem,1.13rem + .5vw,1.6rem);
    --step-4:clamp(1.85rem,1.35rem + 2.3vw,3.4rem);

    --gut:clamp(1rem,4vw,2.5rem);
    --tap:2.75rem;
  }

  @media (prefers-color-scheme:dark){
    :root{
      --ground:#17130F; --surface:#211C17; --surface-2:#2A241D;
      --ink:#EDE6D8; --ink-2:#A79C8B; --ink-3:#847A6C;
      --rule:#3A322A; --rule-soft:#2F2820; --brass:#D3AD4C;
      --sq-a:#63B287; --sq-b:#E2766C; --sq-c:#77A3D9; --sq-d:#E09A52;
      --sq-a-wash:#1E2B23; --sq-b-wash:#31201D; --sq-c-wash:#1D2733; --sq-d-wash:#312417;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ground:#17130F; --surface:#211C17; --surface-2:#2A241D;
    --ink:#EDE6D8; --ink-2:#A79C8B; --ink-3:#847A6C;
    --rule:#3A322A; --rule-soft:#2F2820; --brass:#D3AD4C;
    --sq-a:#63B287; --sq-b:#E2766C; --sq-c:#77A3D9; --sq-d:#E09A52;
    --sq-a-wash:#1E2B23; --sq-b-wash:#31201D; --sq-c-wash:#1D2733; --sq-d-wash:#312417;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  }
  :root[data-theme="light"]{
    --ground:#E3DCCD; --surface:#F3EFE6; --surface-2:#EAE4D6;
    --ink:#231D17; --ink-2:#5E554A; --ink-3:#877D6F;
    --rule:#CCC2AE; --rule-soft:#D9D1BF; --brass:#8E7220;
    --sq-a:#2E7A4E; --sq-b:#AC3830; --sq-c:#2A5B99; --sq-d:#B96820;
    --sq-a-wash:#DCE8DF; --sq-b-wash:#EFDDDA; --sq-c-wash:#DBE3EE; --sq-d-wash:#F0E1D2;
    --shadow:0 1px 2px rgba(35,29,23,.07), 0 8px 22px -14px rgba(35,29,23,.30);
  }

  html[lang="ar"]{
    --sans:"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",Roboto,sans-serif;
    --display:var(--sans);
    --mono:var(--sans);
  }
  html[lang="ar"] *{ letter-spacing:0 !important; }   /* 글자 사이를 벌리면 아랍 글자의 연결이 끊긴다 */
  html[lang="vi"]{ --display:var(--sans); }   /* 성조 부호가 빠져 섞여 보인다 */


*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.55;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
a{ color:inherit; }
button,input,select{ font:inherit; }
.wrap{
  width:100%; max-width:64rem; margin-inline:auto;
  padding-inline:max(var(--gut), env(safe-area-inset-left));
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }
bdi{ unicode-bidi:isolate; }

/* ---------- 머리 ---------- */
.masthead{ padding:clamp(1.25rem,4vw,2.5rem) 0 0; border-bottom:2px solid var(--ink); }
.topline{ display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.eyebrow{ margin:0; font-family:var(--mono); font-size:var(--step--1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); }
.masthead h1{ font-family:var(--display); font-size:var(--step-4); line-height:1.05;
  letter-spacing:-.03em; font-weight:700; margin:0 0 1rem; text-wrap:balance; }
html[lang="vi"] .masthead h1{ font-family:var(--sans); }

.langpick{ display:flex; gap:.3rem; margin-inline-start:auto; }
.langpick select, .eventpick select{
  min-height:var(--tap); max-width:11rem; padding:.45rem 1.7rem .45rem .6rem;
  font-family:var(--mono); font-size:.8rem; color:var(--ink-2);
  background-color:var(--surface);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  border:1.5px solid var(--rule); border-radius:4px; appearance:none; -webkit-appearance:none; cursor:pointer;
}
[dir="rtl"] .langpick select, [dir="rtl"] .eventpick select{
  padding:.45rem .6rem .45rem 1.7rem; background-position:14px 50%, 9px 50%; }
.langgo{ min-height:var(--tap); padding:.4rem .6rem; background:var(--surface); color:var(--ink-2);
  border:1.5px solid var(--rule); border-radius:4px; cursor:pointer; }

.tabs{ display:flex; flex-wrap:wrap; gap:.25rem; }
.tab{
  display:inline-flex; align-items:center; min-height:var(--tap); padding:.4rem .95rem;
  text-decoration:none; font-weight:600; color:var(--ink-2);
  border:1.5px solid transparent; border-bottom:0; border-radius:6px 6px 0 0;
}
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ground); background:var(--ink); }
.tab.ext{ margin-inline-start:auto; font-weight:500; font-size:.9rem; color:var(--ink-3); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* ---------- 요약 ---------- */
.summary{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:flex-end; padding:1.25rem 0; }
.stat{ display:flex; flex-direction:column; }
.stat-k{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.stat-v{ font-family:var(--display); font-size:var(--step-2); font-weight:700; font-variant-numeric:tabular-nums; }
.stat-v.small{ font-family:var(--mono); font-size:var(--step-1); font-weight:500; }
.eventpick{ display:flex; flex-direction:column; gap:.2rem; }
.empty{ color:var(--ink-3); margin:1rem 0; }

.searchbar{ position:sticky; top:0; z-index:2; padding:.5rem 0; background:var(--ground); }
.search{
  width:100%; min-height:var(--tap); padding:.5rem .8rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--rule); border-radius:4px;
}

/* ---------- 등급 배지 ---------- */
.rank{
  display:inline-flex; justify-content:center; align-items:center; min-width:2.4rem; padding:.05rem .35rem;
  font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink-2); background:var(--surface-2); border-radius:3px;
}
.rank-r5{ color:var(--ground); background:var(--brass); }
.rank-r4{ color:var(--ground); background:var(--sq-b); }
.rank-r3{ color:var(--ground); background:var(--sq-c); }
.rank-r2{ color:var(--ground); background:var(--sq-a); }
.rank-r1{ color:var(--ink); background:var(--rule); }

/* ---------- 연맹원 표 ---------- */
.rankgroup{ margin:1.25rem 0 1.75rem; }
.rank-h{ display:flex; align-items:center; gap:.6rem; margin:0 0 .4rem; font-size:var(--step-1); }
.rank-h .rank{ font-size:.95rem; padding:.15rem .5rem; }
.count{ font-family:var(--mono); font-size:var(--step--1); font-weight:500; color:var(--ink-3); }
.roster{ width:100%; border-collapse:collapse; background:var(--surface); box-shadow:var(--shadow); border-radius:6px; overflow:hidden; }
.roster th{ text-align:start; font-family:var(--mono); font-size:var(--step--1); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); padding:.5rem .8rem; border-bottom:1.5px solid var(--rule); }
.roster td{ padding:.5rem .8rem; border-bottom:1px solid var(--rule-soft); }
.roster tr:last-child td{ border-bottom:0; }
.roster .name{ width:100%; font-weight:600; overflow-wrap:anywhere; }
.num{ text-align:end; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.roster th.num{ text-align:end; }
.since{ color:var(--ink-3); }
@media (max-width:30rem){ .since{ display:none; } }

/* ---------- 최근 변동 ---------- */
.recent{ margin:2.5rem 0; }
.recent h2, .missing h2{ font-size:var(--step-1); margin:0 0 .6rem; }
.events{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.ev{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.4rem .7rem;
  background:var(--surface); border-radius:4px; }
.ev-k{ font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  min-width:5.5rem; }
.ev-joined .ev-k, .ev-rejoined .ev-k{ color:var(--sq-a); }
.ev-left .ev-k{ color:var(--sq-b); }
.ev-rank .ev-k{ color:var(--sq-c); }
.ev-n{ font-weight:600; }
.ev-d{ font-family:var(--mono); font-size:.85rem; color:var(--ink-2); }
.ev-t{ margin-inline-start:auto; font-family:var(--mono); font-size:.8rem; color:var(--ink-3); }

/* ---------- 협곡전 ---------- */
.teams{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.25rem; margin:.5rem 0 2rem; }
.team{ background:var(--surface); border-radius:6px; box-shadow:var(--shadow); padding:1rem 1rem .6rem;
  border-top:4px solid var(--sq-c); }
.team-2{ border-top-color:var(--sq-d); }
.team-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem;
  margin:0 0 .6rem; font-family:var(--display); font-size:var(--step-2); }
html[lang="vi"] .team-h{ font-family:var(--sans); }
.entries{ list-style:none; margin:0; padding:0; counter-reset:e; }
.entry{ display:flex; align-items:center; gap:.55rem; padding:.42rem 0; border-bottom:1px solid var(--rule-soft); counter-increment:e; }
.entry:last-child{ border-bottom:0; }
.entry::before{ content:counter(e); min-width:1.6rem; font-family:var(--mono); font-size:.78rem; color:var(--ink-3); }
.entry .name{ font-weight:600; overflow-wrap:anywhere; }
.entry .num{ margin-inline-start:auto; }
.entry.unknown .name{ color:var(--ink-2); }
.flag{ font-size:.72rem; padding:.05rem .4rem; color:var(--sq-b); border:1px solid currentColor; border-radius:3px; white-space:nowrap; }
.missing{ margin:0 0 2.5rem; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.mchip{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem .3rem .35rem;
  background:var(--surface); border-radius:4px; font-weight:500; }

/* ---------- 접근 코드 ---------- */
.gate{ padding-block:clamp(1.5rem,5vw,2.75rem) 3rem; max-width:32rem; }
.gate-lead{ margin:0 0 1.25rem; color:var(--ink-2); }
.gate-form{ display:flex; gap:.5rem; }
.gate-input{ flex:1 1 auto; min-width:0; min-height:var(--tap); padding:.5rem .8rem;
  font-family:var(--mono); letter-spacing:.1em; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--rule); border-radius:4px; }
.gate-input[aria-invalid="true"]{ border-color:var(--sq-b); }
.gate-go{ flex:0 0 auto; min-height:var(--tap); padding:.5rem 1.1rem; font-weight:700;
  color:var(--ground); background:var(--ink); border:0; border-radius:4px; cursor:pointer; }
.gate-msg{ margin:1rem 0 0; color:var(--sq-b); font-weight:600; }

/* ---------- 바닥 ---------- */
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding-block:1.25rem 2rem;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:var(--step--1); color:var(--ink-3); }
.agent{ display:inline-flex; align-items:center; gap:.4rem; }
.dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--ink-3); }
.agent-ok .dot{ background:var(--sq-a); }
.agent-off .dot{ background:var(--sq-b); }