/* 길드런 한글 가이드 — "슬레이트 위의 금박" (게임 UI의 금테·마름모만 가져옴)
   색은 전부 여기 :root 에만 둔다. 마크업은 cls-*, rar-*, cat-* 같은 이름만 붙인다. */
:root {
  --ground: #121518; --slate: #1b2025; --slate-2: #232a30; --party: #0f1a14; --select: #24443c;
  --rule: #2c3338; --gilt-dim: #6d5a2e; --gilt: #c9a24a; --gilt-hi: #e8c56a;
  --ink: #e6e1d3; --ink-hi: #f4efe2; --mute: #9aa3a6;
  --burn: #ffa987; --poison: #9fd688; --frost: #73cfff; --rush: #e4c062; --stall: #d4b1ff;
  --shield: #b4c6db; --crit: #ffa3aa; --shard: #55ddcd; --backup: #9fc2ff;
  --boss: #ff8f8f; --legendary: #ed914c; --upgrade: #8fb3a0;
  --warrior: #ea9258; --tank: #7fa9fd; --vanguard: #f28881; --assassin: #b697f1; --duelist: #b0b246; --mystic: #04c5b5; --mage: #e987b3;
  --common: #9a9fa5; --rare: #64a1ee; --epic: #a780e6;
  --sky: #1d2429; --select-2: #15261f; --slot-in: #1d2620; --slot-out: #0b120d;
  --lattice: repeating-linear-gradient(45deg, rgb(201 162 74 / .05) 0 1px, transparent 1px 14px),
             repeating-linear-gradient(-45deg, rgb(201 162 74 / .05) 0 1px, transparent 1px 14px);
  --frame: inset 0 0 0 3px var(--ground), inset 0 0 0 4px var(--gilt-dim);
  --display: "Hahmlet", "Nanum Myeongjo", serif;
  --body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.cls-warrior { --c: var(--warrior); } .cls-tank { --c: var(--tank); } .cls-vanguard { --c: var(--vanguard); } .cls-assassin { --c: var(--assassin); }
.cls-duelist { --c: var(--duelist); } .cls-mystic { --c: var(--mystic); } .cls-mage { --c: var(--mage); }
.rar-common { --c: var(--common); } .rar-unique { --c: var(--gilt); } .rar-rare { --c: var(--rare); } .rar-epic { --c: var(--epic); }
.rar-legendary { --c: var(--legendary); } .rar-class { --c: var(--upgrade); } .rar-starter { --c: var(--mute); } .rar-mandate { --c: var(--rush); }
.rar-enemy { --c: var(--boss); } .rar-event { --c: var(--mute); }
.cat-boss { --c: var(--boss); } .cat-elite { --c: var(--legendary); } .cat-normal { --c: var(--mute); }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* filters toggle [hidden]; flex/grid rules must not override it */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 16px/1.7 var(--body); word-break: keep-all; overflow-wrap: anywhere;
  background: radial-gradient(120% 60% at 50% -20%, var(--sky), transparent 70%) fixed, var(--ground); }
a { color: inherit; text-decoration: none; }
.note a, .lede a, .more, .q a { text-decoration: underline; text-decoration-color: var(--gilt-dim); text-underline-offset: 3px; }
.note a:hover, .more:hover { text-decoration-color: var(--gilt-hi); }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* --- 머리말: 본문과 같은 폭(1040)에 로고 | 메뉴(가운데) | 시뮬레이터·로그인 --- */
header { position: sticky; top: 0; z-index: 20; background: var(--lattice), var(--ground); border-bottom: 3px double var(--gilt-dim); }
.hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 20px; max-width: 1040px; margin: 0 auto; padding: 10px 20px; }
body:has(.with-rail) .hd { max-width: 1412px; }  /* 오른쪽 광고 칸이 있으면 그 폭까지 */
.logo { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-height: 44px; padding-top: 6px; justify-self: start; }
.logo b { font: 800 22px/1 var(--display); color: var(--ink-hi); }
.logo span { font-size: 13px; color: var(--mute); }
nav { display: flex; }
nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--mute); white-space: nowrap; }
nav a:hover { color: var(--ink); }
nav a[aria-current] { color: var(--ink); }
nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px;
  background: var(--gilt); transform: rotate(45deg); }
.hd-r { display: flex; align-items: center; gap: 8px; justify-self: end; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--gilt); color: var(--gilt-hi); font-weight: 500; white-space: nowrap; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg) translate(-2px, -2px); }
details.menu[open] summary, details.menu.on summary { background: var(--slate-2); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: var(--slate); border: 1px solid var(--gilt-dim);
  padding: 4px; z-index: 30; box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
.menu-pop a { display: flex; flex-direction: column; padding: 10px 12px; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--slate-2); }
.menu-pop small { color: var(--mute); font-size: 13px; }
.menu-pop button { display: block; width: 100%; min-height: 44px; padding: 0 12px; background: none; border: 0; text-align: left; font-size: 15px; cursor: pointer; }
.menu-pop .who { margin: 0; padding: 8px 12px; color: var(--mute); font-size: 13px; border-bottom: 1px solid var(--rule); }
.me { display: flex; min-width: 72px; justify-content: flex-end; }  /* 로그인 상태가 늦게 와도 메뉴가 밀리지 않게 자리 확보 */
.login-btn, details.me summary.login-btn { min-height: 40px; padding: 0 16px; background: var(--gilt); border: 1px solid var(--gilt); color: var(--ground);
  font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
.login-btn:hover { background: var(--gilt-hi); }
details.me summary.login-btn::after { border-color: var(--ground); }
details.me:not(:has(.login-btn)) summary { border-color: var(--rule); color: var(--ink); max-width: 160px; }
details.me:not(:has(.login-btn)) summary { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) {
  .hd { grid-template-columns: auto 1fr; gap: 0 12px; padding: 8px 16px 0; }
  nav { grid-column: 1 / -1; grid-row: 2; margin: 0 -11px; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 420px) { .logo span { display: none; } details.menu summary, .login-btn { padding: 0 10px; } }

/* --- 본문 골격 --- */
main { max-width: 1040px; margin: 0 auto; padding: 32px 20px 72px; }
h1 { font: 800 32px/1.25 var(--display); color: var(--ink-hi); margin: 8px 0 20px; text-wrap: balance; letter-spacing: -.01em; }
h1 .count, h2 .count { font: 400 16px var(--body); color: var(--mute); margin-left: 10px; letter-spacing: 0; }
h2 { font: 600 22px/1.35 var(--display); color: var(--ink-hi); margin: 48px 0 14px; text-wrap: balance; }
main > h2, main > section > h2, #cm > h2 { display: flex; align-items: center; gap: 12px; }
main > h2::before, main > section > h2::before, #cm > h2::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gilt); transform: rotate(45deg); }
main > h2::after, main > section > h2::after, #cm > h2::after { content: ""; flex: 1; border-top: 1px solid var(--gilt-dim); }
h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
p { max-width: 72ch; }
.hint, .note { color: var(--mute); font-size: 14px; margin: 4px 0 14px; }
.lede { max-width: 64ch; }
.en { font: 400 13px var(--body); color: var(--mute); }
.count { font-variant-numeric: tabular-nums; }
footer { border-top: 3px double var(--gilt-dim); background: var(--lattice), var(--ground); color: var(--mute); font-size: 13px; }
footer p { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
footer p:first-child { padding-top: 24px; } footer p:last-child { padding-bottom: 28px; }

/* --- 클래스 표시(마름모 핍)와 키워드 --- */
.chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--c, var(--gilt)); transform: rotate(45deg); }
.k { font-weight: 600; }
.n { color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.sc { color: var(--mute); font-size: .92em; }
.burn, .calc.burn .n { color: var(--burn); } .poison, .heal, .hps, .calc.poison .n, .calc.heal .n, .calc.hps .n { color: var(--poison); }
.frost, .calc.frost .n { color: var(--frost); } .rush { color: var(--rush); } .stall { color: var(--stall); }
.shield, .shields, .lasting, .calc.shield .n { color: var(--shield); } .crit, .calc.crit .n { color: var(--crit); }
.shard, .shards, .generate, .calc.shard .n { color: var(--shard); } .backup, .backuponly { color: var(--backup); }
.stun, .taunt { color: var(--ink-hi); font-weight: 700; }
.k.warrior { color: var(--warrior); } .k.tank { color: var(--tank); } .k.vanguard { color: var(--vanguard); } .k.assassin { color: var(--assassin); }
.k.duelist, .k.duelists { color: var(--duelist); } .k.mystic { color: var(--mystic); } .k.mage { color: var(--mage); }

/* --- 마름모 아이콘 틀 (게임의 gem) --- */
.dia { --s: 44px; --c: var(--gilt-dim); position: relative; flex: none; width: var(--s); height: var(--s); margin: 4px; display: grid; place-items: center; }
.dia::before { content: ""; position: absolute; inset: 0; background: var(--slate); border: 1px solid var(--c); transform: rotate(45deg) scale(.74); }
.dia[class*="rar-"]::before { border-width: 2px; }
.dia img { position: relative; width: 74%; height: 74%; object-fit: contain; }
.dia.sm { --s: 30px; } .dia.lg { --s: 64px; }

/* --- 검색 + 분류 --- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.search { flex: 0 1 280px; min-height: 44px; padding: 8px 12px; background: var(--slate); color: var(--ink); border: 1px solid var(--gilt-dim);
  border-radius: 2px; font: inherit; font-size: 15px; }
.search::placeholder { color: var(--mute); }
.search:focus-visible { border-color: var(--gilt-hi); }
.filter { display: flex; flex-wrap: wrap; gap: 0 2px; }
.filter button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--mute); font-size: 15px; cursor: pointer; transition: color .12s ease-out, border-color .12s ease-out; }
.filter button:hover { color: var(--ink); }
.filter button.on { color: var(--ink); border-bottom-color: var(--gilt); }
.filter button[class*="cls-"]::before, .filter button[class*="rar-"]::before, .filter button[class*="cat-"]::before {
  content: ""; width: 7px; height: 7px; background: var(--c); transform: rotate(45deg); }
@media (max-width: 640px) { .search { flex: 1 1 100%; } }

/* --- 영웅 목록 --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 24px 16px; }
.card { display: flex; flex-direction: column; gap: 2px; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--slate); border: 1px solid var(--gilt-dim); margin-bottom: 8px;
  transition: border-color .12s ease-out; }
.card:hover img { border-color: var(--gilt); }
.card b { font: 600 17px/1.3 var(--display); color: var(--ink-hi); }
.card small { color: var(--mute); font-size: 13px; }
.card .chip { margin-top: 2px; }

/* --- 영웅 페이지 머리 --- */
.hero-head { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 40px; align-items: end; }
.art { margin: 0; text-align: center; border-bottom: 1px solid var(--gilt-dim); padding-bottom: 12px; }
.hero-art { width: 100%; max-height: 480px; object-fit: contain; object-position: bottom; display: block; }
.art figcaption { color: var(--mute); font-size: 12px; }
.rank-tabs { display: inline-flex; gap: 6px; margin: 12px 0 2px; }
.rank-tabs button { position: relative; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-weight: 700; font-size: 14px;
  color: var(--mute); isolation: isolate; }
.rank-tabs button::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--gilt-dim); background: var(--slate); transform: rotate(45deg); z-index: -1; }
.rank-tabs button:hover { color: var(--ink); }
.rank-tabs button.on { color: var(--ground); }
.rank-tabs button.on::before { background: var(--gilt); border-color: var(--gilt); }
.hero-name { font-size: 44px; line-height: 1.1; margin: 0; }
.hero-name .en { display: block; margin-top: 8px; font-size: 14px; }
.hero-head .title { color: var(--gilt); font-weight: 600; margin: 12px 0 6px; }
.hero-head .tags { margin: 0 0 4px; }
.quote { font-size: 17px; color: var(--ink); margin: 14px 0 0; max-width: 40ch; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; margin: 24px 0 0; }
.stats div { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.stats dt { color: var(--mute); font-size: 12px; }
.stats dd { margin: 0; font-weight: 700; font-size: 20px; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.stats.wide { grid-template-columns: repeat(5, 1fr); margin: 12px 0 8px; }
.stats.wide dd { font-size: 17px; }
@media (max-width: 640px) {
  .hero-head { grid-template-columns: 1fr; gap: 16px; } .hero-art { max-height: 320px; margin: 0 auto; }
  .hero-name { font-size: 34px; } .stats.wide { grid-template-columns: repeat(3, 1fr); }
}

/* --- 능력·아이템·유물 줄 (상자 없이 구분선) --- */
.ab { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--rule); }
.ab > div { min-width: 0; }
.ab-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ab-h b { font-size: 17px; color: var(--ink-hi); }
.ab-h small { color: var(--mute); font-size: 12px; }
.ab p { margin: 4px 0 0; font-size: 15px; }
.kind { font-size: 12px; font-weight: 700; color: var(--mute); }
.kind.active { color: var(--gilt); } .kind.upgrade { color: var(--upgrade); } .kind.item { color: var(--gilt-hi); }
.kind.backup { color: var(--backup); } .kind.off { font-weight: 400; } .kind[class*="rar-"] { color: var(--c); }
.when { font-size: 12px; color: var(--mute); }
.st { display: flex; flex-wrap: wrap; gap: 0 14px; color: var(--gilt); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.ab .q { font-size: 14px; padding-left: 12px; border-left: 1px solid var(--gilt-dim); margin-top: 8px; }
.list { display: grid; }
@media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* --- 펼침 목록 (상자 없이) --- */
details:not(.menu) { border-top: 1px solid var(--rule); }
details:not(.menu) > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; padding: 8px 0; }
details:not(.menu) > summary::-webkit-details-marker { display: none; }
details:not(.menu) > summary::before { content: ""; width: 8px; height: 8px; flex: none; border: 1px solid var(--gilt); transform: rotate(45deg); transition: background .12s ease-out; }
details[open]:not(.menu) > summary::before { background: var(--gilt); }
details:not(.menu) > summary:hover { color: var(--ink-hi); }
details > .list, details > .lineup:last-child { padding-bottom: 8px; }

/* --- B랭크 전문화: 게임 카드 그대로 --- */
.spec-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 42px 14px 10px; }
.spec-card { --c: var(--gilt); position: relative; text-align: center; cursor: pointer; padding: 44px 18px 18px;
  background: linear-gradient(180deg, var(--slate-2) 0%, var(--slate) 100%); border: 2px solid var(--c); box-shadow: var(--frame);
  transition: background .12s ease-out, opacity .12s ease-out; }
.spec-card::before, .spec-card::after { content: ""; position: absolute; bottom: -7px; width: 12px; height: 12px; border: 2px solid var(--c); background: var(--slate); transform: rotate(45deg); }
.spec-card::before { left: -8px; } .spec-card::after { right: -8px; }
.spec-card:hover { --c: var(--gilt-hi); }
.spec-card.sel { --c: var(--gilt-hi); background: linear-gradient(180deg, var(--select) 0%, var(--select-2) 100%); }
.spec-row.has-sel .spec-card:not(.sel) { opacity: .55; }
.gem { position: absolute; top: -31px; left: 50%; width: 60px; height: 60px; margin-left: -30px; transform: rotate(45deg);
  border: 2px solid var(--c); background: var(--slate); box-shadow: 0 0 0 4px var(--ground), 0 0 0 5px var(--gilt-dim); display: grid; place-items: center; }
.gem img { width: 46px; height: 46px; transform: rotate(-45deg); }
.spec-card h3 { margin: 4px 0 0; font: 600 19px/1.3 var(--display); color: var(--ink-hi); }
.spec-card .en { font-size: 11px; }
.kind-line { color: var(--mute); font-size: 13px; margin-top: 4px; }
.kind-line .ab-name { display: block; color: var(--ink); }
.mana { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.spec-card hr { border: 0; height: 1px; background: var(--gilt-dim); margin: 12px 0; }
.spec-card p { text-align: left; font-size: 14px; margin: 0 0 8px; }
.spec-card p.plus { text-align: center; color: var(--mute); font-size: 13px; }
.spec-tags { position: absolute; left: -13px; top: 24px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.spec-tags .k { background: var(--ground); border: 1px solid var(--c); padding: 1px 5px; font-size: 11px; }
@media (max-width: 760px) { .spec-row { gap: 14px; } .spec-card { padding: 44px 12px 14px; } .spec-card p { font-size: 13px; } }
@media (max-width: 600px) {
  .spec-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .spec-card { scroll-snap-align: center; }
}

/* --- 같은 메커니즘 영웅 --- */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 24px; }
.mini { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0 12px 56px; min-height: 68px; border-top: 1px solid var(--rule); }
.mini img { position: absolute; left: 0; top: 12px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gilt-dim); }
.mini b { color: var(--ink-hi); } .mini:hover b { color: var(--gilt-hi); }
.mini small { color: var(--mute); font-size: 13px; }

/* --- 클래스·용어 --- */
.spec { padding: 14px 0; border-top: 1px solid var(--rule); }
.spec h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.more { font-size: 14px; font-weight: 400; color: var(--ink); }
.kw { padding-left: 0; list-style: none; } .kw li { padding: 10px 0; border-top: 1px solid var(--rule); max-width: 80ch; }

/* --- 적: 전투 경로 + 적 상세 --- */
.cat { color: var(--c); font-size: 13px; font-weight: 700; }
details.stage { position: relative; border-top: 0; border-left: 1px solid var(--rule); margin-left: 8px; padding-left: 22px; }
details.stage > summary::before { position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; background: var(--ground); border-color: var(--gilt-dim); }
details.stage[open] > summary::before { background: var(--gilt-dim); }
details.stage[data-r="elite"] > summary::before { border-color: var(--legendary); }
details.stage[data-r="boss"] > summary::before { background: var(--boss); border-color: var(--boss); }
details.stage > summary { border-top: 1px solid var(--rule); }
.fno { min-width: 76px; color: var(--mute); font-size: 13px; }
.fno b { font: 600 22px/1 var(--display); color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.faces { flex: 1 1 260px; font-size: 14px; }
.meta { display: inline-flex; flex-wrap: wrap; gap: 0 14px; color: var(--mute); font-size: 13px; margin: 0; }
.meta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-dim); text-underline-offset: 3px; }
.lineup { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.lineup small { margin-left: auto; font-variant-numeric: tabular-nums; }
.foe { color: var(--ink); } .foe b { color: var(--gilt); font-variant-numeric: tabular-nums; }
.foe:hover { text-decoration: underline; text-decoration-color: var(--gilt-dim); text-underline-offset: 3px; }
section.enemy { padding: 24px 0; border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
section.enemy.cat-elite { border: 1px solid var(--gilt-dim); padding: 20px; margin: 16px 0; }
section.enemy.cat-boss { border: 2px solid var(--gilt); box-shadow: var(--frame); padding: 22px; margin: 16px 0;
  background: linear-gradient(180deg, var(--slate) 0%, transparent 70%); }
.enemy-head { display: flex; gap: 16px; align-items: center; }
.enemy-head h2 { margin: 0; font-size: 24px; }

/* --- 배치 시뮬레이터 --- */
.pbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--party); border: 2px solid var(--gilt); box-shadow: var(--frame); }
#pbar { position: sticky; top: var(--hh, 60px); z-index: 10; }
.pl { color: var(--ink); font: 600 15px var(--display); }
.slots { display: flex; gap: 12px; }
.unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot { position: relative; display: block; width: 58px; height: 58px; padding: 0; border-radius: 50%; }
.slot.empty { border: 1px solid var(--gilt-dim); background: radial-gradient(circle, var(--slot-in) 0%, var(--slot-out) 75%); }
.slot.filled { border: 2px solid var(--gilt); background: var(--slate); cursor: pointer; }
.slot.filled img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.slot.sel { outline: 2px solid var(--gilt-hi); outline-offset: 3px; }
.rk { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--ground); isolation: isolate; }
.rk::before { content: ""; position: absolute; inset: 4px; background: var(--gilt); transform: rotate(45deg); z-index: -1; }
.pdiv { width: 1px; height: 46px; background: var(--gilt-dim); }
.gems { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; row-gap: 6px; max-width: 64px; min-height: 12px; }
.gem-s { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gilt-dim); background: var(--ground); display: grid; place-items: center; overflow: hidden; }
.gem-s.on { border-color: var(--gilt-hi); background: var(--slate-2); }
.gem-s img { width: 16px; height: 16px; transform: rotate(-45deg); }
.pcap { display: none; }
.ptools, .codebox { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 0; }
.ptools label, .codebox label { font-size: 14px; color: var(--mute); display: inline-flex; align-items: center; gap: 8px; }
.ptools select, .ptools button, .codebox button, .ed-row > button, .up-row select {
  min-height: 44px; padding: 0 14px; background: var(--slate); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; font-size: 14px; cursor: pointer; }
.ptools button:hover, .codebox button:hover, .ed-row > button:hover { border-color: var(--gilt); }
#copycode { border-color: var(--gilt); color: var(--gilt-hi); }
.codebox input { flex: 1 1 240px; min-height: 44px; padding: 0 12px; background: var(--slate); color: var(--gilt-hi); border: 1px solid var(--gilt-dim);
  border-radius: 2px; font: 500 13px "IBM Plex Mono", Consolas, monospace; }
.codebox input:focus-visible { border-color: var(--gilt-hi); }
#toast { color: var(--gilt-hi); font-size: 14px; }
.sim { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.sim > div + div { border-left: 1px solid var(--rule); padding-left: 32px; }
@media (max-width: 760px) { .sim { grid-template-columns: 1fr; } .sim > div + div { border-left: 0; padding-left: 0; } }
.tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 12px; border-bottom: 1px solid var(--rule); }
.tabs, #tab-items, #tab-heroes { scroll-margin-top: calc(var(--hh, 60px) + var(--bh, 110px) + 12px); }
.tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 4px 12px; background: none; border: 0;
  border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; text-align: left; }
.tabs button b { font: 600 21px/1.2 var(--display); color: var(--mute); }
.tabs button small { font-size: 13px; color: var(--mute); }
.tabs button:hover b { color: var(--ink); }
.tabs button.on { border-bottom-color: var(--gilt); }
.tabs button.on b { color: var(--ink-hi); }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 8px; }
.ro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: none; border: 0; cursor: grab; }
.ro img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gilt-dim); transition: border-color .12s ease-out; }
.ro:hover img { border-color: var(--gilt); }
.ro b { font-size: 14px; font-weight: 500; } .ro .chip { font-size: 11px; margin: 0; }
.ro.placed img { filter: grayscale(.85); opacity: .6; }
.ro.placed::after { content: attr(data-where); position: absolute; top: 2px; right: 6px; font-size: 10px; font-weight: 700; background: var(--gilt); color: var(--ground); padding: 0 4px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 16px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.it { display: flex; gap: 8px; align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: 6px 0; cursor: grab; }
.it:hover b { color: var(--gilt-hi); }
.it > span:last-child { display: flex; flex-direction: column; min-width: 0; } .it b { font-size: 14px; font-weight: 500; } .it small { color: var(--gilt); font-size: 12px; }
#ifilter { margin-bottom: 8px; }
#ifilter button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--mute); font-size: 15px; cursor: pointer; }
#ifilter button.on { color: var(--ink); border-bottom-color: var(--gilt); }
#ifilter button[class*="rar-"]::before { content: ""; width: 7px; height: 7px; background: var(--c); transform: rotate(45deg); }
#editor { min-height: 200px; }
.ed-head { display: flex; gap: 12px; align-items: center; }
.ed-head img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gilt); }
.ed-head b { font: 600 20px var(--display); color: var(--ink-hi); margin-right: 8px; }
.ed-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.ed-row .rank-tabs { margin: 0; }
#editor h3 { font-size: 16px; margin: 20px 0 4px; }
.spec-row.compact { grid-template-columns: repeat(3, 1fr); padding: 38px 8px 6px; gap: 12px; }
.spec-row.compact .spec-card { padding: 38px 10px 12px; }
.spec-row.compact .spec-card p { font-size: 12px; }
.spec-row.compact .gem { width: 48px; height: 48px; margin-left: -24px; top: -25px; }
.spec-row.compact .gem img { width: 36px; height: 36px; }
.spec-row.compact .spec-tags { display: none; }
.spec-row.locked { opacity: .35; pointer-events: none; }
@media (max-width: 600px) { .spec-row.compact { grid-auto-columns: 78%; } }
.up-row { margin: 8px 0; } .up-row label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.up-row select { max-width: 100%; }
.pab-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 8px 12px; margin-top: 6px; border-left: 1px solid var(--gilt-dim); }
.pab-card img { width: 34px; height: 34px; flex: none; } .pab-card p { margin: 0; font-size: 13px; }
.eqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.eq { display: flex; gap: 6px; align-items: center; min-height: 44px; padding: 4px 8px; border: 1px dashed var(--gilt-dim); color: var(--mute); font-size: 12px; background: none; }
button.eq { cursor: pointer; text-align: left; color: var(--ink); }
button.eq.on { border: 1px solid var(--rule); background: var(--slate); }
button.eq.on:hover { border-color: var(--crit); }
button.eq.add { justify-content: center; color: var(--gilt-hi); font-weight: 700; }
button.eq.add:hover { border-style: solid; }
.eq img { width: 30px; height: 30px; } .eq span { display: flex; flex-direction: column; } .eq b { font-size: 12px; } .eq small { color: var(--gilt); font-size: 11px; }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .sum-grid { grid-template-columns: 1fr; } }
#summary h3 { font-size: 16px; margin: 22px 0 6px; }
.cnt { padding: 4px 0; } .cnt b { font-variant-numeric: tabular-nums; } .cnt small { color: var(--mute); margin-left: 6px; }
.targets { padding-left: 0; list-style: none; } .targets li { padding: 8px 0; border-top: 1px solid var(--rule); }
.pab > summary { min-height: 44px; }
.pab > summary img { width: 28px; height: 28px; }
.pab > summary b { font-weight: 600; } .pab > summary small { color: var(--mute); font-size: 13px; }
.pab p { margin: 0 0 10px 20px; font-size: 14px; }
.pab.off { opacity: .55; }
.pab .st { color: var(--gilt); }
[data-drag] { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.over { outline: 2px solid var(--gilt-hi) !important; outline-offset: 2px; }
.drag-ghost { position: fixed; left: 0; top: 0; width: 56px; height: 56px; pointer-events: none; z-index: 1000; opacity: .92; }
.drag-ghost img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gilt-hi); }
body.dragging, body.dragging * { cursor: grabbing !important; }
@media (max-width: 480px) {
  .pbar { gap: 8px; padding: 10px 12px; justify-content: center; }
  .pbar .pl { display: none; }
  .pcap { display: flex; justify-content: space-between; width: 100%; color: var(--ink); font-size: 12px; font-weight: 700; }
  .pbar .slots { gap: 5px; }
  .pbar .slot { width: 42px; height: 42px; }
  .pbar .unit { gap: 4px; }
  .pbar .gems { max-width: 42px; gap: 3px; row-gap: 4px; }
  .pbar .gem-s { width: 9px; height: 9px; }
  .pdiv { height: 34px; }
}

/* --- 빌드 공유 --- */
.btn, .more-btn, .cform button, .wsub button, button.login {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  background: var(--slate); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; font-size: 14px; cursor: pointer; }
.btn:hover, .more-btn:hover, .cform button:hover, .wsub button:hover, button.login:hover { border-color: var(--gilt); }
.btn.primary, button.primary { background: var(--gilt); border-color: var(--gilt); color: var(--ground); font-weight: 700; }
.btn.primary:hover, button.primary:hover { background: var(--gilt-hi); }
button:disabled { opacity: .5; cursor: wait; }
#post { border-color: var(--gilt); color: var(--gilt-hi); }
.msg { min-height: 1.7em; margin: 6px 0 0; color: var(--gilt-hi); font-size: 14px; }
.msg.bad { color: var(--crit); }

.usage { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 24px; }
.use { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto 4px; align-items: center; column-gap: 10px; row-gap: 4px;
  padding: 8px 0; background: none; border: 0; border-top: 1px solid var(--rule); text-align: left; cursor: pointer; }
.use img { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gilt-dim); }
.use b { font-size: 14px; font-weight: 500; }
.use small { grid-area: 1 / 3; font-size: 13px; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.use > span { grid-area: 2 / 2 / 3 / 4; height: 4px; background: var(--rule); }
.use .bar { display: block; height: 100%; background: var(--gilt-dim); }
.use:hover b { color: var(--gilt-hi); }
.use.on img { border: 2px solid var(--gilt); } .use.on .bar { background: var(--gilt); }

ol.builds { list-style: none; padding: 0; margin: 0; counter-reset: b; }
ol.builds li { counter-increment: b; border-top: 1px solid var(--rule); }
.bld { display: flex; align-items: center; gap: 10px 24px; padding: 14px 0; }
ol.ranked .bld::before { content: counter(b); flex: none; width: 28px; text-align: right; font: 600 22px/1 var(--display); color: var(--mute); font-variant-numeric: tabular-nums; }
ol.ranked li:nth-child(-n+3) .bld::before { color: var(--gilt); }
.bld:hover .bd > b { color: var(--gilt-hi); }
.lu { display: flex; align-items: flex-start; gap: 8px; flex: none; }
.bld .lu { min-width: 340px; }  /* 6칸이 다 차도 제목 줄이 같은 자리에서 시작 */
.lu .slot { width: 46px; height: 46px; }
.lu .gems { max-width: 52px; }
.lu .unit.res { opacity: .6; }
.lu .pdiv { align-self: center; height: 38px; margin: 0 2px; }
.bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd > b { font: 600 18px/1.35 var(--display); color: var(--ink-hi); }
.badges { display: flex; flex-wrap: wrap; gap: 0 12px; }
.res { font-size: 12px; font-weight: 700; color: var(--mute); }
.res.clear { color: var(--gilt-hi); } .res.proof { color: var(--shard); }
.empty { padding: 20px 0; color: var(--mute); border-top: 1px solid var(--rule); }
.empty a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-dim); text-underline-offset: 3px; }
.more-btn { width: 100%; margin-top: 12px; }

.back { margin: 0; font-size: 14px; }
.back a { color: var(--mute); text-decoration: underline; text-decoration-color: var(--gilt-dim); text-underline-offset: 3px; }
h1.bt { margin-bottom: 6px; }
.meta .res { align-self: center; }
.pbar.static { margin: 18px 0 0; }
.pbar.static .lu .slot { width: 58px; height: 58px; }
.pbar.static .lu .gems { max-width: 64px; }
.pcap-s { margin-left: auto; color: var(--mute); font-size: 13px; }
#like.on { border-color: var(--gilt); color: var(--gilt-hi); }
.ptools .btn { font-size: 14px; }
.ptools .danger:hover { border-color: var(--crit); color: var(--crit); }
.ab .face { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--gilt-dim); }
.ab-h a:hover { color: var(--gilt-hi); }
.its { display: flex; flex-wrap: wrap; gap: 0 14px; } .it-s { display: inline-flex; align-items: center; font-size: 14px; }
.post { white-space: pre-wrap; max-width: 72ch; font-size: 15px; }
img.proof { display: block; max-width: 100%; max-height: 560px; border: 1px solid var(--gilt-dim); }
.cmt { padding: 10px 0; border-top: 1px solid var(--rule); }
.cmt .post { margin-top: 2px; }
button.link { background: none; border: 0; padding: 0; color: var(--mute); font-size: 13px; text-decoration: underline; cursor: pointer; }
.cform { display: flex; gap: 8px; align-items: stretch; margin: 12px 0; }
.cform textarea { flex: 1; min-height: 64px; }
textarea, .wform input, .wform select { width: 100%; padding: 10px 12px; background: var(--slate); color: var(--ink); border: 1px solid var(--gilt-dim);
  border-radius: 2px; font: inherit; font-size: 15px; }
textarea:focus-visible, .wform input:focus-visible, .wform select:focus-visible { border-color: var(--gilt-hi); }
.wform { display: grid; gap: 16px; max-width: 760px; }
.wform label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.wform label small { font-weight: 400; color: var(--mute); }
.wform .code-in { font: 500 13px "IBM Plex Mono", Consolas, monospace; color: var(--gilt-hi); }
.wform .hint { margin: -8px 0 0; }
#wpre { margin: -6px 0 0; min-height: 60px; }
.wsub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (max-width: 640px) {
  .bld { flex-wrap: wrap; }
  .bd { flex-basis: 100%; }
  .bld .lu { min-width: 0; }
  .lu .slot, .pbar.static .lu .slot { width: 40px; height: 40px; }
  .lu .gems, .pbar.static .lu .gems { max-width: 44px; gap: 3px; }
  .lu .gem-s { width: 9px; height: 9px; }
  .cform { flex-direction: column; }
}

/* --- 커뮤니티 --- */
.cat-free { --c: var(--mute); } .cat-question { --c: var(--backup); } .cat-tip { --c: var(--gilt); }
#cm .toolbar form { flex: 0 1 260px; margin-left: auto; }
#cm .toolbar .search { width: 100%; }
ul.posts { list-style: none; padding: 0; margin: 0; }
ul.posts li { border-top: 1px solid var(--rule); }
.pst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; }
.pst > b { font-weight: 500; font-size: 16px; color: var(--ink-hi); }
.pst:hover > b { color: var(--gilt-hi); }
.pst .cc { color: var(--gilt); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pst .meta { flex-basis: 100%; }
.pst .cat { min-width: 52px; }
.meta .cat { align-self: center; }
.pbody { margin: 24px 0; font-size: 16px; line-height: 1.8; }
.bcode { display: inline-flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin: 6px 0; background: var(--party); border: 1px solid var(--gilt-dim);
  white-space: normal; vertical-align: top; }
.bcode:hover { border-color: var(--gilt); }
.bcode small { color: var(--gilt-hi); font-size: 13px; }
@media (max-width: 640px) { #cm .toolbar form { flex-basis: 100%; margin-left: 0; } }

/* --- 광고 자리 (콘텐츠와 헷갈리지 않게 '광고' 표시, 금테 없음) --- */
.ad { display: block; margin: 24px auto; max-width: 1040px; padding: 0 20px; }
.ad-label { display: block; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.ad-top { margin: 16px auto 0; }
.ad-inline, .ad-bottom { padding: 0; }
.ad-preview div { display: grid; place-items: center; min-height: 100px; border: 1px dashed var(--rule); color: var(--mute); font-size: 13px; }
.ad-side { display: none; }
@media (min-width: 1440px) {
  .page.with-rail { display: grid; grid-template-columns: minmax(0, 1040px) 300px; gap: 32px; justify-content: center; }
  .page.with-rail main { margin: 0; }
  .ad-side { display: block; margin: 32px 0 0; padding: 0; align-self: start; }
  .ad-top { max-width: 1412px; }  /* 본문(1040) + 간격 + 사이드(300)에 맞춤 */
  .ad-side.ad-preview div { min-height: 600px; }
}