@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Cinzel:wght@700;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif;
  background:#030d18;
  color:#e8d5b0;
  min-width:320px;
}

/* ===== 전체 래퍼 - 최대 1400px 가운데 정렬 ===== */
.site-wrap{
  max-width:1400px;
  margin:0 auto;
  position:relative;
}

/* ===== 상단바 ===== */
.topbar{
  background:#030d18;
  border-bottom:1px solid #c89b3c44;
  position:sticky;
  top:0;
  z-index:10000;
  backface-visibility:hidden;
  overflow:hidden;
}
/* 배너 배경 이미지 */
.topbar-banner{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  opacity:0.85;
  z-index:0;
}
@media(min-width:769px){
  .topbar-banner{
    background:url('headbanner.png') center/cover no-repeat;
  }
}
/* 배너 어두운 그라디언트 오버레이 */
.topbar-overlay{
  display:none;
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(1,8,18,0.72) 0%, rgba(1,8,18,0.12) 28%, rgba(1,8,18,0.12) 72%, rgba(1,8,18,0.72) 100%),
    linear-gradient(to bottom, rgba(1,8,18,0.3) 0%, rgba(1,8,18,0.55) 100%);
  pointer-events:none;
}
/* 배너 중앙 텍스트 */
.topbar-center-text{
  display:none !important;
  position:absolute;
  inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  z-index:1;
  padding:0 40%;
}
.topbar-site-title{
  font-family:'Cinzel', 'Noto Sans KR', serif;
  font-size:clamp(20px, 2.8vw, 46px);
  font-weight:900;
  letter-spacing:0.18em;
  color:#e8c97a;
  text-shadow:
    0 0 8px #c89b3ccc,
    0 0 22px #c89b3c88,
    0 0 48px #c89b3c44,
    0 2px 4px rgba(0,0,0,0.9),
    0 0 1px #fff4;
  line-height:1;
  margin-bottom:clamp(3px, 0.5vw, 8px);
  white-space:nowrap;
}
.topbar-site-sub{
  font-family:'Noto Sans KR', sans-serif;
  font-size:clamp(8px, 0.85vw, 13px);
  font-weight:500;
  color:#d4b48a;
  letter-spacing:0.08em;
  line-height:1.55;
  text-shadow:0 1px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7);
  white-space:nowrap;
}
.topbar-site-sub span{
  color:#a89070;
  font-size:0.92em;
}
.topbar-inner{
  max-width:100%;
  margin:0;
  padding:0 24px;
  height:clamp(90px, 13vw, 220px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.topbar img{height:72px;cursor:pointer;filter:brightness(1.25) drop-shadow(0 0 8px rgba(200,155,60,0.5));}
.topbar-right{display:flex;gap:8px;align-items:center;}
.tbtn{font-size:12px;padding:6px 16px;cursor:pointer;font-weight:700;letter-spacing:1px;border-radius:3px;}
.tbtn.login{background:transparent;color:#c89b3c;border:1px solid #c89b3c66;}
.tbtn.login:hover{background:#c89b3c11;}
.tbtn.join{background:#c89b3c;color:#010a13;border:1px solid #c89b3c;}
.tbtn.join:hover{background:#f0e6c8;}

/* ===== 네비게이션 ===== */
.nav{
  background:#0c1828;
  border-bottom:1px solid #c89b3c44;
  position:sticky;
  top:clamp(90px, 13vw, 220px);
  z-index:9999;
  overflow:visible;
  backface-visibility:hidden;
}
.nav-inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 20px 0 230px;
  display:flex !important;
  flex-direction:row !important;
  overflow:visible;
}
.nav-item{position:relative;}
.nav-item>a{
  color:#d4b48a;font-size:14px;padding:12px 14px;
  text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  display:block;font-weight:500;
}
.nav-item>a:hover,.nav-item>a.active{color:#c89b3c;}
.nav-item>a.active{border-bottom-color:#c89b3c;}
.nav-item:hover>a{color:#c89b3c;}
.nav-arrow{font-size:9px;margin-left:3px;color:#c89b3c66;}
.dropdown{
  position:absolute;
  top:100%;
  left:0;
  background:#0c1828;
  border:1px solid #c89b3c66;
  border-top:2px solid #c89b3c;
  min-width:160px;
  z-index:999999;
  box-shadow:0 8px 24px rgba(0,0,0,0.8);
  opacity:0;
  transform:scaleY(0.6);
  transform-origin:top center;
  pointer-events:none;
  transition:opacity .2s,transform .2s cubic-bezier(0.4,0,0.2,1);
}
.nav-item:hover .dropdown{opacity:1;transform:scaleY(1);pointer-events:auto;}
.dropdown a{display:block;padding:10px 16px;font-size:14px;color:#d4b48a;text-decoration:none;border-bottom:1px solid #c89b3c11;white-space:nowrap;}
.dropdown a:last-child{border-bottom:none;}
.dropdown a:hover{background:#c89b3c15;color:#c89b3c;}

/* ===== 메인 레이아웃 ===== */
.page-body{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
}

/* ===== 콘텐츠 영역 ===== */
.page-content{
  flex:1;
  min-width:0;
  overflow:hidden;
}

/* ===== 배너 ===== */
.banner{position:relative;width:100%;overflow:hidden;margin-left:0;line-height:0;}
.banner img{width:100%;height:auto;display:block;}
.banner video{width:100%;height:auto;display:block;}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#010a1300 30%,#010a13ee 100%);}
.banner-text{position:absolute;bottom:24px;left:24px;max-width:600px;}
.banner-bullets{margin:8px 0 0 0;padding:0;list-style:none;}
.banner-bullets li{font-size:12px;color:#d4b48a;letter-spacing:0.3px;padding:2px 0;line-height:1.5;}
.banner-bullets li::before{content:"· ";color:#c89b3c;}
.banner-title{font-size:24px;font-weight:700;color:#c89b3c;letter-spacing:3px;text-shadow:0 0 20px #c89b3c88;margin-bottom:6px;}
.banner-sub{font-size:13px;color:#d4b48a;letter-spacing:1px;}

/* ===== 콘텐츠 패딩 ===== */
.content{
  padding:12px;
  display:grid;
  grid-template-columns:1fr 280px;
  gap:12px;
}
.an-content{
  padding:12px;
}

/* ===== 박스 ===== */
.box{background:#0c1828;border:1px solid #c89b3c55;border-radius:4px;overflow:hidden;margin-bottom:14px;}
.box-head{background:#0f2035;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c89b3c55;}
.box-head span{font-size:14px;font-weight:700;color:#c89b3c;letter-spacing:1px;}
.box-head a{font-size:12px;color:#d4b48a;text-decoration:none;}
.box-head a:hover{color:#c89b3c;}

/* ===== 게시글 ===== */
.post-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #c89b3c1a;cursor:pointer;text-decoration:none;transition:background .15s;}
.post-item:last-child{border-bottom:none;}
.post-item:hover{background:#c89b3c0a;}
.cat{font-size:11px;padding:2px 8px;border-radius:2px;font-weight:700;flex-shrink:0;}
.cat.analysis{background:#1a1a3a;color:#9c88ff;border:1px solid #9c88ff44;}
.cat.soccer{background:#0a2a1a;color:#4caf7d;border:1px solid #4caf7d44;}
.cat.basket{background:#2a1500;color:#ff9800;border:1px solid #ff980044;}
.cat.baseball{background:#0a0a2a;color:#7986cb;border:1px solid #7986cb44;}
.cat.free{background:#1a0a2a;color:#ce93d8;border:1px solid #ce93d844;}
.cat.humor{background:#2a0a1a;color:#f48fb1;border:1px solid #f48fb144;}
.post-title{font-size:13px;color:#eedcb8;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.post-item:hover .post-title{color:#c89b3c;}
.post-meta{font-size:11px;color:#a89880;flex-shrink:0;}

/* ===== 스코어 ===== */
.score-item{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid #c89b3c1a;}
.score-item:last-child{border-bottom:none;}
.league{font-size:11px;color:#a89880;width:40px;font-weight:700;}
.teams{flex:1;}
.team-row{display:flex;justify-content:space-between;margin-bottom:3px;}
.team-row:last-child{margin-bottom:0;}
.team-name{font-size:12px;color:#eedcb8;}
.score-num{font-size:13px;font-weight:700;color:#a89880;}
.score-num.win{color:#c89b3c;}
.live-badge-sm{font-size:10px;background:#c89b3c;color:#010a13;padding:1px 6px;border-radius:2px;font-weight:700;}
.end-badge{font-size:10px;color:#a89880;}
.gold-divider{height:1px;background:linear-gradient(to right,transparent,#c89b3c66,transparent);margin:2px 0;}

/* ===== 스포츠분석 ===== */
.sport-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.sport-tab{padding:6px 14px;background:#0c1828;border:1px solid #c89b3c55;border-radius:20px;font-size:12px;color:#d4b48a;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s;}
.sport-tab:hover{border-color:#c89b3c;color:#c89b3c;}
.sport-tab.active{background:#c89b3c;color:#010a13;border-color:#c89b3c;font-weight:700;}
.cat-banner{width:100%;aspect-ratio:4/1;position:relative;overflow:hidden;border-radius:4px 4px 0 0;background:#1a2535;border:1px solid #c89b3c55;border-bottom:none;}
.cat-banner img{width:100%;height:100%;object-fit:cover;object-position:center;}
.cat-banner-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(1,10,19,0.82) 0%,rgba(1,10,19,0.2) 70%);}
.cat-top-left{position:absolute;top:16px;left:20px;}
.cat-emoji{font-size:24px;display:block;margin-bottom:4px;}
.cat-name{font-size:24px;font-weight:700;color:#c89b3c;letter-spacing:3px;text-shadow:0 0 20px #c89b3c88;}
.board-bar{width:100%;background:#0f2035;border:1px solid #c89b3c55;border-top:2px solid #c89b3c55;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;}
.board-bar-title{font-size:14px;font-weight:700;color:#c89b3c;}
.write-btn{padding:7px 18px;background:#c89b3c;color:#010a13;border:none;font-size:12px;font-weight:700;cursor:pointer;border-radius:2px;}
.write-btn:hover{background:#f0e6c8;}
.post-table{width:100%;border-collapse:collapse;background:#0c1828;border:1px solid #c89b3c55;border-top:none;}
.post-table thead tr{background:#0f2035;}
.post-table th{padding:9px 12px;font-size:12px;color:#a89880;font-weight:500;border-bottom:1px solid #c89b3c22;text-align:left;}
.post-table td{padding:10px 12px;border-bottom:1px solid #c89b3c0d;font-size:13px;}
.post-table tr:last-child td{border-bottom:none;}
.post-table tbody tr{cursor:pointer;transition:background .1s;}
.post-table tbody tr:hover{background:#c89b3c08;}
.td-num{text-align:center;width:50px;color:#a89880;}
.td-title{color:#eedcb8;}
.td-author{text-align:center;width:80px;color:#d4b48a;}
.td-date{text-align:center;width:110px;color:#a89880;}
.td-views{text-align:center;width:60px;color:#a89880;}
.cat-badge{font-size:11px;padding:1px 7px;border-radius:2px;margin-right:6px;background:#0a2a1a;color:#4caf7d;border:1px solid #4caf7d44;}
.cat-badge-humor{font-size:11px;padding:1px 7px;border-radius:2px;margin-right:6px;background:#2a0a1a;color:#f48fb1;border:1px solid #f48fb144;}
.cat-badge-free{font-size:11px;padding:1px 7px;border-radius:2px;margin-right:6px;background:#1a0a2a;color:#ce93d8;border:1px solid #ce93d844;}
.empty-msg{padding:50px;text-align:center;color:#a89880;font-size:14px;background:#0c1828;border:1px solid #c89b3c55;border-top:none;}

/* ===== 커뮤니티 ===== */
.tab-row{display:flex;gap:0;border-bottom:1px solid #c89b3c55;}
.tab{font-size:13px;padding:10px 24px;color:#d4b48a;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.tab.active,.tab:hover{color:#c89b3c;border-bottom-color:#c89b3c;}

/* ===== 미니게임 ===== */
.game-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.game-tab{padding:7px 14px;background:#0c1828;border:1px solid #c89b3c55;border-radius:20px;font-size:12px;color:#d4b48a;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s;}
.game-tab:hover{border-color:#c89b3c;color:#c89b3c;}
.game-tab.active{background:#c89b3c;color:#010a13;border-color:#c89b3c;font-weight:700;}
.game-area{background:#0c1828;border:1px solid #c89b3c55;border-radius:8px;overflow:hidden;min-height:400px;display:flex;align-items:center;justify-content:center;width:100%;}
.sound-btn{padding:7px 16px;background:#0c1828;border:1px solid #c89b3c44;border-radius:20px;color:#c89b3c;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}

/* ===== 햄버거 ===== */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:transparent;border:none;}
.hamburger span{width:22px;height:2px;background:#c89b3c;border-radius:2px;transition:all .3s;display:block;}

/* ===== 반응형 ===== */

/* ===== 반응형 ===== */

/* 태블릿 (1024px 이하) */
@media(max-width:1280px){
  .chat-sidebar{width:22vw;min-width:180px;max-width:260px;}
}
@media(max-width:1024px){
  .content{grid-template-columns:1fr;}
  .nav-inner{padding-left:20px;}
  .chat-sidebar{width:20vw;min-width:160px;max-width:220px;}
  .sb-user-nick{font-size:16px;}
  .sb-user-pts{font-size:12px;}
  .sb-chat-line{font-size:11px;}
}

/* 모바일 (768px 이하) */
@media(max-width:768px){
  /* 네비 숨기고 햄버거만 */
  .nav{display:none !important;}
  .nav.mobile-open{
    display:block !important;
    position:fixed;
    top:60px;left:0;right:0;
    z-index:9998;
    background:#0c1828;
    border-bottom:1px solid #c89b3c55;
  }
  .nav.mobile-open .nav-inner{
    flex-direction:column !important;
    padding:0 !important;
    overflow:visible;
  }
  .nav.mobile-open .nav-item>a{
    padding:12px 20px;
    border-bottom:1px solid #c89b3c11;
    display:block;
  }
  .nav.mobile-open .dropdown{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    box-shadow:none;
    border:none;
    background:#071016;
    display:none;
  }
  .nav.mobile-open .dropdown.mobile-open{display:block;}
  .nav.mobile-open .dropdown a{padding:10px 32px;}

  /* 햄버거 표시 */
  .hamburger{display:flex !important;}

  /* 사이드바 숨김 */
  .chat-sidebar{display:none !important;}

  /* 레이아웃 세로로 */
  .page-body{display:block !important;}
  .page-content{width:100%;}

  /* 콘텐츠 */
  .content{padding:8px;grid-template-columns:1fr;}
  .an-content{padding:8px;}

  /* 배너 */
  .banner-title{font-size:16px;}
  .banner-sub{display:none;}

  /* 테이블 */
  .td-author,.td-date,.td-views{display:none;}

  /* 탑바 */
  .topbar-banner{display:none !important;}
  .topbar-center-text{display:none !important;}
  .topbar-inner{padding:0 12px;height:60px;}
  .topbar img{height:36px;}

  /* nav-inner padding 모바일에서 리셋 */
  .nav-inner{padding:0 !important;}
}

/* 소형 모바일 (480px 이하) */
  #topbar-right{display:flex !important;}
  @media(max-width:480px){
  .tbtn{font-size:11px;padding:5px 10px;}
  .content>div:nth-child(2){display:none;}
  .banner{width:100%;}
  .banner-title{font-size:14px;}
  .topbar img{height:32px;}
}

/* ===== 사이드바 (바셀TV 스타일) ===== */
.chat-sidebar{
  width:22vw;
  min-width:200px;
  max-width:315px;
  flex-shrink:0;
  background:#070f1a;
  border-right:1px solid #c89b3c22;
  border-left:1px solid #c89b3c44;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:calc(clamp(90px, 13vw, 220px) + 44px);
  align-self:flex-start;
  overflow:hidden;
}

/* 로그인/회원 박스 */
.sb-auth-box{background:#0c1828;border-bottom:2px solid #c89b3c33;padding:10px 12px;overflow:visible;}
.sb-user-row{display:flex;align-items:center;gap:10px;margin-bottom:0;}
.sb-user-icon{font-size:30px;flex-shrink:0;}
.sb-user-info{flex:1;overflow:visible;display:flex;flex-direction:column;gap:0;justify-content:center;}
.sb-user-nick{font-size:19px;font-weight:700;color:#c89b3c;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;overflow:visible;max-width:100%;line-height:1.2;}
.sb-user-pts{font-size:13px;color:#a89880;margin-top:4px;line-height:1;}
.sb-icon-btn{font-size:16px;text-decoration:none;flex-shrink:0;}
.sb-user-btns{display:flex;gap:4px;margin-top:2px;}
.sb-btn-attend{flex:1;padding:3px;background:#c89b3c;color:#010a13;font-size:11px;font-weight:700;text-decoration:none;text-align:center;border-radius:4px;display:block;}
.sb-btn-attend:hover{background:#f0e6c8;}
.sb-btn-logout{flex:1;padding:3px;background:transparent;border:1px solid #c89b3c55;color:#a89880;font-size:11px;cursor:pointer;border-radius:4px;}
.sb-btn-logout:hover{border-color:#c89b3c;color:#c89b3c;}
/* 로그인 폼 */
.sb-login-form{display:flex;flex-direction:column;gap:6px;}
.sb-input{width:100%;padding:8px 10px;background:#0f2035;border:1px solid #c89b3c55;color:#eedcb8;font-size:12px;border-radius:4px;outline:none;box-sizing:border-box;}
.sb-input:focus{border-color:#c89b3c;}
.sb-login-btn{width:100%;padding:9px;background:#c89b3c;color:#010a13;font-size:13px;font-weight:700;border:none;cursor:pointer;border-radius:4px;letter-spacing:0.5px;}
.sb-login-btn:hover{background:#f0e6c8;}
.sb-login-opts{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a89880;}
.sb-login-opts label{display:flex;align-items:center;gap:4px;cursor:pointer;}
.sb-signup-link{color:#c89b3c;text-decoration:none;font-size:11px;}
.sb-signup-link:hover{text-decoration:underline;}

/* 카카오/텔레그램 */
.sb-contact-box{padding:8px;border-bottom:1px solid #c89b3c22;display:flex;flex-direction:column;gap:6px;}
.sb-kakao-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#FEE500;border-radius:6px;text-decoration:none;font-size:12px;font-weight:700;color:#3A1D1D;transition:opacity .15s;}
.sb-kakao-btn:hover{opacity:.85;}
.sb-telegram-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#229ED9;border-radius:6px;text-decoration:none;font-size:12px;font-weight:700;color:#fff;transition:opacity .15s;}
.sb-telegram-btn:hover{opacity:.85;}

/* 채팅창 */
.sb-chat-box{border-bottom:1px solid #c89b3c22;}
.sb-chat-head{padding:8px 12px;background:#0f2035;border-bottom:1px solid #c89b3c22;display:flex;justify-content:space-between;align-items:center;}
.sb-chat-head span:first-child{font-size:12px;font-weight:700;color:#c89b3c;}
.sb-chat-count{font-size:10px;color:#a89880;}
.sb-chat-msgs{height:clamp(295px, calc(295px + (380 - 295) * ((100vw - 1200px) / (1920 - 1200))), 380px);overflow-y:auto;overflow-x:hidden;padding:6px 10px;background:#070f1a;}
.sb-chat-msgs::-webkit-scrollbar{width:3px;}
.sb-chat-msgs::-webkit-scrollbar-thumb{background:#c89b3c22;border-radius:2px;}
.sb-chat-line{font-size:13px;line-height:1.4;min-height:22px;height:auto;padding:2px 0;word-break:break-all;display:flex;align-items:flex-start;flex-wrap:wrap;gap:0;overflow:visible;}
.sb-tier-inline{display:inline-flex;align-items:center;line-height:1;margin:0 1px;}
.sb-tier-inline img{display:block;}
.sb-chat-icon{font-size:13px;margin-right:2px;display:inline-flex;align-items:center;}
.sb-chat-nick{color:#c89b3c;font-weight:700;font-size:11px;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;max-width:80px;text-overflow:ellipsis;}
.sb-chat-colon{color:#a89880;}
.sb-chat-text{color:#eedcb8;font-size:11px;}
.sb-chat-sys{text-align:center;font-size:11px;color:#7a6a5a;padding:8px 0;}
.sb-chat-input{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#0c1828;border-top:1px solid #c89b3c22;width:100%;box-sizing:border-box;overflow:hidden;}
.sb-chat-inp{flex:1;min-width:0;width:0;padding:5px 7px;background:#0f2035;border:1px solid #c89b3c55;color:#eedcb8;font-size:11px;border-radius:4px;outline:none;}
.sb-chat-inp:focus{border-color:#c89b3c;}
.sb-chat-send{padding:5px 8px;background:#c89b3c;color:#010a13;border:none;font-size:11px;font-weight:700;cursor:pointer;border-radius:4px;white-space:nowrap;flex-shrink:0;}
.sb-chat-send:hover{background:#f0e6c8;}
.sb-chat-nologin{padding:8px;text-align:center;font-size:11px;color:#7a6a5a;background:#0c1828;border-top:1px solid #c89b3c22;}
.sb-chat-nologin a{color:#c89b3c;text-decoration:none;}

/* 포인트 랭킹 */
.sb-rank-box{}
.sb-rank-head{padding:8px 12px;background:#0f2035;border-bottom:1px solid #c89b3c22;font-size:12px;font-weight:700;color:#c89b3c;}
.sb-rank-row{display:flex;align-items:center;gap:6px;padding:5px 12px;border-bottom:1px solid #c89b3c0d;}
.sb-rank-row:last-child{border-bottom:none;}
.sb-rank-medal{font-size:14px;width:20px;flex-shrink:0;text-align:center;}
.sb-rank-nick{flex:1;font-size:12px;color:#eedcb8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-rank-pts{font-size:12px;color:#c89b3c;font-weight:700;white-space:nowrap;}

.cat-badge-lol{font-size:11px;padding:1px 7px;border-radius:2px;margin-right:6px;background:#0d1b2a;color:#c89b3c;border:1px solid #c89b3c44;}
.cat-badge-patch{font-size:11px;padding:1px 7px;border-radius:2px;margin-right:6px;background:#0a2a1a;color:#4caf50;border:1px solid #4caf5044;}

/* 1024px 이하 - 네비 폰트/패딩 축소 */
@media(max-width:1024px){
  .nav-inner{padding:0 8px 0 220px;}
  .nav-item>a{font-size:13px;padding:12px 8px;}
}

/* 900px 이하 - 더 축소 */
@media(max-width:900px){
  .nav-inner{padding:0 4px 0 210px;}
  .nav-item>a{font-size:12px;padding:12px 6px;}
}
@media(max-width:768px){
  /* iOS 줌 방지 */
  input, textarea, select { font-size:16px !important; }
  /* 페이지네이션이 모바일 채팅바에 안 가리도록 */
  .pagination { padding-bottom: 56px !important; }
  .page-content { padding-bottom: 56px; }

  /* 하단 고정 채팅 토글 바 */
  #mob-chat-bar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:44px;
    background:#0c1828;
    border-top:2px solid #c89b3c66;
    display:flex;
    align-items:center;
    padding:0 16px;
    font-size:13px;
    font-weight:700;
    color:#c89b3c;
    cursor:pointer;
    z-index:200;
    user-select:none;
  }

  /* 채팅 패널 - 기본 숨김, 하단 바 위에 위치 */
  #mob-chat-panel{
    display:none;
    position:fixed;
    bottom:44px;
    left:0;
    right:0;
    height:26vh;
    background:#070f1a;
    border-top:1px solid #c89b3c33;
    z-index:199;
    flex-direction:column;
    overflow:hidden;
  }
  #mob-chat-panel.open{
    display:flex !important;
  }

  /* 기존 플로팅 버튼 숨김 */
  .chat-float-btn{ display:none !important; }
  .chat-mobile-panel{ display:none !important; }
  .chat-mobile-dim{ display:none !important; }
}

/* PC에서 플로팅 버튼 숨김 */
@media(min-width:769px){
  .chat-float-btn{display:none !important;}
  .chat-mobile-panel{display:none !important;}
  .chat-mobile-dim{display:none !important;}
  #mob-chat-bar{display:none !important;}
  #mob-chat-panel{display:none !important;}
}

.sb-chat-line img{display:inline-block;vertical-align:middle;overflow:visible;flex-shrink:0;}
.sb-user-nick img{position:relative;top:0;flex-shrink:0;}

/* 페이지네이션 */
.pg-btn{padding:6px 12px;background:#0a1628;border:1px solid #c89b3c33;color:#bda07a;font-size:13px;cursor:pointer;border-radius:3px;transition:all .15s;}
.pg-btn:hover{background:#c89b3c22;border-color:#c89b3c;color:#c89b3c;}
.pg-btn.on{background:#c89b3c;color:#010a13;border-color:#c89b3c;font-weight:700;}

/* ═══ 상성계산기 배너 ═══ */
@keyframes mu-bd{0%{background-position:0 0,0% 0}100%{background-position:0 0,300% 0}}
@keyframes mu-sh{0%{left:-75%;opacity:1}40%{left:125%;opacity:1}41%{opacity:0}100%{left:125%;opacity:0}}
#mu-bn{position:relative;overflow:hidden;cursor:pointer;display:block;border:2px solid transparent;background-image:linear-gradient(#071828,#071828),linear-gradient(90deg,#c89b3c,#f0d070,#c89b3c,#7a5a1a,#c89b3c);background-origin:border-box;background-clip:padding-box,border-box;background-size:100% 100%,300% 100%;animation:mu-bd 2.5s linear infinite;}
#mu-bn img{width:100%;height:auto;display:block;}
.mu-shine{position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:mu-sh 3s ease-in-out infinite;pointer-events:none;}