/* =========================================================================
   autoprd 디자인 시스템 — components.css
   styles.css 다음에 로드. 토큰 재사용 + 유틸/컴포넌트 표준화 + 모바일 견고화.
   목적: 페이지별 인라인 스타일 남발 → 공통 컴포넌트/유틸로 수렴, 모바일 카드 오버플로 원천 차단.
   ========================================================================= */

:root {
    /* 간격 스케일 (인라인 px 대체용) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
}

/* ── 정렬/텍스트 유틸 ── */
.ta-left   { text-align: left  !important; }
.ta-center { text-align: center !important; }
.ta-right  { text-align: right !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* ── 정렬 가능한 테이블 헤더 ── */
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-arrow { opacity: .25; }
.sort-arrow.on { opacity: 1; }

/* ── 표준 툴바 (필터/액션 바) ── */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ui-toolbar-label { font-size: 12px; color: var(--text-secondary); margin-right: var(--sp-1); }

/* ── 표준 입력 필드 (.input) — 텍스트/날짜/숫자/셀렉트/textarea 디자인 통일 ── */
.input,
select.input,
textarea.input,
input.input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    height: 36px;  /* 텍스트·날짜·셀렉트 높이 통일 (date의 네이티브 높이 편차 제거) */
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-alpha); }
.input::placeholder { color: var(--text-muted); }
textarea.input { resize: vertical; height: auto; min-height: 72px; }

/* 셀렉트: 네이티브 화살표 제거 + 커스텀 셰브론 (브라우저 통일) */
select.input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer; padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
select.input:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* 날짜/시간 인풋: 높이·캘린더 아이콘 톤 통일 */
/* 날짜/시간 인풋: 네이티브 위젯 높이 편차 방지 — 명시 height 36px + 세로 패딩 0 */
input[type="date"].input,
input[type="datetime-local"].input,
input[type="time"].input,
input[type="month"].input {
    cursor: pointer;
    height: 36px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator,
input[type="month"].input::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .55; padding: 0; margin-left: 2px;
}
input[type="date"].input:hover::-webkit-calendar-picker-indicator { opacity: .85; }

/* 날짜 범위 플레이스홀더(시작일/종료일) — date 인풋은 placeholder 미지원 → ::before 오버레이로 빈 칸에 표시, 값/포커스 시 숨김 */
.date-ph { position: relative; }
.date-ph::before {
    content: attr(data-ph);
    position: absolute; inset: 1px 28px 1px 1px;
    display: flex; align-items: center; padding-left: 11px;
    background: var(--bg-secondary); color: var(--text-muted);
    font-size: 13px; border-radius: var(--radius);
    pointer-events: none;
}
.date-ph.has-value::before,
.date-ph:focus::before { content: none; }
/* 폼 미정의였던 .form-input은 .input과 동일하게 */
.form-input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; font-family: inherit; line-height: 1.4;
    background: var(--bg-secondary); color: var(--text-primary); outline: none; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-alpha); }

/* ── 컨트롤 박스: 서치/액션 컨트롤을 담는 흰 박스 (상품관리 일괄선택 박스처럼 테이블과 분리) ── */
.control-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
/* 검색 바도 흰 박스로 (상품 관리) */
.search-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

/* ── 탭 바: 컨트롤 행에 인라인으로 놓을 때 하단 마진 제거 ── */
.status-tabs.tabs-inline { margin-bottom: 0; }

/* ── 모바일 전용 표시(PC에선 숨김) — PC 테이블은 헤더 클릭 정렬이 있어 정렬 박스 불필요 ── */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .status-tabs.mobile-only { display: flex !important; }
}

/* ── 통일 페이지네이션: PC=pg-desktop(10), 모바일=pg-mobile(5) 전환 ── */
.pagination.pg-mobile { display: none; }
@media (max-width: 768px) {
    .pagination.pg-desktop { display: none; }
    .pagination.pg-mobile { display: flex; }
}

/* ── 칩(필터 버튼) ── */
.chip {
    border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary);
    border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; line-height: 1.4;
}
.chip:hover { background: var(--bg-primary); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 카운트 배지(.tab-count)를 탭/칩 공통으로 사용 — 활성 시 흰 톤으로 가시성 확보 */
.chip.active .tab-count { background: rgba(255, 255, 255, .25); }

/* ── 시맨틱 배지 (상태칩 외 일반용) ── */
.ui-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.ui-badge--default { background: var(--bg-tertiary); color: var(--text-secondary); }
.ui-badge--success { background: rgba(16,185,129,.12); color: #0a7e3d; }
.ui-badge--danger  { background: rgba(239,68,68,.12); color: var(--danger); }
.ui-badge--warning { background: rgba(245,158,11,.14); color: #b45309; }
.ui-badge--info    { background: rgba(59,130,246,.12); color: #1d4ed8; }

/* ── 경고(주황) 버튼 — 시스템 버튼군 보강 ── */
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { filter: brightness(.96); }

/* ── 행/카드 조건부 강조 (재고없음 등) ── */
.data-table tbody tr.row-warn,
.responsive-table tbody tr.row-warn { background: rgba(239, 68, 68, .07); }
/* 모바일 카드: 재고없음만 가시성 높은 빨강 — 카드 외곽선 + 내부 구분선(border-top) 빨강 */
.responsive-table tbody tr.row-warn { border-color: var(--danger); }
.responsive-table tbody tr.row-warn td { border-top-color: rgba(239, 68, 68, .4); }
/* 주의(노랑) 강조 — 변경 있음 등 */
.data-table tbody tr.row-attn,
.responsive-table tbody tr.row-attn { background: rgba(245, 158, 11, .10); }
.responsive-table tbody tr.row-attn { border-color: rgba(245, 158, 11, .6); }
.responsive-table tbody tr.row-attn td { border-top-color: rgba(245, 158, 11, .42); }

/* =========================================================================
   모바일 카드 변환 견고화 — 박스 이탈(오버플로) 원천 차단
   기존 .responsive-table 시스템을 전역으로 보강 (마이그레이션 안 한 페이지도 즉시 혜택)
   ========================================================================= */
@media (max-width: 768px) {
    /* flex 자식 축소 허용 → nowrap/고정폭 콘텐츠가 카드 밖으로 삐져나오는 것 방지 */
    .responsive-table td { min-width: 0; overflow: hidden; }
    .responsive-table td > * { max-width: 100%; box-sizing: border-box; }
    /* 긴 코드/URL/상품명 강제 줄바꿈 */
    .responsive-table td > div,
    .responsive-table td > span { overflow-wrap: anywhere; }
    /* 이미지가 카드폭 넘지 않게 */
    .responsive-table td img { max-width: 100%; height: auto; }
    /* 셀에 인라인 nowrap이 박혀 있어도 모바일에선 줄바꿈 허용 */
    .responsive-table td[style*="nowrap"] { white-space: normal !important; }
    /* 풀폭 셀 — 카드(flex-wrap)에서 1행 전체 차지.
       width:100%만으론 flex-shrink로 눌려 50%에 머물러서 flex-basis 강제 필요.
       col-full(신규 마이그레이션) + 레거시 상품명 셀 모두 적용. */
    .responsive-table td.col-full,
    .responsive-table td[data-label="상품"],
    .responsive-table td[data-label="상품명"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* 한 줄 3개 (UI.table mobileCols:3 → .cards-3). col-full 셀은 위 flex 규칙으로 전체폭 유지 */
    .responsive-table.cards-3 td { width: 33.3333%; }
    /* 라벨 숨김 셀 (이미지+상품명 통합 헤더 등) */
    .responsive-table td.no-label::before { display: none; }
    /* 카드 행 구분선: border-bottom 대신 border-top 모델.
       같은 시각적 줄의 셀들은 top 보더가 한 줄로 이어지고, 첫 셀(보통 전체폭 상품 헤더)만
       위 보더 제거 → 첫 줄 위/마지막 줄 아래는 자동으로 없음, 중간 줄은 모두 보더.
       (전체폭 셀이 섞여 마지막 줄이 1칸이어도 중간 줄 보더가 지워지지 않음) */
    /* .data-table tbody td(0,1,2)의 solid border-bottom을 이기려면 동일 특정성 필요 → tbody 포함 */
    .responsive-table tbody td { border-bottom: none; border-top: 1px dashed var(--border); }
    /* 첫 줄 셀(UI.table이 card-top 부여) 위 보더 제거 — 첫 줄이 2칸이어도 전부 제거됨 */
    .responsive-table tbody td.card-top { border-top: none; }
    /* 모바일 카드 폰트 1치수 업 */
    .responsive-table td { font-size: 13px; }
    .responsive-table td::before { font-size: 11px; }
}