/* ── 모바일 카드 레이아웃: 선적 한 건 = 카드 한 장 (미국 표 #vtable/#otable, 호주 표 .cg-table 공통) ──
   칸마다 data-l 제목 + 정확히 2줄. actual/scheduled 글자는 A(초록)/S(하늘색) 배지로 바꾼다.
   이 파일은 index.html 의 <link id="mobile-cards-css" media="(max-width: 900px)"> 로 켜진다.
   폰이 "데스크톱 사이트" 모드라 폭이 속여져도 켜지도록 device-mode.js 가 media 를 'all' 로 바꾼다.
   (PC 에는 적용되지 않는 규칙만 둔다. PC 에도 필요한 규칙은 style.css 맨 아래.) */
#vtable, #otable, .cg-table-wrap .cg-table { display: block; width: 100%; min-width: 0; border: 0; }
#vtable thead, #otable thead, .cg-table thead { display: none; }
#vtable tbody, #otable tbody, .cg-table tbody { display: block; }
#vtable tr, #otable tr, .cg-table tr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px; padding: 12px; border-bottom: 1px solid var(--line);
}
#vtable td, #otable td, .cg-table td {
  display: block; padding: 0; border: 0; min-width: 0; white-space: nowrap; font-size: 12px;
}
#vtable td:first-child, #otable td:first-child, .cg-table td:first-child {
  grid-column: 1 / -1; white-space: normal;
}
#vtable td:not(:first-child)::before, #otable td:not(:first-child)::before,
.cg-table td:not(:first-child)::before {
  content: attr(data-l); display: block; margin-bottom: 3px;
  font-family: 'IBM Plex Mono'; font-size: 8.5px; letter-spacing: .06em; color: var(--fog);
}
#vtable .dt, #otable .dt, .cg-table .dt { font-size: 11.5px; }
#vtable .eta-lbl, #otable .eta-lbl, .cg-table .eta-lbl { min-width: 27px; }
/* 상태 글자 → 배지 */
#vtable .est-a, #vtable .est-s, #otable .est-a, #otable .est-s, .cg-table .est-a, .cg-table .est-s {
  display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: 1px;
  border-radius: 2px; font-size: 0; text-align: center; line-height: 13px;
}
#vtable .est-a::before, #otable .est-a::before, .cg-table .est-a::before,
#vtable .est-s::before, #otable .est-s::before, .cg-table .est-s::before {
  font-family: 'IBM Plex Mono'; font-size: 9px; font-weight: 600;
}
#vtable .est-a::before, #otable .est-a::before, .cg-table .est-a::before { content: 'A'; }
#vtable .est-s::before, #otable .est-s::before, .cg-table .est-s::before { content: 'S'; }
#vtable .est-a, #otable .est-a, .cg-table .est-a { background: #1F7A55; color: #E6FFF4; }
#vtable .est-s, #otable .est-s, .cg-table .est-s { background: #4FA9D6; color: #06222F; }
.cg-table .est-note { display: block; margin: 0 0 0 31px; font-size: 10px; }
/* 반출·반납 칸: 경과 문구는 숨기고 간격 칩만 */
#vtable .pa-na + .pa-note, #otable .pa-na + .pa-note { display: none; }
#vtable .pa-span, #otable .pa-span { margin-left: 5px; min-width: 0; font-size: 10px; padding: 0 4px; }
#vtable .gapbox, #otable .gapbox { margin-left: 5px; }
.cg-table .cg-edit { margin-left: auto; }

/* ── 아주 좁은 폰(≤ 360px 포함) 보정 ── */
@media (max-width: 760px) {
  /* 호주 그룹 제목줄: 줄바꿈 허용, ADD 버튼은 한 줄 전체 폭 */
  .cg-group-head { flex-wrap: wrap; row-gap: 8px; }
  .cg-group-head .cg-add { flex: 1 1 100%; max-width: 100%; white-space: normal; }
  /* 하단 탭바: 탭이 많아도 폭을 균등 분할하고 글자·여백을 줄인다 */
  .ship-tabbar button { min-width: 0; padding-left: 0; padding-right: 0; }
}
@media (max-width: 380px) {
  .ship-tabbar { padding-left: 2px; padding-right: 2px; }
  .ship-tabbar button { font-size: 9px; letter-spacing: .04em; gap: 3px; }
  .ship-tabbar button svg { width: 18px; height: 18px; }
}