/* mobile-tokens.css — 모바일 전용 디자인 토큰 (데스크톱 variables.css와 격리) */
/* 본앱 데스크톱 코드는 일절 영향 없음 — 토큰 추가만 */

:root {
  /* 터치·레이아웃 */
  --touch-min: 44px;                              /* Apple HIG 터치 타겟 최소 */
  --tabbar-height: 60px;                          /* 모바일 하단 탭바 표준 높이 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* 모바일 본문 권장 (가상 키보드 자동 줌인 방지: 16px↑) */
  --m-font-body: 16px;
  --m-font-label: 14px;
  --m-font-meta: 13px;
  --m-font-tab: 12px;
}

@media screen and (max-width: 599px) {
  .m-home-icon {
    width: 22px;
    height: 22px;
    display: block;
  }

  #screen-wordlist .wlm-top-back,
  .mwb-mobile-only .mwb-top-back,
  #screen-sentence .swbm-top-back,
  #screen-growth .grm-top-back,
  #screen-intro .intro-m-top-back {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-md, 8px) !important;
    background: #1F5F5B !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  #screen-wordlist .wlm-top-back .m-home-icon,
  .mwb-mobile-only .mwb-top-back .m-home-icon,
  #screen-sentence .swbm-top-back .m-home-icon,
  #screen-growth .grm-top-back .m-home-icon,
  #screen-intro .intro-m-top-back .m-home-icon {
    width: 18px !important;
    height: 18px !important;
  }

  #screen-wordlist .wlm-top-back:active,
  .mwb-mobile-only .mwb-top-back:active,
  #screen-sentence .swbm-top-back:active,
  #screen-growth .grm-top-back:active,
  #screen-intro .intro-m-top-back:active {
    background: #174945 !important;
  }
}