/* 모바일 좌측 드로어 메뉴 + 반응형 보정 (style.css 뒤에 로드) */
.menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:none;background:none;color:var(--text);cursor:pointer;flex:0 0 auto;border-radius:9px}
.menu-btn:hover{background:var(--surface-sub)}
.menu-btn i{font-size:23px}
.side-backdrop{display:none}
@media(max-width:860px){
  .menu-btn{display:inline-flex}
  /* 사이드바를 좌측 슬라이드 드로어로 */
  .side{position:fixed;left:0;top:0;bottom:0;width:286px;max-width:86vw;max-height:none;margin:0;
    border-radius:0;border-top:none;border-bottom:none;border-left:none;z-index:90;
    transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.30)}
  .side-backdrop{display:block;position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.42);
    opacity:0;visibility:hidden;transition:opacity .24s}
  .side-backdrop.open{opacity:1;visibility:visible}
  .auth .bell{display:none}
  .board-head{flex-wrap:wrap;align-items:flex-start}
}
/* 브랜드 새싹 마크 */
.brand .mark{padding:0;min-width:36px;width:36px}
.brand .mark svg{display:block}

/* ===== 모바일 타이포·여백 축소 (글자·박스 너무 큰 문제) ===== */
@media(max-width:560px){
  body{font-size:15px}
  .hero{min-height:0;border-radius:18px}
  .hero-in{padding:20px 18px}
  .hero-in h1{font-size:21px;line-height:1.3}
  .hero-in p{font-size:13px;margin-top:8px;line-height:1.55}
  .hero-cta{margin-top:15px;gap:8px}
  .btn.big{padding:12px 18px;font-size:14.5px}
  .home-sec{margin-bottom:20px}
  .board-head h1{font-size:20px}
  .sec-h h2{font-size:16.5px}
  .benefits{gap:10px}
  .bf{padding:15px;gap:6px}
  .bf strong{font-size:14.5px}
  .bf span{font-size:12.5px;line-height:1.5}
  .empty{padding:30px 16px;font-size:13px}
  .proofbar .pf b{font-size:20px}
  .proofbar .pf span{font-size:11px}
}
/* ===== 하단 탭바 라벨 줄바꿈 방지 ===== */
@media(max-width:860px){
  .tb span{white-space:nowrap}
  .tb{font-size:10px;padding:6px 2px;gap:2px}
  .tb i{font-size:20px}
  .tb-fab{width:50px;height:50px}
}

/* ===== 상단바 가로 넘침 방지 (가입/버튼 잘림 → 가로 스크롤) ===== */
body{overflow-x:hidden}
@media(max-width:560px){
  .brand > span:not(.mark){display:none}   /* 사이트명 글자 숨김 → 로그인·가입 공간 확보 */
  .hero-cta{flex-wrap:wrap}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ===== 빈 게시판 '글쓰기' 버튼 아이콘 거대화 버그 수정 ===== */
.empty .btn .ti,
.empty-lg .btn .ti{display:inline-block;font-size:1em;margin:0;width:auto;height:auto;color:inherit}
/* 가로 넘침 추가 안전장치 */
html{overflow-x:hidden}

/* ===== 모바일 레이아웃 단일 컬럼 강제 ===== */
/* style.css의 ≤1080 2단 규칙이 소스 순서상 ≤860 규칙을 덮어써서
   본문이 왼쪽 236px 칸에 갇히고 오른쪽이 비던 버그 수정 */
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  /* 하단 가운데 글쓰기 버튼: 패딩 때문에 타원 되던 것 → 정원 */
  .tb-fab{padding:0;box-sizing:border-box;width:52px;height:52px;flex:0 0 52px;border-radius:50%}
  .tb-fab i{font-size:24px}
}

/* ===== 탭바 +버튼 타원 진짜 원인: .tb 가 추세그래프 막대(max-width:11px)와 충돌 ===== */
@media(max-width:860px){
  .tabbar .tb{max-width:none;width:auto;min-height:0}
  .tabbar .tb-fab{flex:0 0 52px;width:52px;height:52px;max-width:none;min-width:52px;
    padding:0;border-radius:50%;box-sizing:border-box;justify-content:center;align-items:center}
  .tabbar .tb-fab i{font-size:24px}
}

/* ===== 빈 게시판 '글쓰기' 버튼 글자 안 보임 수정 =====
   .empty a{color:primary} 가 초록버튼 위 초록글자로 만들어 안 보이던 것 → 흰색 */
.empty .btn,
.empty-lg .btn{color:#fff}
.empty .btn:hover,
.empty-lg .btn:hover{color:#fff}