/* ==== 관리자(Desktop 우선, Tablet 이하 최소 지원) ==== */
@media (max-width: 992px) {
  .sidebar {
    width: 64px;
  }
  .sidebar__group-title,
  .sidebar__link span.label {
    display: none;
  }
  .layout__content {
    padding: 16px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-section-row {
    grid-template-columns: 1fr;
  }
}

/* ==== 고객 Portal: 모바일 반응형 필수 ==== */
@media (max-width: 768px) {
  body.is-customer .header__menu-toggle {
    display: inline-flex;
  }
  /* 모바일 헤더에는 알림 + 햄버거(맨 오른쪽)만 남긴다. 이름+등급뱃지/내 정보/로그아웃은
     공간이 좁아 다 욱여넣으면 로그아웃 버튼 글자가 한 글자씩 세로로 쪼개지는 문제가
     있었다(실측) - "내 정보"와 "로그아웃"은 햄버거를 눌러 여는 사이드 메뉴 맨 아래로 옮겼다
     (sidebar-customer.ejs 참고). */
  body.is-customer .header__user,
  body.is-customer .header__profile-link,
  body.is-customer .header__logout-form {
    display: none;
  }
  body.is-customer .header__right {
    gap: 8px;
  }
  body.is-customer .header {
    padding: 0 12px;
  }
  body.is-customer .header__icon-link {
    width: 34px;
    height: 34px;
  }
  body.is-customer .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 220px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 90;
    overflow-y: auto;
  }
  body.is-customer .sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-md);
  }
  body.is-customer .sidebar__group-title,
  body.is-customer .sidebar__link span.label {
    display: block;
  }
  /* 헤더에서 뺀 "내 정보"/"로그아웃"을 이 사이드 메뉴 맨 아래에서 다시 보여준다
     (기본은 layout.css .sidebar__mobile-only { display:none } 로 숨겨져 있다). */
  body.is-customer .sidebar__mobile-only {
    display: block;
  }
  body.is-customer a.sidebar__mobile-only {
    display: flex;
  }
  body.is-customer .layout__content {
    padding: 14px;
  }
  body.is-customer .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  body.is-customer .stat-card {
    padding: 14px;
  }
  body.is-customer .stat-card__value {
    font-size: 20px;
  }

  /* Desktop 표를 그대로 축소하지 않고 카드형 UI로 전환 */
  body.is-customer .table-wrap {
    display: none;
  }
  body.is-customer .card-list {
    display: block;
  }

  body.is-customer .form-row {
    flex-direction: column;
  }
  body.is-customer .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .auth-box {
    padding: 24px 18px;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}