/* ============================================================
   inputplay 공통 스타일 — 반응형 오버라이드
   각 페이지의 인라인 <style> "뒤에" 로드해서 덮어씁니다.
   <link rel="stylesheet" href="/common.css">
   ============================================================ */

/* ---------- 상단 네비: 모바일 가로 스크롤 ---------- */
@media (max-width: 768px) {
  .ip-top-nav,
  .top-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    height: auto;
    min-height: 48px;
    padding: 6px 12px;
    gap: 2px;
  }
  .ip-top-nav::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar { display: none; }

  .ip-top-nav .brand,
  .top-nav .brand { margin-right: 8px; }
  .top-nav .brand img { height: 28px !important; }
  .ip-top-nav .divider,
  .top-nav .divider { display: none; }

  /* 터치 타깃 확보 */
  .ip-top-nav a.nav-tab,
  .top-nav a.nav-tab {
    font-size: 0.88em;
    padding: 10px 10px;
    flex-shrink: 0;
  }
  .ip-top-nav .nav-right,
  .top-nav .nav-right {
    margin-left: 8px;
    flex-shrink: 0;
  }
  .ip-top-nav .nav-right a,
  .top-nav .nav-right a {
    padding: 9px 12px;
    font-size: 0.85em;
  }
}

/* 스크롤 가능함을 알리는 우측 페이드 힌트 */
@media (max-width: 768px) {
  body { position: relative; }
  .top-nav::after {
    content: '';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 1px;
    height: 1px;
  }
}

/* ---------- 광고 슬롯: AdSense 승인 전까지 전역 숨김 ---------- */
.ad-slot { display: none !important; }

/* ---------- Buy Me a Coffee 위젯: 모바일 숨김 ---------- */
@media (max-width: 768px) {
  #bmc-wbtn, .bmc-btn-container, iframe[src*="buymeacoffee"] {
    display: none !important;
  }
}

/* ---------- 모바일 가독성 기준선 ---------- */
@media (max-width: 768px) {
  body { font-size: 16px; }

  .card-desc { font-size: 0.95em; }
  .card-btn { padding: 12px 20px; min-height: 44px; box-sizing: border-box; }

  main { padding-left: 16px; padding-right: 16px; }

  footer { font-size: 0.85em; padding: 20px 16px; }
}

/* ---------- index: 모바일 카드 순서 재배치 ----------
   main(flex-column)에서 연습 프로그램을 가이드보다 위로 */
@media (max-width: 768px) {
  main > .brand-center       { order: 0; }
  main > .sec-programs       { order: 1; }
  main > .grid-programs      { order: 2; }
  main > .sec-guides         { order: 3; }
  main > .grid-guides        { order: 4; }
}

/* ---------- index: dinolit 배너 모바일 축약 ---------- */
@media (max-width: 768px) {
  .promo-banner { padding: 8px 14px !important; gap: 10px !important; font-size: 0.8em !important; }
  .promo-banner .promo-text-long { display: none; }
  .promo-banner a { padding: 5px 12px !important; font-size: 0.85em !important; }
}