/* ─────────────────────────────────────────────────────────────────────────
   가이드 — Guide.dc.html 이식.

   ★ 시안 helmet CSS 그대로다. 전역 규칙(html/body/a/스크롤바)만 뺀다 —
     shell.css 가 이미 갖고 있고, 두 번 쓰면 갈라진다.
   ★ 본문 폭 상한·격자·문서 스크롤은 이 파일이 갖는다 — 화면마다 다르다.
   ───────────────────────────────────────────────────────────────────────── */

[data-r=grid]{display:grid;height:100%;grid-template-columns:var(--rail,212px) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);grid-template-areas:"rail head" "rail main"}

[data-r=grid]{grid-template-columns:var(--rail,212px) minmax(0,1fr) minmax(0,1280px) minmax(0,1fr);grid-template-areas:"head head head head" "rail . main ."}

[data-r=grid]{--hh:56px}

[data-r=main]{grid-area:main;display:flex;flex-direction:column;min-height:0;overflow:hidden}

[data-r=content]{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}

[data-r=main]{position:relative}

[data-r=toc]{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;top:0;bottom:0;width:200px;overflow-y:auto;border-right:1px solid #1c1f23;padding:20px 12px}

[data-r=content]{margin-left:200px;scroll-behavior:smooth}

[data-r=tocm]{display:none}

[data-r=cmp]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}

[data-r=tr3]{display:grid;grid-template-columns:200px 72px minmax(0,1fr)}

[data-r=tr3b]{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1fr)}

[data-r=tr2]{display:grid;grid-template-columns:220px minmax(0,1fr)}

[data-r=split]{display:grid;grid-template-columns:1fr 2fr 1fr}

[data-r=tr2s]{display:grid;grid-template-columns:110px minmax(0,1fr)}

[data-r=two]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

[data-r=tabbar]{display:none}

@media (max-width:760px){
[data-r=grid]{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:78px;scroll-behavior:smooth}
[data-r=grid]>*{flex-shrink:0}
[data-r=rail],[data-r=toc],[data-r=dcol]{display:none}
[data-r=main]{display:contents}
[data-r=head]{order:0;height:64px}
[data-r=tocm]{order:1;display:flex;flex:none;min-height:52px;align-items:center;position:sticky;top:0;z-index:5;overflow-x:auto;scrollbar-width:none}
[data-r=content]{order:2;overflow:visible;margin-left:0}
[data-r=col]{padding:0 16px 80px!important}
[data-r=cmp]{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-r=tr3],[data-r=tr3b],[data-r=tr2],[data-r=tr2s]{grid-template-columns:minmax(0,1fr);row-gap:2px!important}
[data-r=two]{grid-template-columns:1fr}
[data-h="1"]{display:none!important}
[data-r=split]{grid-template-columns:1fr}
[data-r=tabbar]{display:flex}
}

@media (max-width:760px){[data-r=htog]{display:none!important}}

[data-shell=page]{height:auto!important;min-height:100vh;overflow:visible!important}

[data-r=grid]{height:auto!important;min-height:100vh}

[data-r=main]{overflow:visible!important;min-height:0!important}

[data-r=main] [style*="overflow-y: auto"],[data-r=main] [style*="overflow: auto"]{overflow-y:hidden!important;max-height:none!important}

[data-r=main]{display:grid!important;grid-template-columns:200px minmax(0,1fr);align-items:start}

[data-r=toc]{position:sticky!important;top:var(--hh);bottom:auto!important;height:calc(100vh - var(--hh));overflow-y:auto!important}

[data-r=content]{margin-left:0!important;overflow:visible!important}

@media (max-width:760px){[data-r=main]{display:contents!important}}

@media (min-width:761px){
[data-r=main]{padding:16px;gap:12px}
[data-r=main] [style*="background: rgb(15, 17, 19)"],[data-r=main] [style*="background: rgb(12, 13, 15)"]{background:transparent!important}
[data-r=main] [style*="background: rgb(18, 20, 23)"]{background:#181b20!important;border-color:transparent!important}
[data-r=main] [data-r=toc],[data-r=main] [data-r=col]>*{background:#181b20!important;border:none!important;border-radius:12px;overflow:hidden}
[data-r=main]{column-gap:12px!important;padding:16px!important}
[data-r=col]{display:flex;flex-direction:column;gap:12px;padding:0 0 60px!important;max-width:760px}
[data-r=col]>*{padding:20px 24px!important}
[data-r=toc]{top:calc(var(--hh) + 16px)!important;height:calc(100vh - var(--hh) - 32px)!important}
}

@keyframes conn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

[data-r=rail] [data-r=mi]{transition:background .12s}

[data-r=rail] [data-r=mi]:hover{background:#23282e!important}

[data-r=rail] [data-r=mi]:hover a,[data-r=rail] a[data-r=mi]:hover{color:#e6e8ea!important}

@media (max-width:1100px){[data-r=conn]{display:none!important}}

@media (max-width:760px){[data-r=dwal]{display:none!important}}

/* ★ 모바일 잔고 — 데스크톱 칩(dwal)이 760 이하에서 숨으므로 축약 칩을 대신 띄운다.
   같이 브랜드 글자를 감춰 즐은 헤더에 자리를 만든다 — 로고 마크는 남는다.
   ★ 게임은 이 규칙이 없다. 헤더 아래 펼친 지갑 카드(mwal)가 같은 것을 보여준다
     (2026-09-26 디자인: 「모바일은 모든 화면에서 잔고가 보이고, 게임만 펼친 형태」). */
@media (max-width:760px){[data-r=mbal]{display:flex!important}[data-r=hbname]{display:none!important}}

/* ★ 머리는 본문을 내려도 따라온다(시안). 이 한 줄이 없으면 모바일에서
   잔고 칩과 메뉴가 스크롤과 같이 사라진다 — 이식 때 생성기가 전역 규칙로 오해해
   버렸던 것을 되살렸다. 게임은 바깥이 100vh 라 필요 없다. */
[data-r=head]{position:sticky;top:0;z-index:40}

/* ★ 더보기 시트는 모바일 것이다. 데스크톱은 왼쪽 메뉴가 있어서 필요 없다. */
@media (min-width:761px){[data-r=moresheet]{display:none!important}}