/* ============================================================================
   CMS Admin Responsive Design System

   역할
   - admin.css: 데스크톱 기본 디자인과 공통 컴포넌트 원형
   - saas.css: 현재 SaaS 테마와 다크 모드
   - 이 파일: 태블릿·모바일의 배치와 사용성만 보정하는 마지막 override 레이어

   원칙
   - 1025px 이상에서는 시각 디자인을 변경하지 않는다.
   - 색상·폰트·그림자 등 브랜드 표현은 재정의하지 않는다.
   - 정보는 숨기기보다 재배치하고, 넓은 표는 가로 스크롤을 유지한다.
   - 공통 클래스만 다루며 페이지별 미적 재설계는 하지 않는다.

   Breakpoints
   - Tablet : 1024px 이하
   - Mobile :  767px 이하
   - Compact:  480px 이하
   ============================================================================ */

:root {
  /* JS(admin.js) TABLET_BREAKPOINT와 의미상 동일한 디자인 시스템 기준값. */
  --viewport-tablet: 1024px;
  --viewport-mobile: 767px;
  --viewport-compact: 480px;
  --touch-target-min: 44px;
}

/* ----------------------------------------------------------------------------
   Tablet shell (<= 1024px)
   역할: 고정 사이드바를 off-canvas 탐색으로 전환하고 본문 폭을 확보한다.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --content-padding: 20px;
    --content-gap: 20px;
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .admin-sidebar {
    width: min(var(--sidebar-width), 86vw);
    transform: translateX(-100%);
    box-shadow: var(--shadow-sidebar);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  /* 데스크톱에서 저장된 접힘 상태가 태블릿 off-canvas 폭을 축소하지 않게 초기화한다. */
  body.sidebar-collapsed .admin-sidebar {
    width: min(var(--sidebar-width), 86vw);
  }

  body.sidebar-collapsed .menu-text,
  body.sidebar-collapsed .menu-arrow,
  body.sidebar-collapsed .sidebar-section-label {
    width: auto;
    opacity: 1;
    overflow: visible;
  }

  body.sidebar-collapsed .menu-link {
    justify-content: flex-start;
    padding: 10px var(--space-3);
  }

  body.sidebar-collapsed .menu-link::before {
    display: block;
  }

  body.sidebar-collapsed .menu-item.open > .submenu {
    display: block;
  }

  .sidebar-overlay {
    display: block;
  }

  .cms-main,
  .admin-content,
  body.sidebar-collapsed .admin-content,
  .admin-footer,
  body.sidebar-collapsed .admin-footer {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Header: 검색 영역을 접고 업무·사이트·사용자 동작을 우선한다. */
  .header-center {
    display: none;
  }

  .admin-header {
    padding-inline: var(--space-4);
  }

  .header-left,
  .header-right,
  .header-actions {
    min-width: 0;
  }

  .header-right {
    margin-left: auto;
  }

  /* Page header: 제목과 동작은 줄바꿈하되 기존 버튼 표현은 유지한다. */
  .page-header,
  .cms-page-header {
    align-items: stretch;
  }

  .page-actions,
  .cms-page-header__actions {
    max-width: 100%;
  }

  /* Summary cards: 4열/3열 정보를 태블릿에서 2열로 보존한다. */
  .summary-cards,
  .summary-cards-3,
  .summary-cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Split/dashboard layouts: 보조 패널을 본문 아래로 이동한다. */
  .split-layout,
  .split-layout-half,
  .dashboard-grid,
  .stats-grid,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-left {
    position: static;
  }

  .split-layout-half .split-panel > .panel {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  /* Forms: 4열은 2열, 각 필드는 자신의 그리드 폭보다 커지지 않는다. */
  .form-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row,
  .form-row-2,
  .form-row-3,
  .form-row-4,
  .form-grid,
  .form-grid-modal,
  .form-group {
    min-width: 0;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  /* Tables: 열 삭제 대신 컨테이너 내부 가로 스크롤을 표준 동작으로 삼는다. */
  .table-wrap,
  .menu-tree-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap > .data-table,
  .table-wrap > table {
    width: max-content;
    min-width: 100%;
  }

  .perm-table {
    min-width: 720px;
  }

  .table-toolbar,
  .table-footer,
  .panel-header {
    flex-wrap: wrap;
  }

  /* Tabs/pagination: 항목 수가 많아도 뷰포트를 밀어내지 않는다. */
  .tab-nav,
  .pagination {
    max-width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
  }

  /* Modal: 태블릿 높이 안에서 header/footer를 유지하고 body만 스크롤한다. */
  .modal-dialog {
    width: min(100%, 840px);
    max-height: calc(100dvh - 40px);
  }

  .modal-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ----------------------------------------------------------------------------
   Mobile components (<= 767px)
   역할: 공통 컴포넌트를 한 열과 터치 조작 중심으로 재배치한다.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-height: 60px;
    --content-padding: 16px;
    --content-gap: 16px;
  }

  /* Header component: 핵심 탐색·사이트·사용자만 남겨 가로 넘침을 방지한다. */
  .admin-header {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .header-left,
  .header-right {
    gap: var(--space-2);
  }

  #quick-action-btn,
  #theme-toggle-btn {
    display: none;
  }

  .header-user-info,
  .header-user-toggle > .icon,
  .header-site-key {
    display: none;
  }

  .header-user-toggle {
    padding: 3px;
  }

  .header-site-toggle {
    width: auto;
    max-width: 150px;
    padding-inline: var(--space-2);
  }

  .header-site-label {
    display: block;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-site-menu,
  .header-user-menu {
    position: fixed;
    top: calc(var(--header-height) - 2px);
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-width: none;
  }

  /* Breadcrumb component: 한 줄 넘침 대신 줄바꿈한다. */
  .breadcrumb,
  .cms-breadcrumb__list {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Page-header component: 제목 다음 줄에 페이지 동작을 배치한다. */
  .page-header,
  .cms-page-header {
    flex-direction: column;
  }

  .page-title-area,
  .cms-page-header__main {
    min-width: 0;
    width: 100%;
  }

  .page-title,
  .cms-page-header__title {
    font-size: var(--font-size-xl);
    overflow-wrap: anywhere;
  }

  .page-actions,
  .cms-page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Summary-card component: 수치 카드를 한 열로 쌓는다. */
  .summary-cards,
  .summary-cards-3,
  .summary-cards-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Panel component: 표현은 유지하고 내부 여백만 모바일 공간에 맞춘다. */
  .panel-header,
  .panel-body,
  .panel-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-title,
  .panel-meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Form component: 모든 다열 입력 그룹을 한 열로 전환한다. */
  .form-row,
  .form-row-2,
  .form-row-3,
  .form-row-4,
  .form-grid,
  .form-grid-modal,
  .date-range {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-form .form-actions,
  .detail-form .form-actions,
  .form-page-actions,
  .modal-footer {
    width: 100%;
    flex-wrap: wrap;
  }

  .search-form .form-actions > .btn,
  .search-form .form-actions > button,
  .detail-form .form-actions > .btn,
  .detail-form .form-actions > button,
  .form-page-actions > .btn,
  .form-page-actions > button {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Button component: 좁은 화면에서 문구가 잘리지 않도록 허용한다. */
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Table component: 표는 카드화하지 않고 열 의미를 유지한 채 스크롤한다. */
  .data-table th,
  .data-table td {
    white-space: nowrap;
  }

  .table-toolbar,
  .table-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar > *,
  .table-footer > * {
    max-width: 100%;
  }

  /* Tabs component: 한 줄 탭을 가로 스크롤 가능한 탐색으로 유지한다. */
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Pagination component: 페이지 수가 많으면 다음 줄로 자연스럽게 이동한다. */
  .pagination {
    gap: 4px;
  }

  /* Modal component: 모바일에서는 하단 시트 형태로 표시한다. */
  .modal {
    padding: var(--space-3);
    align-items: flex-end;
  }

  .modal-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Toast component: 화면 양옆 안전 여백을 제외한 전체 폭을 사용한다. */
  .toast-container {
    top: calc(var(--header-height) + var(--space-3));
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
  }

  .toast {
    width: 100%;
    max-width: none;
  }

  /* File/editor component: 파일명과 긴 문장이 뷰포트를 확장하지 않는다. */
  .file-list-item,
  .file-list-name,
  .file-dropzone-selection,
  .file-dropzone-selection-info,
  .detail-body,
  .cms-rich-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Chart component: 축을 축소하지 않고 가로 이동으로 데이터 가독성을 유지한다. */
  .chart-bars {
    height: 180px;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .chart-bar-item {
    flex: 0 0 48px;
  }
}

/* ----------------------------------------------------------------------------
   Compact mobile (<= 480px)
   역할: 최소 폭에서 헤더와 패널이 가로 스크롤을 만들지 않도록 압축한다.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --content-padding: 12px;
    --content-gap: 12px;
  }

  .admin-header {
    padding-inline: var(--space-2);
  }

  .logo-text,
  #notif-toggle-btn {
    display: none;
  }

  .header-site-toggle {
    max-width: 132px;
  }

  .header-site-label {
    max-width: 78px;
  }

  .panel-header,
  .panel-body,
  .panel-footer {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .summary-card-body,
  .cms-summary-card {
    padding: var(--space-4);
  }

  .summary-value {
    font-size: var(--font-size-xl);
  }

  .modal {
    padding: 0;
  }

  .modal-dialog {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .file-dropzone {
    padding: var(--space-5) var(--space-3);
  }

  .file-dropzone-selection {
    flex-wrap: wrap;
  }

  .file-dropzone-selection [data-file-clear] {
    width: 100%;
  }

  .file-upload-actions .btn {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------
   Touch input
   역할: 터치 장치에서만 주요 조작 요소의 최소 터치 영역을 확보한다.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (pointer: coarse) {
  .btn:not(.btn-xs),
  .header-icon-btn,
  .sidebar-toggle,
  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: var(--touch-target-min);
  }
}