/* ============================================================
   그룹웨어 휴대폰 화면 (900px 이하) — 20~40대 기준으로 가볍게
     · 큰 제목, 짧은 설명 · 카드는 테두리 없이 둥글게 · 버튼 40px (주 동작 · 큰 버튼만 48px)
     · 입력칸 글자 16px — 아이폰은 16px 보다 작으면 누를 때 화면이 확대된다
     · 강조색은 테마(theme.css)에서 주황으로
   PC 화면은 그대로. 색 · 크기는 디자인 시스템 이름만 쓴다
   ============================================================ */
@media (max-width: 900px) {
  /* 제목 */
  .page { padding: var(--kg-space-5) var(--kg-space-4) var(--kg-space-16); }
  .page-h { margin-bottom: var(--kg-space-4); }
  .page-h h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
  .page-h .desc { font-size: var(--kg-fs-xs); color: var(--kg-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* 카드 — 테두리 없이 둥글게 */
  .card { border-color: transparent; border-radius: 16px; }
  .card-h { border-bottom-color: var(--kg-line); }

  /* 버튼 */
  .btn { min-height: 40px; border-radius: 10px; }
  .btn.sm { min-height: 34px; border-radius: 9px; }
  .btn.lg, .btn.block { min-height: 48px; border-radius: 12px; font-size: var(--kg-fs-base); }
  .btn.primary { font-weight: 700; }

  /* 입력칸 — 글자 16px (아이폰 확대 막기), 둥글게 */
  input[type=text], input[type=password], input[type=number], input[type=tel],
  input[type=date], input[type=time], input[type=search], select, textarea {
    min-height: 44px; font-size: 16px; border-radius: 10px;
  }
  table.tbl input, table.tbl select { min-height: 40px; font-size: 16px; }

  /* 칩 · 탭 */
  .chip { border-radius: var(--kg-radius-full); padding: 2px var(--kg-space-3); }
  .cat-tab { font-size: 15px; }

  /* 아래 탭 — 고른 칸만 강조색 */
  .mtab[aria-current="page"] { color: var(--kg-brand); }

  /* 맨 위 막대 — 선 없이, 검색은 돋보기만 (누르면 가로로 펼쳐짐) */
  .topbar { position: relative; border-bottom-color: transparent; }
  .gs { width: 40px; flex: none; margin-left: auto; }
  .gs-input { padding: 0 0 0 34px !important; font-size: 16px !important; min-height: 38px !important; border-radius: 999px !important; }
  .gs:not(:focus-within):not(.open) .gs-input { color: transparent; cursor: pointer; }
  .gs:not(:focus-within):not(.open) .gs-input::placeholder { color: transparent; }
  .gs:focus-within, .gs.open { position: absolute; left: var(--kg-space-3); right: var(--kg-space-3); width: auto; z-index: 60; }
  .gs:focus-within .gs-input, .gs.open .gs-input { padding-right: var(--kg-space-4) !important; }
  .gs-kbd { display: none; }

  /* 상자형 토글 — 한 줄로 (넘치면 옆으로 밀기) */
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }

  /* 목록 도구줄 — 검색칸이 남는 자리를 채우고 버튼은 같은 줄에 */
  .tb-right .tb-search { flex: 1; width: auto; min-width: 0; }

  /* 근무표 달력 — 칸마다 선 대신 옅은 바탕 */
  .sc-cell { border-color: transparent; border-radius: 12px; min-height: 64px; }
  .sc-cell.is-today { border-color: var(--kg-brand); }

  /* 제품 상세 — 왼쪽 사진, 오른쪽 위 이름·주소, 그 아래 가격 · 판매 상태 · ▾ */
  .pq-row { grid-template-columns: 56px minmax(0, 1fr) auto auto; column-gap: var(--kg-space-3); row-gap: var(--kg-space-2); padding: var(--kg-space-3) var(--kg-space-4); }
  .pq-row > .pq-thumb { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; align-self: start; }
  .pq-main { grid-column: 2 / -1; grid-row: 1; }
  .pq-sale { justify-self: end; }
  .pq-url a, .pq-url span { word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 사진 없는 레시피 — 빈 자리를 낮게 */
  .mn-photo.is-empty { aspect-ratio: 2 / 1; }

  /* ---------- 표 → 카드 (core/ui/cardify.js 가 칸마다 머리글을 붙인다) ----------
     줄 하나 = 카드 한 장. 첫 칸은 카드 제목, 나머지는 "머리글 / 값" 두 칸씩. 끝의 ▾ 는 카드 오른쪽 위 */
  .table-wrap:has(> table.tbl:not(.keep-table)) { overflow: visible; }
  .table-wrap > table.tbl:not(.keep-table) { min-width: 0; }
  .card:has(table.tbl:not(.keep-table)) { background: transparent; }
  table.tbl:not(.keep-table), table.tbl:not(.keep-table) tbody { display: block; }
  table.tbl:not(.keep-table) thead { display: none; }
  table.tbl:not(.keep-table) tbody { display: grid; gap: var(--kg-space-3); }
  table.tbl:not(.keep-table) tbody tr {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--kg-space-3) var(--kg-space-4);
    padding: var(--kg-space-4); border-radius: 16px; background: var(--kg-surface);
  }
  table.tbl:not(.keep-table) tbody tr:hover { background: var(--kg-surface); }
  table.tbl:not(.keep-table) tbody tr.is-open { box-shadow: 0 0 0 2px var(--kg-brand) inset; background: var(--kg-surface); }
  table.tbl:not(.keep-table) tbody td {
    display: block; padding: 0; border: 0; min-width: 0; text-align: left !important;
    font-size: var(--kg-fs-sm); font-variant-numeric: tabular-nums;
  }
  table.tbl:not(.keep-table) tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; color: var(--kg-ink-3); letter-spacing: -.01em;
  }
  /* 첫 칸 = 제목 (머리글 없이, 크게) */
  table.tbl:not(.keep-table) tbody td:first-child { grid-column: 1 / -1; padding-right: 44px; font-size: var(--kg-fs-base); }
  table.tbl:not(.keep-table) tbody td:first-child::before { display: none !important; }
  table.tbl:not(.keep-table) tbody td:first-child .strong, table.tbl:not(.keep-table) tbody td:first-child b { font-size: 16px; }
  /* 빈 칸은 숨긴다 */
  table.tbl:not(.keep-table) tbody td:empty { display: none; }
  /* ▾ 펼치기 · 아이콘 버튼만 있는 칸은 카드 오른쪽 위 */
  table.tbl:not(.keep-table) tbody td:has(> .row-toggle:only-child) { position: absolute; top: var(--kg-space-2); right: var(--kg-space-2); }
  table.tbl:not(.keep-table) tbody td:has(> .row-toggle:only-child)::before { display: none !important; }
  /* 칸 안 입력칸은 꽉 차게 */
  table.tbl:not(.keep-table) tbody td input, table.tbl:not(.keep-table) tbody td select { width: 100%; }
  /* 펼친 줄(수정 칸) — 카드 아래로 넓게 */
  table.tbl:not(.keep-table) tbody tr.inline-row { display: block; padding: 0; background: transparent; }
  table.tbl:not(.keep-table) tbody tr.inline-row > td { display: block; padding: 0 !important; }
  table.tbl:not(.keep-table) tbody tr.inline-row > td::before { display: none !important; }
  tr.inline-row .inline-panel { margin: 0; border-radius: 16px; }
  /* 묶음 제목 줄(칸 하나) */
  table.tbl:not(.keep-table) tbody tr:has(> td:only-child) { display: block; padding: var(--kg-space-2) var(--kg-space-1) 0; background: transparent; }
  table.tbl:not(.keep-table) tfoot { display: block; }
  table.tbl:not(.keep-table) tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kg-space-2); padding: var(--kg-space-4); }
  table.tbl:not(.keep-table) tfoot td { display: block; border: 0; padding: 0; }
  /* 상태 표시(보류 · 단종 · 선물세트) — 칸마다가 아니라 카드 왼쪽 끝에 한 줄 */
  table.tbl:not(.keep-table) tbody tr > td { background: transparent !important; box-shadow: none !important; }
  table.tbl:not(.keep-table) tbody tr.is-paused  { box-shadow: inset 4px 0 0 var(--kg-warn); }
  table.tbl:not(.keep-table) tbody tr.is-ended   { box-shadow: inset 4px 0 0 var(--kg-line-2); }
  table.tbl:not(.keep-table) tbody tr.is-planned { box-shadow: inset 4px 0 0 var(--kg-planned); background: var(--kg-planned-row); }
  table.tbl:not(.keep-table) tbody tr.is-gift    { box-shadow: inset 4px 0 0 var(--kg-gift); background: var(--kg-gift-row); }

  /* 대시보드 숫자 — 한 줄에 둘 (2×2), 테두리 없이 */
  .dash-kpis { grid-template-columns: 1fr 1fr; gap: var(--kg-space-3); }
  .dash-kpi { border-color: transparent; border-radius: 16px; padding: var(--kg-space-4); }
  .dash-kpi-v { font-size: 22px; }
  .dash-kpi-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 레시피 카드 · 기타 목록 상자 — 테두리 없이 둥글게 */
  .mn-card { border-color: transparent; border-radius: 16px; }
}