/* CastPad 데모 오버레이 — 상단 데모 바 + 비활성 표시 + 안내 토스트/인트로 */
:root { --demo-bar-h: 36px; }
html, body { background: #0a0a0c; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; }
/* 데모 바를 흐름 안에 두고 .app 이 남은 높이를 flex 로 채움 + 본문(카드) 영역 배경을 사이드바와 같은 --bg 로 통일 */
body > .app { height: auto !important; flex: 1 1 auto; min-height: 0; background: var(--bg); }
#na-splash { top: var(--demo-bar-h) !important; }

#demo-bar {
  position: relative; flex-shrink: 0; height: var(--demo-bar-h); z-index: 100000;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: linear-gradient(90deg, #7a3df2, #3f8bd6); color: #fff;
  font-family: 'Pretendard', -apple-system, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px; user-select: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
#demo-bar .demo-tag { background: rgba(255,255,255,.22); padding: 3px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .6px; }
#demo-bar .demo-msg { font-weight: 600; opacity: .96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo-bar .demo-spacer { flex: 1 1 auto; }
#demo-bar a.demo-link { color: #fff; text-decoration: none; background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 6px; font-weight: 700; flex-shrink: 0; }
#demo-bar a.demo-link:hover { background: rgba(255,255,255,.3); }
#demo-bar .demo-lang { display: inline-flex; gap: 1px; background: rgba(255,255,255,.16); border-radius: 7px; padding: 2px; flex-shrink: 0; }
#demo-bar .demo-lang button { border: none; background: none; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 5px; cursor: pointer; opacity: .72; line-height: 1; }
#demo-bar .demo-lang button:hover { opacity: 1; }
#demo-bar .demo-lang button.active { background: rgba(255,255,255,.92); color: #1c2430; opacity: 1; }
@media (max-width: 560px) { #demo-bar .demo-msg { font-size: 11px; } #demo-bar a.demo-link { display: none; } }

/* 데모에서 막힌 컨트롤 표시 */
.demo-disabled { opacity: .5 !important; cursor: not-allowed !important; }

/* 안내 토스트 (상단 중앙) */
#demo-toast {
  position: fixed; top: calc(var(--demo-bar-h) + 12px); left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 100002; background: #15171c; color: #eef1f6; border: 1px solid #2d3038;
  padding: 10px 15px; border-radius: 10px; max-width: min(92vw, 480px); text-align: center;
  font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.45;
  box-shadow: 0 10px 36px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 첫 안내 인트로 (화면 중앙) */
#demo-intro {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100002;
  background: #1b1e23; color: #dfe3ea; border: 1px solid #2d3038; border-radius: 12px;
  padding: 13px 15px; max-width: min(94vw, 540px); display: flex; gap: 12px; align-items: center;
  font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.5;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
}
#demo-intro b { color: #8ab4ff; font-weight: 700; }
#demo-intro button { margin-left: auto; flex-shrink: 0; background: #3f8bd6; border: none; color: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
#demo-intro button:hover { background: #4a97e0; }