:root{
  --bg:#070a0f;
  --panel:#0f1522;
  --panel2:#0b111c;
  --text:#e9eef7;
  --muted:#a9b6c7;
  --line:#1f2a3d;
  --accent:#4da3ff;
  --accent2:#53d28c;
  --shadow: 0 16px 40px rgba(0,0,0,.45);
  --radius:18px;
  --news-panel-width:1160px;
}
html{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f6fb;
  --panel:#ffffff;
  --panel2:#f7f9fc;
  --text:#172033;
  --muted:#5f6f84;
  --line:#d6deea;
  --accent:#1769c2;
  --accent2:#168452;
  --shadow:0 16px 40px rgba(34,54,80,.14);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(77,163,255,.16), transparent 60%),
    radial-gradient(800px 500px at 85% 0%, rgba(83,210,140,.12), transparent 55%),
    var(--bg);
  line-height:1.65;
  transition:color .18s ease,background-color .18s ease;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{
  position:fixed;
  top:8px;
  left:50%;
  z-index:100;
  padding:9px 14px;
  border:1px solid var(--accent);
  border-radius:10px;
  background:var(--panel2);
  color:var(--text);
  font-weight:700;
  transform:translate(-50%,-160%);
  transition:transform .15s ease;
}
.skip-link:focus{transform:translate(-50%,0); text-decoration:none}
.wrap:focus{outline:none}

.wrap{max-width:980px; margin:0 auto; padding:18px 18px 70px; transition:max-width .2s ease,width .12s ease}
body[data-active-tab="guide"] .wrap{max-width:1160px}
body[data-active-tab="news"] .wrap{
  width:min(var(--news-panel-width),calc(100vw - 36px));
  max-width:none;
}
body[data-active-tab="skins"] .wrap{max-width:1500px}
body[data-active-tab="support"] .wrap{max-width:1160px}
body.news-resizing{cursor:ew-resize; user-select:none}
body.news-resizing .wrap{transition:none}
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(7,10,15,.75);
  border-bottom:1px solid rgba(31,42,61,.8);
}
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  max-width:980px;
  margin:0 auto;
}
.title{
  display:flex; flex-direction:column; gap:2px;
}
.title h1{margin:0; font-size:16px; letter-spacing:.2px}
.title p{margin:0; font-size:12px; color:var(--muted)}
.social-links{display:flex; align-items:center; gap:3px}
.social-link{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.social-link svg{width:21px; height:21px; fill:currentColor}
.social-link:hover,.social-link:focus-visible{
  border-color:rgba(77,163,255,.35);
  background:rgba(77,163,255,.1);
  color:var(--text);
  text-decoration:none;
  transform:translateY(-1px);
}
.discord-link:hover,.discord-link:focus-visible{color:#8c96ff}

.card{
  margin-top:18px;
  background: rgba(15,21,34,.86);
  border:1px solid rgba(31,42,61,.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Tabs */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px;
  background: rgba(11,17,28,.65);
  border-bottom:1px solid rgba(31,42,61,.8);
}
.tab{
  appearance:none;
  border:1px solid rgba(31,42,61,.9);
  background: rgba(7,10,15,.25);
  color:var(--muted);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition: .15s ease;
}
.tab:hover{
  filter: brightness(1.1);
  color: var(--text);
  border-color: rgba(77,163,255,.25);
  background: rgba(77,163,255,.08);
}
.tab.active{
  color: var(--text);
  border-color: rgba(77,163,255,.45);
  background: rgba(77,163,255,.14);
}

.battlepass-link{text-decoration:none; display:inline-flex; align-items:center}

.global-search-wrap{
  padding:16px 16px 0;
}
body[data-active-tab="skins"] .global-search-wrap,
body[data-active-tab="support"] .battlepass-link{text-decoration:none; display:inline-flex; align-items:center}

.global-search-wrap{display:none}
.global-search-wrap .term-search{margin-bottom:0}
.global-search-results{margin-top:8px}
.global-search-summary{
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
}
.global-search-list{
  display:grid;
  gap:10px;
  margin:0 0 12px;
}
.global-search-group,
.global-search-item{--search-rgb:77,163,255}
[data-search-type="command"]{--search-rgb:83,210,140}
[data-search-type="rule"]{--search-rgb:255,104,104}
[data-search-type="term"]{--search-rgb:194,140,255}
[data-search-type="news"]{--search-rgb:255,180,84}
[data-search-type="skin"]{--search-rgb:255,122,168}
.global-search-group{
  display:grid;
  gap:7px;
  padding:9px;
  border:1px solid rgba(var(--search-rgb),.24);
  border-radius:12px;
  background:rgba(var(--search-rgb),.035);
}
.global-search-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px;
}
.global-search-group-header h3{
  margin:0;
  color:rgb(var(--search-rgb));
  font-size:12px;
  font-weight:800;
}
.global-search-group-count{
  display:grid;
  min-width:24px;
  height:20px;
  padding:0 6px;
  place-items:center;
  border-radius:999px;
  color:rgb(var(--search-rgb));
  background:rgba(var(--search-rgb),.13);
  font-size:10px;
  font-weight:800;
}
.global-search-group-list{display:grid; gap:6px}
.global-search-results button.global-search-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 10px;
  width:100%;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(var(--search-rgb),.24);
  border-left:3px solid rgba(var(--search-rgb),.72);
  border-radius:10px;
  background-color:rgba(7,10,15,.46);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.global-search-results button.global-search-item:hover{
  border-color:rgba(var(--search-rgb),.68);
  background-color:rgba(var(--search-rgb),.09);
}
.global-search-type{
  grid-row:1 / span 2;
  align-self:start;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(var(--search-rgb),.14);
  color:rgb(var(--search-rgb));
  font-size:11px;
  font-weight:700;
}
.global-search-title{font-weight:750}
.global-search-snippet{color:var(--muted); font-size:12px}

.panel{display:none; padding:16px}
.panel.active{display:block}

.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;
  margin:4px 0 12px;
}
.section-title h2{margin:0; font-size:25px}
.hint{font-size:12px; color:var(--muted)}
#skins .section-title{align-items:center; flex-wrap:wrap}
.skin-section-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-left:auto;
}
.skin-admin-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:6px 11px;
  border:1px solid rgba(77,163,255,.4);
  border-radius:999px;
  background:rgba(77,163,255,.1);
  color:var(--text);
  font-size:12px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,filter .15s ease;
}
.skin-admin-link::after{content:"↗"; color:var(--accent); font-size:12px}
.skin-admin-link:hover,.skin-admin-link:focus-visible{
  border-color:rgba(77,163,255,.72);
  background:rgba(77,163,255,.2);
  filter:brightness(1.08);
}

.rules-content{
  display:grid;
  gap:14px;
}
.rules-warning{
  padding:13px 15px;
  border:1px solid rgba(255,104,104,.42);
  border-left:4px solid rgb(255,104,104);
  border-radius:12px;
  background:rgba(255,104,104,.09);
  color:var(--text);
  font-weight:700;
}
.rules-section{
  padding:15px;
  border:1px solid rgba(31,42,61,.9);
  border-radius:14px;
  background:rgba(7,10,15,.28);
}
.rules-section > h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:18px;
}
.rules-list{
  display:grid;
  gap:9px;
  margin:0;
  padding-left:28px;
}
.rules-list > li::marker{
  color:rgb(255,130,130);
  font-weight:800;
}
.rule-item{
  padding:11px 12px;
  border:1px solid rgba(31,42,61,.78);
  border-radius:11px;
  background:rgba(15,21,34,.62);
}
.rule-item-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.rule-item h4{
  margin:0;
  color:var(--text);
  font-size:14px;
}
.rule-item p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.65;
}
.rule-share{
  flex:0 0 auto;
}
.rules-examples{
  list-style-type:"–  ";
}
.rules-note,
.rules-other p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.65;
}
.rules-note{
  padding-top:12px;
  border-top:1px solid rgba(31,42,61,.72);
}
.rules-other{
  border-color:rgba(255,180,84,.34);
  background:rgba(255,180,84,.055);
}
.rules-other > h3{color:rgb(255,190,105)}
.rules-other p{margin:0}
.rules-loading{
  margin:0;
  color:var(--muted);
}

.quick-start{
  margin:0 0 16px;
  padding:14px;
  border:1px solid rgba(77,163,255,.3);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(77,163,255,.1),rgba(7,10,15,.2));
}
.quick-start:empty{display:none}
.quick-start-heading{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.quick-start-heading h3{margin:0; color:var(--text); font-size:17px}
.quick-start-heading p{margin:0; color:var(--muted); font-size:12px}
.quick-start-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.quick-start-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 8px;
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(11,17,28,.5);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.quick-start-item:hover,.quick-start-item:focus-visible{border-color:rgba(77,163,255,.65); background:rgba(77,163,255,.09)}
.quick-start-badge{grid-row:1 / span 2; align-self:start; padding:2px 6px; border-radius:999px; background:rgba(77,163,255,.14); color:var(--accent); font-size:10px; font-weight:750}
.quick-start-item strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px}
.quick-start-snippet{display:-webkit-box; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2}

.latest-news-preview{
  margin:0 0 16px;
  padding:14px;
  border:1px solid rgba(255,180,84,.34);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,180,84,.1),rgba(7,10,15,.2));
}
.latest-news-preview:empty{display:none}
.latest-news-preview-header{display:flex; align-items:center; justify-content:space-between; gap:14px}
.latest-news-preview-header h3{margin:0; color:var(--text); font-size:17px}
.latest-news-preview-header p{margin:4px 0 0; color:var(--muted); font-size:12px}
.latest-news-open-tab{
  flex:none;
  padding:7px 11px;
  border:1px solid rgba(255,180,84,.4);
  border-radius:999px;
  background:rgba(255,180,84,.1);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.latest-news-open-tab:hover,.latest-news-open-tab:focus-visible{border-color:rgb(255,180,84); color:rgb(255,200,125)}
.latest-news-details{margin:12px 0 0}
.latest-news-details:not([open]) > summary{margin-bottom:-2px; border-bottom-color:transparent}
.latest-news-details > summary strong{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.latest-news-details > summary time{flex:none; color:var(--muted); font-size:12px; font-weight:500}
.latest-news-body{padding:8px 2px 2px}
.latest-news-body .news-content{padding:14px 0 2px; border:0; background:transparent}

/* FAQ (Accordion) */
details{
  background: rgba(7,10,15,.25);
  border:1px solid rgba(31,42,61,.8);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0;
}

/* 질문(summary) - 헤더처럼 보이게 + 구분선 */
details > summary{
  cursor:pointer;
  font-weight:800;
  color: var(--text);
  outline:none;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;

  font-size: 17.5px; 

  /* ✨ 추가 */
  background: rgba(11,17,28,.45);
  padding:10px 12px;
  border-radius:10px;

  /* ✨ 추가: 답변과 분리 */
  margin:-2px -2px 8px;                 /* 배경이 더 꽉 차 보이게 */
  border-bottom:1px solid rgba(31,42,61,.75);
  transition:background-color .15s ease,border-color .15s ease;
}

details > summary:focus-visible{
  border-bottom-color:rgba(77,163,255,.65);
  background:rgba(77,163,255,.09);
}

details > summary::-webkit-details-marker{display:none}

.chev{
  color: var(--muted);
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(31,42,61,.85);
  background: rgba(11,17,28,.35);
  white-space:nowrap;
}
details[open] .chev{
  color: var(--text);
  border-color: rgba(77,163,255,.35);
  background: rgba(77,163,255,.10)
}

/* 답변 - 왼쪽 포인트 라인 + 여백 */
.answer{
  color: var(--muted);

  /* 기존 padding 대신 ✨ 이렇게 추천 */
  margin-top: 20px;
  padding: 8px 2px 2px 10px;
  border-left: 3px solid rgba(77,163,255,.35);
}

.answer code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(11,17,28,.55);
  border:1px solid rgba(31,42,61,.85);
  border-radius:10px;
  padding:2px 6px;
  color: var(--text);
  white-space:nowrap;
}

/* 여러 줄 코드용 */
.answer pre{
  margin: 10px 0 0;
  padding: 12px;              /* 박스 여백은 유지 */
  border-radius: 14px;
  border: 1px solid rgba(31,42,61,.85);
  background: rgba(11,17,28,.55);
  overflow-x: auto;
}

.answer pre code{
  display: block;
  padding-left: 0;
  margin-left: 0;      
  white-space: pre;
  background: none;
  border: none;
  text-indent: 0;             /* 혹시 모를 들여쓰기 제거 */
}

/* 명령어 테이블 헤더 글씨 키우기 */
table th{
  font-size: 18.5px;   /* 기본보다 살짝 큼 */
  font-weight: 700; 
}

/* 커맨드 테이블 */
.tablewrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(31,42,61,.85);
  background: rgba(7,10,15,.22);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}
th, td{
  padding:10px 10px;
  border-bottom:1px solid rgba(31,42,61,.75);
  border-right:1px solid rgba(31,42,61,.6);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
th{color:var(--muted); font-weight:700; background: rgba(11,17,28,.35)}
th:last-child, td:last-child{ border-right:none; }
.cmd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
  white-space:nowrap;
}
.tag{
  display:inline-block;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(31,42,61,.85);
  color: var(--muted);
  background: rgba(11,17,28,.35);
  margin-left:6px;
  white-space:nowrap;
}

footer{
  color: var(--muted);
  font-size:12px;
  padding:12px 16px;
  border-top:1px solid rgba(31,42,61,.75);
  background: rgba(11,17,28,.35);
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  justify-content:space-between;
}

:where(button,a,input,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
footer a{color:var(--accent)}

/* 명령어 목록 섹션 제목 */
.subhead{
  margin: 14px 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .2px;
}

.subhead.vip{
  color: #d6ffe9; /* 너무 튀면 var(--text)로 */
}

/* 섹션 설명 */
.subnote{
  margin: -6px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

/* (선택) VIP 테이블을 살짝 다른 톤으로 */
.vip-table th{
  border-bottom: 2px solid rgba(83,210,140,.35);
}

.lang{
  display:flex;
  gap:6px;
}

.theme-picker{
  display:flex;
  align-items:center;
  padding:2px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(11,17,28,.35);
}
.theme-option,
button.theme-option{
  display:grid;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  margin:0;
  padding:0;
  place-items:center;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-family:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.theme-option:hover,
.theme-option:focus-visible{background:rgba(77,163,255,.1); color:var(--text)}
.theme-option.active,
.theme-option[aria-pressed="true"]{background:rgba(77,163,255,.2); color:var(--accent)}

.langbtn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,42,61,.85);
  background: rgba(11,17,28,.35);
  color: var(--muted);
  font-size:12px;
  white-space:nowrap;
  cursor:pointer;
}

.related-links{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px}
.faq-related{clear:both; padding-top:10px; border-top:1px solid rgba(31,42,61,.7)}
.related-label{color:var(--muted); font-size:11px; font-weight:700}
.related-link{
  margin:0;
  padding:3px 8px;
  border:1px solid rgba(77,163,255,.35);
  border-radius:999px;
  background:rgba(77,163,255,.08);
  color:var(--text);
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.related-link:hover,.related-link:focus-visible{border-color:var(--accent); color:var(--accent)}

.langbtn.active{
  color: var(--text);
  border-color: rgba(77,163,255,.45);
  background: rgba(77,163,255,.14);
}

/* 코드 컨테이너 */
.code-container {
  position: relative;
}

/* 복사 버튼 스타일 */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(77, 163, 255, 0.15);
  border: 1px solid rgba(77, 163, 255, 0.4);
  color: var(--text);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  z-index: 10;
}

.copy-btn:hover {
  background: rgba(77, 163, 255, 0.3);
  border-color: var(--accent);
}

/* 복사 완료 스타일 */
.copy-btn.copied {
  background: rgba(83, 210, 140, 0.2);
  border-color: var(--accent2);
  color: var(--accent2);
}
/* 가이드 이미지 링크 */
.image-link {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(31,42,61,.85);
  border-radius: 8px;
  background: rgba(7,10,15,.22);
  color: var(--text);
  text-decoration: none;
}

.image-link:hover {
  border-color: rgba(77,163,255,.45);
  background: rgba(77,163,255,.08);
  text-decoration: none;
}

.image-link img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: rgba(7,10,15,.45);
}

.image-link span {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid rgba(31,42,61,.75);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.image-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
}

.image-link-button span {
  padding: 0;
  border-top: none;
}
.command-guide {
  display: grid;
  gap: 18px;
}
.command-tools{margin:0 0 18px}
.command-filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.command-filter{
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(11,17,28,.35);
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.command-filter.active{color:var(--text); border-color:var(--accent); background:rgba(77,163,255,.14)}
.favorite-filter{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px}
.favorite-filter input{margin:0}
.command-result-count{margin:7px 0 0; color:var(--muted); font-size:12px}

.command-page {
  padding: 14px;
  border: 1px solid rgba(31,42,61,.85);
  border-radius: 14px;
  background: rgba(7,10,15,.22);
}

.command-page-title {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--text);
}

.command-section {
  margin-top: 18px;
}

.command-section:first-of-type {
  margin-top: 0;
}

.command-section h4 {
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(31,42,61,.85);
  color: var(--text);
  font-size: 15px;
}

.command-list {
  display: grid;
  gap: 6px;
}

.command-row {
  display: grid;
  grid-template-columns: minmax(240px, 34%) 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 2px 0;
}
.command-actions{display:flex; gap:5px; align-items:center}
.command-action{
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(11,17,28,.45);
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
}
.command-action:hover,.command-action.favorite{color:var(--accent); border-color:rgba(77,163,255,.55)}
.share-button{display:inline-grid; place-items:center; width:26px; min-width:26px; height:26px; margin:0; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; box-shadow:none; color:var(--muted); font-size:15px; line-height:1; opacity:.42; cursor:pointer}
.share-button:hover,.share-button:focus-visible{color:var(--accent); border-color:rgba(77,163,255,.45); background:rgba(77,163,255,.08); box-shadow:none; opacity:1}
.faq-share{float:right; margin:0 0 6px 8px}
.term-row .share-button{float:right; margin:-3px 0 -3px 6px}
.term-row:hover .share-button{opacity:.85}
.deep-link-target{outline:2px solid rgba(77,163,255,.7); outline-offset:4px}

/* Recently viewed */
body.recent-views-open{overflow:hidden}
.recent-views-toggle,
button.recent-views-toggle{
  position:fixed;
  z-index:45;
  left:max(14px,env(safe-area-inset-left));
  bottom:max(22px,env(safe-area-inset-bottom));
  display:flex;
  width:auto;
  min-height:42px;
  margin:0;
  padding:8px 12px;
  align-items:center;
  gap:7px;
  border:1px solid rgba(77,163,255,.42);
  border-radius:999px;
  background:rgba(11,17,28,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  color:var(--text);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.recent-views-toggle:hover,
.recent-views-toggle:focus-visible,
button.recent-views-toggle:hover,
button.recent-views-toggle:focus-visible{
  border-color:var(--accent);
  background:rgba(21,53,89,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  transform:translateY(-1px);
}
.recent-views-toggle-icon{font-size:19px; font-weight:400; line-height:1}
.recent-views-backdrop{
  position:fixed;
  z-index:50;
  inset:0;
  background:rgba(0,0,0,.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s;
}
.recent-views-panel{
  position:fixed;
  z-index:55;
  inset:0 auto 0 0;
  display:flex;
  width:min(330px,calc(100vw - 36px));
  padding:20px 16px max(18px,env(safe-area-inset-bottom));
  flex-direction:column;
  border-right:1px solid rgba(77,163,255,.32);
  background:rgba(11,17,28,.985);
  box-shadow:24px 0 70px rgba(0,0,0,.55);
  transform:translateX(-105%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .2s ease,visibility .2s;
}
body.recent-views-open .recent-views-backdrop{opacity:1; visibility:visible; pointer-events:auto}
body.recent-views-open .recent-views-panel{transform:translateX(0); visibility:visible; pointer-events:auto}
.recent-views-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 2px 15px}
.recent-views-header h2{margin:0; color:var(--text); font-size:19px}
.recent-views-header p{margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45}
.recent-views-close,
button.recent-views-close{
  display:grid;
  width:34px;
  min-width:34px;
  height:34px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:23px;
  line-height:1;
  cursor:pointer;
}
.recent-views-close:hover,.recent-views-close:focus-visible{border-color:rgba(77,163,255,.45); background:rgba(77,163,255,.08); color:var(--text)}
.recent-views-list{display:grid; gap:8px; margin:0; padding:0; overflow:auto; list-style:none}
.recent-view-item{--recent-rgb:77,163,255; display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:5px}
.recent-view-item[data-recent-type="command"]{--recent-rgb:83,210,140}
.recent-view-item[data-recent-type="rule"]{--recent-rgb:255,104,104}
.recent-view-item[data-recent-type="term"]{--recent-rgb:194,140,255}
.recent-view-item[data-recent-type="news"]{--recent-rgb:255,180,84}
.recent-view-item[data-recent-type="skin"]{--recent-rgb:255,122,168}
.recent-view-item[data-recent-type="support"]{--recent-rgb:183,136,255}
.recent-view-open,
button.recent-view-open{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  width:100%;
  min-height:46px;
  margin:0;
  padding:8px 10px;
  align-items:center;
  border:1px solid rgba(var(--recent-rgb),.24);
  border-left:3px solid rgba(var(--recent-rgb),.72);
  border-radius:10px;
  background:rgba(7,10,15,.48);
  box-shadow:none;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.recent-view-open:hover,.recent-view-open:focus-visible{border-color:rgba(var(--recent-rgb),.68); background:rgba(var(--recent-rgb),.09)}
.recent-view-type{padding:2px 7px; border-radius:999px; background:rgba(var(--recent-rgb),.14); color:rgb(var(--recent-rgb)); font-size:10px; font-weight:800}
.recent-view-title{min-width:0; overflow:hidden; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap}
.recent-view-remove,
button.recent-view-remove{
  display:grid;
  width:32px;
  min-width:32px;
  height:100%;
  min-height:42px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
}
.recent-view-remove:hover,.recent-view-remove:focus-visible{border-color:rgba(255,104,104,.4); background:rgba(255,104,104,.08); color:#ff8f8f}
.recent-views-empty{margin:auto 0; padding:28px 12px; color:var(--muted); font-size:12px; text-align:center}
.recent-views-clear,
button.recent-views-clear{
  width:100%;
  min-height:38px;
  margin:auto 0 0;
  padding:8px 12px;
  border:1px solid rgba(255,104,104,.3);
  border-radius:9px;
  background:rgba(255,104,104,.06);
  box-shadow:none;
  color:#ffaaaa;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
}
.recent-views-clear:hover,.recent-views-clear:focus-visible{border-color:rgba(255,104,104,.6); background:rgba(255,104,104,.12)}

.back-to-top,
button.back-to-top{
  position:fixed;
  z-index:999;
  left:50%;
  bottom:max(22px,env(safe-area-inset-bottom));
  display:grid;
  width:46px;
  min-width:46px;
  height:46px;
  margin:0;
  padding:0;
  place-items:center;
  transform:translate(-50%,16px);
  border:1px solid rgba(77,163,255,.55);
  border-radius:999px;
  background:rgba(11,17,28,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  color:var(--text);
  font-size:23px;
  font-weight:700;
  line-height:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s,background-color .15s ease,border-color .15s ease;
}
.back-to-top.show,
button.back-to-top.show{transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto}
body.recent-views-open .back-to-top,
body.recent-views-open button.back-to-top{opacity:0; visibility:hidden; pointer-events:none}
.back-to-top:hover,
.back-to-top:focus-visible,
button.back-to-top:hover,
button.back-to-top:focus-visible{border-color:var(--accent); background:rgba(21,53,89,.96); box-shadow:0 12px 30px rgba(0,0,0,.38)}

.toast{position:fixed; z-index:1000; left:50%; bottom:24px; max-width:min(420px,calc(100vw - 32px)); padding:10px 14px; transform:translate(-50%,16px); border:1px solid rgba(77,163,255,.4); border-radius:10px; background:rgba(11,17,28,.96); box-shadow:0 12px 32px rgba(0,0,0,.35); color:var(--text); font-size:13px; text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s}
.toast.show{transform:translate(-50%,0); opacity:1; visibility:visible}
.back-to-top.show + .toast{bottom:82px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important}
}

.command-name {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.command-desc {
  color: var(--muted);
}

.command-desc::before {
  content: ": ";
  color: var(--muted);
}

.command-note {
  margin: -2px 0 4px;
  padding-left: calc(36% + 18px);
  color: var(--muted);
  font-size: 12px;
}

.command-loading {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 700px) {
  .recent-views-toggle,
  button.recent-views-toggle{width:46px; min-width:46px; height:46px; padding:0; justify-content:center}
  .recent-views-toggle-label{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .recent-views-panel{
    inset:auto 8px max(8px,env(safe-area-inset-bottom));
    width:auto;
    max-height:min(72dvh,620px);
    border:1px solid rgba(77,163,255,.32);
    border-radius:16px;
    box-shadow:0 -18px 60px rgba(0,0,0,.6);
    transform:translateY(calc(100% + 24px));
  }
  body.recent-views-open .recent-views-panel{transform:translateY(0)}

  .top {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .title {
    flex: 1 0 100%;
  }

  .lang {
    flex-wrap: wrap;
  }

  .quick-start-heading{display:block}
  .quick-start-heading p{margin-top:4px}
  .quick-start-list{grid-template-columns:1fr}
  .latest-news-preview-header{align-items:flex-start; flex-direction:column}
  .latest-news-details > summary{align-items:flex-start; flex-direction:column}

  .command-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .command-actions{justify-content:flex-start}

  .command-desc::before {
    content: "";
  }

  .command-note {
    padding-left: 0;
  }
}

.console-guide-image img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.server-connect-image img {
  width: auto;
  max-width: 100%;
}

/* 용어 사전 */

.term-search-label{
  display:block;
  margin:0 0 6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.term-search{
  appearance:none;
  display:block;
  width:100%;
  min-height:50px;
  margin:0 0 18px;
  padding:12px 16px 12px 44px;
  border:1px solid #2a3140;
  border-radius:999px;
  outline:none;
  background-color:#1c212c;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-position:18px 50%;
  background-repeat:no-repeat;
  background-size:16px;
  box-shadow:none;
  color:#e0e3e7;
  font:inherit;
  font-size:16px;
  line-height:24px;
  transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;
}
.term-search::placeholder{color:#8891a4; opacity:1}
.term-search:hover{border-color:#3b465b}
.term-search:focus{border-color:var(--accent); box-shadow:0 0 0 2px rgba(77,163,255,.2)}

.term-guide{
  display:grid;
  gap:18px;
}

.term-section{
  margin:0;
  padding:0;
  overflow:hidden;
}

.term-section h3{
  margin:0;
  padding:10px 13px;
  background:rgba(77,163,255,.11);
  color:var(--text);
  font-size:16px;
}

.term-table-wrap{margin:0}
.term-table{margin:0; min-width:760px}
.term-table th,.term-table td{
  padding:8px 16px;
  border-right:0;
  border-bottom:1px solid #202632;
}
.term-table.striped tbody tr:nth-child(odd) > *{background:rgba(111,120,135,.04)}
.term-table th{
  width:30%;
  min-width:240px;
  color:var(--text);
  font-weight:800;
  vertical-align:top;
}

.term-table td{color:var(--muted)}

.term-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.term-label{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:3px 7px;
  min-width:0;
}

.term-name{white-space:nowrap}

.term-alias-wrap{position:relative; flex:0 0 auto}

.term-alias-trigger{
  display:inline-grid;
  place-items:center;
  min-width:25px;
  height:21px;
  margin:0;
  padding:0 6px;
  border:1px solid rgba(77,163,255,.22);
  border-radius:999px;
  background:rgba(77,163,255,.07);
  box-shadow:none;
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  cursor:pointer;
}

.term-alias-trigger:hover,.term-alias-trigger:focus-visible{
  border-color:rgba(77,163,255,.55);
  background:rgba(77,163,255,.15);
  box-shadow:none;
}

.term-alias-popover{
  position:absolute;
  z-index:30;
  top:50%;
  left:calc(100% + 8px);
  width:max-content;
  max-width:320px;
  padding:7px 10px;
  transform:translate(4px,-50%);
  border:1px solid rgba(77,163,255,.45);
  border-radius:9px;
  background:rgba(11,17,28,.98);
  box-shadow:0 10px 28px rgba(0,0,0,.42);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}

.term-label:hover .term-alias-popover,
.term-alias-wrap:focus-within .term-alias-popover,
.term-alias-wrap.open .term-alias-popover{
  transform:translate(0,-50%);
  opacity:1;
  visibility:visible;
}

.term-notice,
.term-empty,
.term-loading{
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(31,42,61,.75);
  border-radius:12px;
  color:var(--muted);
  background:rgba(11,17,28,.28);
}

.term-footer{margin-top:18px}

/* Discord announcements */
#news{position:relative}

.news-resize-handle{
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  bottom:0;
  width:14px;
  border-radius:8px;
  cursor:ew-resize;
  touch-action:none;
  outline:none;
}

.news-resize-handle::after{
  position:absolute;
  top:50%;
  right:4px;
  width:4px;
  height:52px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(77,163,255,.28);
  content:"";
  transition:background-color .15s ease,box-shadow .15s ease;
}

.news-resize-handle:hover::after,
.news-resize-handle:focus-visible::after{
  background:rgba(77,163,255,.8);
  box-shadow:0 0 0 4px rgba(77,163,255,.12);
}

.news-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  min-width:0;
}

.news-item{
  min-width:0;
  margin:0;
  padding:16px;
  border:1px solid rgba(77,163,255,.24);
  border-radius:14px;
  background:rgba(7,10,15,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.14);
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

@media (hover:hover){
  details > summary:hover{
    border-bottom-color:rgba(77,163,255,.65);
    background:rgba(77,163,255,.09);
  }

  .news-item:hover{
    border-color:rgba(77,163,255,.62);
    background:rgba(77,163,255,.065);
    box-shadow:inset 0 0 0 1px rgba(77,163,255,.28),0 10px 30px rgba(0,0,0,.22);
  }
}

.news-item-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.news-item h3{
  margin:0;
  color:var(--text);
  font-size:19px;
}

.news-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}

.news-channel{
  color:var(--accent);
  font-weight:750;
}

.news-content{
  margin:12px 0;
  color:var(--text);
  line-height:1.7;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.news-content > :first-child{margin-top:0}
.news-content > :last-child{margin-bottom:0}
.news-content p{margin:0 0 10px}
.news-content h1,
.news-content h2,
.news-content h3{
  margin:18px 0 8px;
  color:var(--text);
  line-height:1.4;
}
.news-content h1{font-size:22px}
.news-content h2{font-size:20px}
.news-content h3{font-size:18px}
.news-content ul,
.news-content ol{margin:8px 0 12px; padding-left:26px}
.news-content li{margin:3px 0}
.news-content blockquote{
  margin:12px 0;
  padding:8px 14px;
  border-left:3px solid rgba(77,163,255,.55);
  color:var(--muted);
  background:rgba(77,163,255,.055);
}
.news-content blockquote > :first-child{margin-top:0}
.news-content blockquote > :last-child{margin-bottom:0}
.news-content code{
  padding:2px 6px;
  border:1px solid rgba(31,42,61,.9);
  border-radius:6px;
  background:rgba(11,17,28,.9);
  color:#d7e9ff;
  font-size:.9em;
}
.news-content pre{
  max-width:100%;
  margin:12px 0;
  padding:12px 14px;
  overflow-x:auto;
  border:1px solid rgba(31,42,61,.9);
  border-radius:10px;
  background:rgba(5,8,14,.85);
}
.news-content pre code{padding:0; border:0; background:none; white-space:pre}
.news-content hr{margin:18px 0; border:0; border-top:1px solid var(--line)}
.news-content a{overflow-wrap:anywhere}

.news-attachments{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,280px));
  gap:8px;
  margin:12px 0;
}

.news-attachments img{
  display:block;
  width:100%;
  max-height:240px;
  border:1px solid var(--line);
  border-radius:10px;
  object-fit:cover;
}

.news-original{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.news-empty{
  margin:0;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
}

/* Skin preview gallery */
.skin-tools{margin-bottom:14px}
.skin-tools .term-search{margin-bottom:4px}
.skin-filter-group{margin:0 0 14px}
.skin-filter-label{
  display:block;
  margin:0 0 6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.skin-filter-tabs{display:flex; flex-wrap:wrap; gap:8px}
.skin-filter{
  appearance:none;
  display:inline-flex;
  width:auto;
  min-height:38px;
  margin:0;
  padding:7px 12px;
  align-items:center;
  gap:7px;
  border:1px solid rgba(31,42,61,.95);
  border-radius:10px;
  background:#070b12;
  color:#718198;
  box-shadow:none;
  font-family:inherit;
  font-size:13px;
  font-weight:750;
  line-height:1.5;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.skin-filter small{
  display:grid;
  min-width:21px;
  height:21px;
  padding:0 5px;
  place-items:center;
  border-radius:999px;
  background:rgba(169,182,199,.1);
  color:var(--muted);
  font-size:10px;
}
.skin-filter:hover,.skin-filter:focus-visible{
  border-color:rgba(77,163,255,.45);
  background:rgba(77,163,255,.1);
  color:var(--text);
}
.skin-filter.active{
  border-color:rgba(77,163,255,.75);
  background:rgba(77,163,255,.24);
  color:#f4f9ff;
  box-shadow:0 0 0 1px rgba(77,163,255,.08) inset,0 4px 16px rgba(0,0,0,.18);
}
.skin-filter.active small{background:rgba(77,163,255,.2); color:#bdddff}
.skin-category-tabs .skin-filter{min-height:42px; padding:8px 15px; font-size:14px}
.skin-category-tabs .skin-filter.active{background:linear-gradient(180deg,rgba(77,163,255,.3),rgba(77,163,255,.18))}
.skin-weapon-tabs .skin-filter.active{
  border-color:rgba(83,210,140,.7);
  background:rgba(83,210,140,.2);
}
.skin-weapon-tabs .skin-filter.active small{background:rgba(83,210,140,.18); color:#b9f4d3}
.skin-primary-type-tabs .skin-filter.active{
  border-color:rgba(183,136,255,.7);
  background:rgba(183,136,255,.2);
}
.skin-result-count{
  margin:0;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

.skin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));
  gap:18px;
}

.skin-grid-grouped{
  grid-template-columns:1fr;
  gap:28px;
}
.skin-type-section{
  display:grid;
  min-width:0;
  gap:12px;
}
.skin-type-heading{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 2px 8px;
  border-bottom:1px solid rgba(77,163,255,.28);
}
.skin-type-heading h3{
  margin:0;
  color:var(--text);
  font-size:18px;
}
.skin-type-count{
  display:grid;
  min-width:25px;
  height:22px;
  padding:0 7px;
  place-items:center;
  border-radius:999px;
  background:rgba(77,163,255,.13);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}
.skin-type-grid{width:100%}

.skin-card{
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(31,42,61,.9);
  border-radius:14px;
  background:rgba(7,10,15,.3);
  box-shadow:none;
  transition:border-color .15s ease,background-color .15s ease;
}

.skin-card-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(11,17,28,.62);
}

.skin-number{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(77,163,255,.3);
  border-radius:10px;
  color:var(--accent);
  background:rgba(77,163,255,.1);
  font-size:12px;
  font-weight:800;
}

.skin-names{min-width:0}
.skin-names h3{
  margin:0;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:18px;
  line-height:1.35;
}
.skin-names p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}
.skin-actions{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.skin-actions > a{font-size:11px; font-weight:700}

.skin-previews{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  align-items:start;
  gap:10px;
  padding:10px;
}
.skin-character-previews{grid-template-columns:minmax(150px,.78fr) minmax(240px,1.35fr)}
.skin-single-preview{grid-template-columns:1fr}

.skin-preview{
  display:flex;
  min-width:0;
  margin:0;
  flex-direction:column;
  gap:6px;
}
.skin-media-frame{
  display:grid;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#05080e;
}
.skin-image-button{
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  appearance:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  cursor:zoom-in;
}
.skin-image-button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.skin-preview img,.skin-preview video{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  background:#05080e;
}
.skin-preview img{
  transition:transform .2s ease;
}
.skin-preview figcaption{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.skin-empty{
  grid-column:1 / -1;
  margin:0;
  padding:22px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
}

.skin-image-dialog{
  width:min(94vw,1500px);
  max-width:none;
  max-height:94vh;
  padding:48px 18px 18px;
  overflow:hidden;
  border:1px solid rgba(77,163,255,.45);
  border-radius:16px;
  background:#070b12;
  color:var(--text);
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.skin-image-dialog::backdrop{background:rgba(0,0,0,.84); backdrop-filter:blur(3px)}
.skin-image-dialog figure{display:grid; margin:0; gap:10px; place-items:center}
.skin-image-dialog img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:78vh;
  border-radius:10px;
  object-fit:contain;
}
.skin-image-dialog figcaption{color:var(--muted); font-size:13px; text-align:center}
.skin-image-dialog-close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  width:34px;
  min-height:34px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:#101722;
  color:var(--text);
  font-size:23px;
  line-height:1;
}
.skin-image-dialog-close:hover,.skin-image-dialog-close:focus-visible{
  border-color:var(--accent);
  background:rgba(77,163,255,.18);
}

/* Support */
.support-content{display:grid; gap:28px}
.support-section{display:grid; gap:12px}
.support-section > h3{
  margin:0;
  color:var(--text);
  font-size:19px;
}
.support-section-heading,
.support-benefit-heading{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.support-section-heading h3{margin:0; color:var(--text); font-size:19px}
.support-benefit-heading .share-button{margin:-5px -5px -5px 0; flex:0 0 auto}
.support-benefit-list li:hover .support-benefit-share{opacity:.85}
.support-method-grid,
.support-benefit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.support-method-card,
.support-benefit-group{
  min-width:0;
  margin:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(7,10,15,.36);
  box-shadow:none;
}
.support-method-card{
  position:relative;
  overflow:hidden;
}
.support-method-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--support-accent,var(--accent));
}
.support-method-kakao{--support-accent:#fee500}
.support-method-kofi{--support-accent:#ff5e5b}
.support-method-card h4,
.support-benefit-group h4{
  margin:0;
  color:var(--text);
  font-size:18px;
}
.support-method-description,
.support-benefit-description{
  margin:7px 0 0;
  color:var(--muted);
  font-size:13px;
}
.support-notice{
  margin:14px 0 0;
  padding:9px 11px;
  border:1px solid rgba(255,196,92,.3);
  border-radius:9px;
  background:rgba(255,196,92,.07);
  color:#ffe0a3;
  font-size:12px;
  font-weight:700;
}
.support-method-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:15px}
.support-open-link,
.support-copy-button{
  display:inline-flex;
  width:auto;
  min-height:36px;
  margin:0;
  padding:7px 12px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(77,163,255,.42);
  border-radius:9px;
  background:rgba(77,163,255,.1);
  color:var(--text);
  font-family:inherit;
  font-size:12px;
  font-weight:750;
  line-height:1.4;
  cursor:pointer;
}
.support-open-link::after{content:"↗"; margin-left:5px; color:var(--accent)}
.support-open-link:hover,
.support-open-link:focus-visible,
.support-copy-button:hover,
.support-copy-button:focus-visible{
  border-color:rgba(77,163,255,.75);
  background:rgba(77,163,255,.18);
  text-decoration:none;
}
.support-benefit-group{border-top:3px solid var(--benefit-accent,var(--accent))}
.support-benefit-included{--benefit-accent:var(--accent2)}
.support-benefit-exclusive{--benefit-accent:#b788ff}
.support-benefit-list{
  display:grid;
  gap:8px;
  margin:15px 0 0;
  padding:0;
  list-style:none;
}
.support-benefit-included .support-benefit-list{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.support-benefit-list li{
  padding:10px 12px;
  border:1px solid rgba(31,42,61,.85);
  border-radius:10px;
  background:rgba(11,17,28,.55);
}
.support-benefit-list strong{color:var(--text); font-size:13px}
.support-benefit-list p{margin:4px 0 0; color:var(--muted); font-size:12px}
.support-command-trigger{
  display:inline-flex;
  width:auto;
  min-height:30px;
  margin:10px 0 0;
  padding:5px 9px;
  align-items:center;
  border:1px solid rgba(77,163,255,.32);
  border-radius:8px;
  background:rgba(77,163,255,.07);
  color:var(--accent);
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}
.support-command-trigger::after{content:"↗"; margin-left:6px; color:var(--accent)}
.support-command-trigger:hover,
.support-command-trigger:focus-visible{
  border-color:rgba(77,163,255,.66);
  background:rgba(77,163,255,.14);
}
.support-command-dialog{
  width:min(92vw,620px);
  max-width:none;
  max-height:min(82vh,720px);
  padding:22px;
  overflow:auto;
  border:1px solid rgba(77,163,255,.45);
  border-radius:16px;
  background:#0b111c;
  color:var(--text);
  box-shadow:0 24px 80px rgba(0,0,0,.72);
}
.support-command-dialog::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(3px)}
.support-command-dialog-header{padding-right:34px}
.support-command-dialog-header h2{margin:0; color:var(--text); font-size:22px}
.support-command-dialog-header p{margin:5px 0 0; color:var(--muted); font-size:13px}
.support-command-dialog-content{display:grid; gap:9px; margin-top:16px}
.support-command-dialog-close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  width:34px;
  min-height:34px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:#101722;
  color:var(--text);
  font-size:23px;
  line-height:1;
}
.support-command-dialog-close:hover,.support-command-dialog-close:focus-visible{
  border-color:var(--accent);
  background:rgba(77,163,255,.18);
}
.support-benefit-command{
  display:grid;
  grid-template-columns:minmax(210px,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:8px 12px;
  padding:8px 9px;
  border:1px solid rgba(77,163,255,.2);
  border-radius:9px;
  background:rgba(7,11,18,.72);
}
.support-benefit-command code{
  overflow-wrap:anywhere;
  color:#cfe6ff;
  font-size:12px;
}
.support-benefit-command span{color:var(--muted); font-size:12px}
.support-command-copy{
  width:auto;
  min-height:32px;
  margin:0;
  padding:5px 10px;
  border:1px solid rgba(77,163,255,.38);
  border-radius:8px;
  background:rgba(77,163,255,.1);
  color:var(--text);
  font-family:inherit;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}
.support-command-copy:hover,.support-command-copy:focus-visible{
  border-color:rgba(77,163,255,.72);
  background:rgba(77,163,255,.18);
}
.support-empty{
  margin:0;
  padding:22px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
}

@media (hover:hover){
  .skin-card:hover{
    border-color:rgba(77,163,255,.38);
    background:rgba(77,163,255,.025);
  }
  .skin-media-frame:hover img{transform:scale(1.015)}
}

@media (max-width:700px){
  body[data-active-tab="news"] .wrap{width:auto; max-width:1160px}
  .news-resize-handle{display:none}
  .tabs .tab{flex:1 1 calc(50% - 8px)}
  .term-table{min-width:620px}
  .term-table th{width:32%; min-width:170px}
  .skin-card-header{grid-template-columns:auto minmax(0,1fr)}
  .skin-actions{grid-column:1 / -1; justify-content:flex-end}
  .skin-character-previews{grid-template-columns:1fr}
  .skin-preview img,.skin-preview video{max-height:none}
  .skin-section-tools{width:100%; margin-left:0; justify-content:space-between}
  .support-method-actions > *{flex:1 1 auto}
  .support-benefit-included .support-benefit-list{grid-template-columns:1fr}
  .support-command-dialog{width:calc(100vw - 28px); padding:20px 16px}
  .support-benefit-command{grid-template-columns:minmax(0,1fr) auto}
  .support-benefit-command span{grid-column:1 / -1; grid-row:2}
}

/* White theme. Default follows the device preference in script.js. */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 18% 10%,rgba(23,105,194,.11),transparent 60%),
    radial-gradient(800px 500px at 85% 0%,rgba(22,132,82,.08),transparent 55%),
    var(--bg);
}
html[data-theme="light"] header{
  background:rgba(255,255,255,.82);
  border-bottom-color:rgba(190,202,218,.88);
}
html[data-theme="light"] .card{
  background:rgba(255,255,255,.9);
  border-color:rgba(198,209,224,.95);
}
html[data-theme="light"] .tabs{background:rgba(242,246,251,.9); border-bottom-color:var(--line)}
html[data-theme="light"] :is(.tab,.langbtn,.theme-picker,.command-filter,.command-action,.skin-filter){
  border-color:var(--line);
  background:rgba(239,244,250,.88);
  color:var(--muted);
}
html[data-theme="light"] :is(.tab,.langbtn,.command-filter,.skin-filter):hover,
html[data-theme="light"] :is(.tab,.langbtn,.command-filter,.skin-filter):focus-visible{
  border-color:rgba(23,105,194,.38);
  background:rgba(23,105,194,.08);
  color:var(--text);
}
html[data-theme="light"] :is(.tab,.langbtn,.command-filter).active,
html[data-theme="light"] .tab[aria-selected="true"]{
  border-color:rgba(23,105,194,.5);
  background:rgba(23,105,194,.13);
  color:var(--text);
}
html[data-theme="light"] .theme-option.active,
html[data-theme="light"] .theme-option[aria-pressed="true"]{background:rgba(23,105,194,.14); color:var(--accent)}
html[data-theme="light"] .social-link:hover,
html[data-theme="light"] .social-link:focus-visible{background:rgba(23,105,194,.09)}

html[data-theme="light"] :is(
  .rules-section,.rule-item,.quick-start-item,details,details > summary,.chev,
  .answer code,.answer pre,.tablewrap,th,.tag,footer,.image-link,.command-page,
  .global-search-item,.recent-view-open,.term-notice,.term-empty,.term-loading,
  .news-item,.skin-card,.skin-card-header,.support-method-card,.support-benefit-group,
  .support-benefit-list li,.support-benefit-command
){
  border-color:var(--line);
  background:rgba(247,249,252,.92);
}
html[data-theme="light"] :is(.quick-start,.term-section h3){background:rgba(23,105,194,.075)}
html[data-theme="light"] .quick-start{background:linear-gradient(135deg,rgba(23,105,194,.08),rgba(255,255,255,.72))}
html[data-theme="light"] .latest-news-preview{background:linear-gradient(135deg,rgba(184,105,0,.08),rgba(255,255,255,.72))}
html[data-theme="light"] :is(.quick-start-item,details > summary,.share-button,.related-link,.command-action):hover,
html[data-theme="light"] :is(.quick-start-item,details > summary,.share-button,.related-link,.command-action):focus-visible{
  background:rgba(23,105,194,.08);
}
html[data-theme="light"] .rules-warning{background:rgba(210,46,46,.07)}
html[data-theme="light"] .rules-other{background:rgba(184,105,0,.06)}
html[data-theme="light"] .subhead.vip{color:#10683f}

html[data-theme="light"] .term-search{
  border-color:#c8d2df;
  background-color:#fff;
  color:var(--text);
}
html[data-theme="light"] .term-search::placeholder{color:#76869a}
html[data-theme="light"] .term-search:hover{border-color:#9dacbf}
html[data-theme="light"] .term-table th,
html[data-theme="light"] .term-table td{border-bottom-color:var(--line)}
html[data-theme="light"] .term-table.striped tbody tr:nth-child(odd) > *{background:rgba(95,111,132,.045)}
html[data-theme="light"] .term-alias-popover{
  background:#fff;
  box-shadow:0 10px 28px rgba(34,54,80,.18);
}

html[data-theme="light"] .news-content code{border-color:var(--line); background:#eef3f8; color:#1a4c80}
html[data-theme="light"] .news-content pre{border-color:var(--line); background:#edf2f7}
html[data-theme="light"] .news-item{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(34,54,80,.08)}
html[data-theme="light"] .skin-filter{background:#f1f5fa; color:#65768a}
html[data-theme="light"] .skin-filter.active{background:rgba(23,105,194,.14); color:var(--text)}
html[data-theme="light"] .skin-filter.active small{background:rgba(23,105,194,.12); color:var(--accent)}
html[data-theme="light"] .skin-weapon-tabs .skin-filter.active{background:rgba(22,132,82,.12)}
html[data-theme="light"] .skin-media-frame,
html[data-theme="light"] :is(.skin-preview img,.skin-preview video){background:#edf2f7}
html[data-theme="light"] :is(.skin-image-dialog,.support-command-dialog){background:#fff}
html[data-theme="light"] :is(.skin-image-dialog-close,.support-command-dialog-close){background:#eef3f8}
html[data-theme="light"] .support-notice{background:rgba(184,105,0,.07); color:#775000}
html[data-theme="light"] .support-benefit-command code{color:#1a4c80}

html[data-theme="light"] :is(.recent-views-toggle,.recent-views-panel,.back-to-top,.toast){
  border-color:rgba(23,105,194,.36);
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 36px rgba(34,54,80,.18);
}
html[data-theme="light"] .recent-views-backdrop{background:rgba(41,57,77,.28)}
html[data-theme="light"] .recent-view-open{background:rgba(247,249,252,.96)}
html[data-theme="light"] .recent-views-clear{background:rgba(210,46,46,.045)}
html[data-theme="light"] :is(.back-to-top,.recent-views-toggle):hover,
html[data-theme="light"] :is(.back-to-top,.recent-views-toggle):focus-visible{
  border-color:rgba(23,105,194,.62);
  background:#eef5fc;
}

@media (hover:hover){
  html[data-theme="light"] details > summary:hover,
  html[data-theme="light"] .quick-start-item:hover{
    border-color:rgba(23,105,194,.55);
    background:rgba(23,105,194,.11);
  }
  html[data-theme="light"] .news-item:hover{
    border-color:rgba(23,105,194,.58);
    background:rgba(224,238,253,.92);
    box-shadow:inset 0 0 0 1px rgba(23,105,194,.12),0 10px 30px rgba(34,54,80,.13);
  }
  html[data-theme="light"] .skin-card:hover{
    border-color:rgba(23,105,194,.52);
    background:rgba(229,240,252,.9);
  }
  html[data-theme="light"] .global-search-results button.global-search-item:hover{
    border-color:rgba(var(--search-rgb),.62);
    background:rgba(var(--search-rgb),.12);
  }
  html[data-theme="light"] .recent-view-open:hover{
    border-color:rgba(var(--recent-rgb),.62);
    background:rgba(var(--recent-rgb),.11);
  }
  html[data-theme="light"] .image-link:hover{
    border-color:rgba(23,105,194,.52);
    background:rgba(23,105,194,.09);
  }
}

@media (min-width:1280px){
  .term-search{
    min-height:62px;
    padding:15px 20px 15px 55px;
    background-position:22px 50%;
    background-size:20px;
    font-size:20px;
    line-height:30px;
  }
}