/*
 * 화면 공통 스타일 (Tailwind 로 표현하기 어려운 것만 여기에 둔다).
 *
 * Tailwind 유틸리티는 @layer 안에 있고 이 파일은 레이어 밖이라 여기 규칙이 항상 이긴다.
 * 그래서 숨김(.hidden)처럼 이겨서는 안 되는 것은 선택자에 :not(.hidden) 을 붙여 비켜 간다.
 */

/* ──────────────────────────────────────────────────────────────────────────
   스마트폰에서 표 → 카드
   폭 768px 미만(안드로이드 폰 세로 360~430px)에서 표 한 행을 카드 한 장으로 접는다.
   가로 스크롤 없이 엄지로 훑어볼 수 있게 하려는 것.

   쓰는 법: <table data-cards> 로 켜고, 칸의 역할은 <th data-card="..."> 로 준다.
     title  제목줄(거래처명·품목명 …)          sub    제목 아래 작은 글씨(코드·구분 …)
     action 카드 맨 아래 버튼줄(수정·삭제)      check  일괄선택 체크박스
     hide   폰에서는 감춤
   나머지 칸은 "라벨  값" 한 줄로 깔린다. 라벨은 <thead> 의 th 에서 JS(dev_mobile)가 옮겨 준다.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  table[data-cards] { display: block; width: 100%; white-space: normal; }
  table[data-cards] > thead { display: none; }
  table[data-cards] > tbody,
  table[data-cards] > tfoot { display: block; }

  /* 행 하나 = 카드 한 장. 칸 순서는 DOM 을 건드리지 않고 order 로만 바꾼다
     (체크박스·폼 전송이 DOM 순서에 걸려 있어서 옮기면 깨진다). */
  table[data-cards] > tbody > tr,
  table[data-cards] > tfoot > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
  }
  table[data-cards] > tfoot > tr { background: #f8fafc; }

  /* 기본 칸 — "라벨  값" 한 줄 */
  table[data-cards] > tbody > tr > td:not(.hidden),
  table[data-cards] > tfoot > tr > td:not(.hidden) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    order: 2;
    padding: 0.1875rem 0;
    border: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: right;
  }
  table[data-cards] td[data-label]:not([data-card])::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: #6b7280;
    font-size: 0.6875rem;
    font-weight: 400;
    text-align: left;
  }
  /* 값이 비었거나 "-" 인 칸은 카드에서 뺀다 — 빈 줄만 늘어놓으면 읽기 힘들다 */
  table[data-cards] td[data-empty] { display: none !important; }

  /* 제목줄 */
  table[data-cards] td[data-card="title"]:not(.hidden) {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 0.125rem;
  }
  /* 제목 아래 작은 글씨 — 여러 개면 가운뎃점으로 이어 붙인다 */
  table[data-cards] td[data-card="sub"]:not(.hidden) {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-start;
    text-align: left;
    font-size: 0.6875rem;
    color: #6b7280;
    padding: 0 0 0.375rem;
  }
  table[data-cards] td[data-card="sub"]:not([data-first])::before {
    content: "·";
    margin: 0 0.375rem;
    color: #d1d5db;
  }
  /* 제목·작은글씨 묶음과 값 목록 사이 구분선 — 첫 값칸(JS 가 data-first 로 표시) 위에 긋는다 */
  table[data-cards] td[data-first]:not([data-card]):not(.hidden) {
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
  }

  /* 일괄선택 체크박스 — 제목과 같은 줄 왼쪽 */
  table[data-cards] td[data-card="check"]:not(.hidden) {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    padding: 0 0.625rem 0 0;
  }
  table[data-cards] td[data-card="check"] input[type="checkbox"] { width: 1.125rem; height: 1.125rem; }

  /* 카드 맨 아래 버튼줄 — 손가락으로 누를 수 있게 칩 모양으로 키운다.
     버튼 칸이 여러 개(입금처리 + 수정 …)면 한 줄에 나란히 놓는다. */
  table[data-cards] td[data-card="action"]:not(.hidden) {
    order: 3;
    flex: 0 1 auto;
    width: auto;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.5rem 0 0;
  }
  table[data-cards] td[data-card="action"] a,
  table[data-cards] td[data-card="action"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.75rem;
    text-decoration: none;
  }
  table[data-cards] td[data-card="action"] form { display: inline-flex; margin: 0; }
  table[data-cards] td[data-card="action"][data-first] { margin-top: 0.375rem; }
  /* "|" 같은 구분 기호는 칩 사이에서 군더더기 */
  table[data-cards] td[data-card="action"] > span:not([class*="bg-"]) { display: none; }

  table[data-cards] td[data-card="hide"] { display: none !important; }

  /* 데이터 없음·이월·합계처럼 colspan 으로 가로지르는 칸 */
  table[data-cards] td[colspan]:not(.hidden) {
    order: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  table[data-cards] td[colspan]::before { content: none; }

  /* 한 칸에 두 줄을 넣어 둔 곳(최종거래일 + 최근입금 같은) — 라벨 아래로 내려 쌓는다 */
  table[data-cards] td > div {
    flex: 1 0 100%;
    text-align: right;
  }

  /* 표에서 한 줄로 줄여 두던 칸은 카드에선 다 펼친다 */
  table[data-cards] td,
  table[data-cards] td * { white-space: normal; }
  /* 이메일·바코드처럼 띄어쓰기 없는 긴 값이 카드를 밀어내지 않게 */
  table[data-cards] td { overflow-wrap: anywhere; }
  table[data-cards] td .truncate,
  table[data-cards] td.truncate {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    max-width: none;
  }
  table[data-cards] td { max-width: none !important; }

  /* 카드 목록에는 표 테두리·그림자가 겹쳐 보여 껍데기를 벗긴다 */
  [data-cards-shell] {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
}

/* 폰에서 왼쪽 메뉴를 서랍으로 — 평소엔 화면 왼쪽 밖(-translate-x-full)에 있고 열 때만 들어온다.
   Tailwind v4 의 translate 유틸리티는 transform 이 아니라 translate 속성을 쓰므로 같은 속성으로 되돌린다. */
@media (max-width: 767.98px) {
  [data-sidebar].is-open { translate: 0 0; }
}

/* 폰에서 입력칸이 16px 미만이면 안드로이드 크롬이 화면을 확대해 버린다 */
@media (max-width: 767.98px) {
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    font-size: 16px;
  }
}