/* ─────────────────────────────────────────────────────────────────────────
   섯다랩 셸 — 헤더 · 왼쪽 메뉴 · 탭바 · 격자

   ★ Claude Design 시안의 [data-r=...] 규칙을 그대로 옮긴 것이다(2026-09-26 개정).
     시안이 레이아웃을 전부 data-r 속성에 걸어두었기 때문에 클래스명을 새로
     지어내지 않고 그대로 쓴다 — 시안과 구현을 나란히 놓고 비교할 수 있다.

   ★ 맨 윗줄은 한 통이다. 헤더가 왼쪽 끝부터 오른쪽 끝까지 가고, 왼쪽 메뉴는
     그 아래(--hh = 56px)에서 시작한다. 로고가 헤더에 있어서 메뉴를 접어도 남는다.

   ★ 왼쪽 메뉴는 화면 왼쪽 끝에 붙고, 바디(좌+중앙+우)만 남는 영역에서 가운데다.
     그래서 메뉴와 바디 사이에 공간이 생긴다 — 의도된 것이다(토큰랩도 같다).

   ★ 데스크톱/모바일 템플릿을 나누지 않는다(DESIGN-Screen.md §3).
     DOM은 한 벌이고 배치만 브레이크포인트로 바꾼다.

   ★ 헤더 브랜드는 [data-r=hbname], 게임 딜러의 족보 이름은 [data-r=hname] 이다.
     한때 둘 다 hname 이라 모바일에서 브랜드를 감추면 족보 이름까지 사라졌다 —
     2026-09-26 시안이 헤더 쪽을 hbname 으로 갈랐다. 다시 합치지 말 것.
   ───────────────────────────────────────────────────────────────────────── */

html,body{margin:0;height:100%;background:#0c0d0f}

body{font-family:Pretendard,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#e6e8ea;-webkit-font-smoothing:antialiased}

*{box-sizing:border-box}

button,input{font-family:inherit;font-variant-numeric:tabular-nums}

a{color:#8fb3ff;text-decoration:none}

a:hover{color:#b9cfff}

::-webkit-scrollbar{width:6px;height:6px}

::-webkit-scrollbar-thumb{background:#2e3339;border-radius:3px}

::-webkit-scrollbar-track{background:transparent}

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

[data-r=grid]{grid-template-columns:var(--rail,212px) minmax(0,1fr) 300px minmax(0,760px) 340px minmax(0,1fr);grid-template-areas:"head head head head head head" "rail . left center right ."}

@media (min-width:1760px){
    [data-r=left]{border-left:1px solid #23272c}
    [data-r=right]{border-right:1px solid #23272c}
}

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

[data-r=rail]{grid-area:rail;display:flex;flex-direction:column}

[data-r=head]{grid-area:head}

[data-r=left]{grid-area:left;display:flex;flex-direction:column;border-right:1px solid #23272c}

[data-r=center]{grid-area:center;display:flex;flex-direction:column}

[data-r=right]{grid-area:right;display:flex;flex-direction:column;border-left:1px solid #23272c}

[data-r=tabbar],[data-r=fab],[data-r=monly],[data-r=scrim],[data-r=sheethd]{display:none}

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

/* ★ 세 칸 모두 게임 화면에만 있다. 어느 것을 보일지는 game.css 가 정한다 —
   기본은 안 보이는 것이다. */
[data-r=mwal],[data-r=tip30],[data-r=mbalrow]{display:none}

@media (max-width:760px){
    [data-r=dwal],[data-r=conn]{display:none!important}
    [data-r=sbl]{display:none}
    [data-r=sbs]{display:inline!important}
    [data-r=grid]{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:78px}
    [data-r=grid]>*,[data-r=center]>*,[data-r=right]>*{flex-shrink:0}
    [data-r=center],[data-r=right]{display:contents}
    [data-r=head]{order:0;height:52px}
    [data-r=rail]{display:none}
    [data-r=fab],[data-r=monly]{display:flex}
    [data-r=sheethd],[data-r=tabbar]{display:flex}
}

[data-r=rail]{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));align-self:start;overflow-y:auto;scrollbar-width:none}

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

[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}
}

/* 연결 점 — 살아 있으면 천천히 뛴다. 헤더의 [data-r=conn] 이 쓴다 */
@keyframes conn-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.8); } }

/* ★ 인라인 display:flex 가 UA 의 [hidden]{display:none} 을 이긴다 — 하위 메뉴가
   닫혀 있어야 할 때도 펼쳐진 채로 보였다. 감출 때는 여기서 확실히 감춘다.
   (시안은 sc-if 로 DOM 에서 아예 빼지만, 우리는 접기·펴기를 JS 가 해서 DOM 에 남긴다) */
[data-shell=kids][hidden] { display: none !important; }
/* 접힌 메뉴에서는 꺾쇠 버튼도 숨는다 — 같은 함정(인라인 display:flex). 남아 있으면 32px 이 옆에 붙어
   아이콘 칸이 좁아지고 헤더 접기 버튼과 줄이 어긋난다(2026-09-29 Lewis). */
[data-shell=kids-toggle][hidden] { display: none !important; }
/* 접힌 메뉴의 하위 표시 — 시안 railClosed: 칸 오른쪽 위 11px 꺾쇠 */
[data-shell=mini-chev] { position: absolute; right: 2px; top: 6px; font-size: 11px; color: #6d737a; }

/* ── 공지티커 (시안 §19.24) ─ 오른쪽 끝에서 들어와 왼쪽으로 완전히 빠져나간다. 모바일 숨김 */
/* 헤더 양옆 그룹은 줄지 않는다 — 가운데 티커만 남는 폭을 쓴다(시안 §19.24 helmet) */
[data-r=head]>div:first-child,[data-r=head]>div:last-child{flex:none}
@keyframes tk-run{from{left:100%;transform:translateX(0)}to{left:0;transform:translateX(-100%)}}
@media (max-width:760px){[data-r=ticker]{display:none!important}}

/* ── 헤더 벨 — 희귀패 알림(시안 §19.41) ─ 모바일(≤760)은 바텀시트 + 딤(시안 helmet 그대로) */
[data-shell=bell-badge][hidden],[data-shell=bell-menu][hidden],[data-shell=bell-levels][hidden] { display: none !important; }
@media (max-width:760px){[data-r=bellmenu]{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-height:78vh!important;border-radius:14px 14px 0 0!important;z-index:91!important}[data-r=bellbg]{background:rgba(0,0,0,.55);z-index:90!important}}
[data-shell=bell-list] a:hover { background: #1f2329 !important; }