/* 공통 오버레이 (page-modal-* 카드 컨테이너). 기본 숨김, .open 일 때 fixed 백드롭으로 표시.
 * JS(customer view 등)가 .open 클래스를 토글해 연다. */
.common-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.45);
    padding: 2rem 1rem;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}
.common-overlay.common-overlay--top {
    align-items: flex-start;
}
.common-overlay.open {
    display: flex;
}
body.quote-create-modal-open {
    overflow: hidden;
}

:root {
    /* 공통 팔레트 */
    --bs-primary: #0284c7;
    --bs-primary-light: #e0f2fe;
    --bs-primary-dark: #0369a1;
    --bs-success: #047857;
    --bs-success-light: #dcfce7;
    --bs-success-dark: #15803d;
    --bs-info: #0891b2;
    --bs-info-light: #cffafe;
    --bs-info-dark: #0e7490;
    --bs-warning: #ff9900;
    --bs-warning-light: #fef3c7;
    --bs-warning-dark: #b45309;
    --bs-danger: #dc2626;
    --bs-danger-light: #fee2e2;
    --bs-danger-dark: #b91c1c;
    --bs-muted: #64748b;
    --bs-muted-light: #f1f5f9;
    --bs-muted-dark: #1e293b;
    --bs-dark: #444444;
    --bs-dark-light: #f3f4f6;
    --bs-dark-dark: #222222;
    --bs-light: #f1f5f9;
    --bs-light-dark: #e2e8f0;
    --bs-secondary: #e8e8e8;
    --bs-secondary-light: #f7f7f7;
    --bs-secondary-dark: #a4a4a4;
    --bs-purple: #7c3aed;
    --bs-purple-light: #f3e8ff;
    --bs-purple-dark: #4a148c;
    --bs-pink: #db2777;
    --bs-pink-light: #fce7f3;
    --bs-pink-dark: #be185d;
    --bs-white: #ffffff;
    --bs-white-light: #fafafa;
    --bs-white-dark: #f5f5f5;
    --bs-black: #000000;
    --bs-black-light: #333333;
    --bs-black-dark: #000000;

    --bs-primary-accent: #0ea5e9;
    --bs-success-accent: #10b981;
    --bs-info-accent: #22d3ee;
    --bs-warning-accent: #f59e0b;
    --bs-danger-accent: #ef4444;
    --bs-muted-accent: #94a3b8;
    --bs-dark-accent: #0f172a;
    --bs-light-accent: #e2e8f0;

    --bs-bg-white: #ffffff;
    --bs-bg-primary: #e0f2fe;
    --bs-bg-primary-light: #f0f9ff;
    --bs-bg-secondary: #f1f5f9;
    --bs-bg-danger: #fee2e2;
    --bs-bg-warning: #fef3c7;
    --bs-bg-info: #ecfeff;
    --bs-bg-muted: #f1f5f9;
    --bs-bg-dark: #f3f4f6;
    --bs-bg-light: #f9f9f9;
    --bs-bg-input-disabled: #ebf2f5;

    --bs-card: #ffffff;
    --bs-border-primary: #7dd3fc;
    --bs-border-primary-light: #e0f2fe;
    --bs-border-primary-dark: #0369a1;
    --bs-border-success: #86efac;
    --bs-border-light: #f1f5f9;
    --bs-border-secondary: #e8e8e8;
    --bs-border-muted: #dcdcdc;
    --bs-border-danger: #fca5a5;
    --bs-border-info: #a5f3fc;
    --bs-border-warning: #fde68a;
    --bs-border-purple: #c4b5fd;
    --bs-border-pink: #fbcfe8;
    --bs-radius: 20px;
    --bs-radius-sm: 10px;
    --bs-shadow: 0 2px 16px rgba(2, 132, 199, 0.08);
    --bs-shadow-hover: 0 6px 24px rgba(2, 132, 199, 0.16);
    --bs-text: #0f172a;

    /* 폰트 크기 */
    --font-extra-small: 8px;
    --font-small: 10px;
    --font-normal: 12px;
    --font-large: 14px;
    --font-extra-large: 16px;
    /* 디스플레이(제목)용 — 위 스케일(8~16)은 본문용이라 페이지/모달 제목을 담지 못해
       그동안 18px 하드코딩으로 남아 있던 자리. 반응형에서 이 토큰만 갈아끼우면 된다. */
    --font-display: 18px;
}

* {
    font-family: "Plus Jakarta Sans", sans-serif;
    box-sizing: border-box;
    outline: none !important;
}

/* Bootstrap 5 .container max-width 기준값 + 300px (576→840, 768→1020, 992→1260, 1200→1440, 1400→1620) */
@media (min-width: 576px) {
    .container {
        max-width: 770px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 950px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 1190px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1370px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1550px;
    }
}
@media (min-width: 1600px) {
    .container {
        max-width: 1700px;
    }
}

.tooltip {
    font-size: var(--font-normal);
}

/* =============================================================
 * 폼 컨트롤 — Bootstrap5 .form-control / .form-select override
 * input = .form-control, select = .form-select, textarea = .form-control (각 1클래스)
 * 페이지전용 더 구체적 규칙(.page-toolbar-search 등)은 뒤에 와서 이김.
 * ============================================================= */
.form-check,
.form-control,
.form-select {
    width: 100%;
    border: 1px solid var(--bs-border-muted);
    border-radius: 20px;
    padding: 10px 20px;
    font-size: var(--font-normal);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-weight: 500;
}
.form-check {
    display: flex;
    gap: 10px;
    align-items: center;
}
textarea.form-control {
    height: auto;
    resize: none;
    padding: 1rem;
}
.form-control:disabled {
    background-color: var(--bs-bg-secondary);
    border: 0;
}
.form-control:focus,
.form-select:focus {
    outline: none;
    border: solid 1px var(--bs-primary-accent);
    box-shadow: none;
}
.form-select:disabled {
    background-color: var(--bs-bg-secondary);
    border: solid 1px var(--bs-border-muted);
    color: var(--bs-muted);
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--bs-danger) !important;
}
/* 날짜 + 시간 분리 입력 한 쌍 — 시간은 공통 휠 피커(globalTimePicker)가 붙는 input[type=time].
   common.js 가 time input 을 감추고 그 뒤에 .timepicker-display-input 을 넣으므로 셋 다 flex 대상으로. */
.datetime-split {
    display: flex;
    gap: 8px;
    align-items: center;
}
.datetime-split > input,
.datetime-split > .timepicker-display-input {
    flex: 1 1 0;
    min-width: 0;
}
.form-check-label,
.form-label {
    display: block;
    font-size: var(--font-small);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--bs-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.form-check-label {
    margin-bottom: 0;
}
/* 읽기전용 값 표시 — 조회/뷰 모달에서 disabled 입력 위젯 대신 깔끔한 텍스트로 노출 */
.form-readonly {
    display: block;
    min-height: 20px;
    font-size: var(--font-normal);
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.form-readonly--empty {
    color: var(--bs-muted);
}

/* =============================================================
 * 대상 선택 칩 (crew-picker) — Bill 의 Hotel CREW / Catering CATERING FOR 공용
 *
 * 후보가 적어서(호텔은 그 Trip 배정 크루 2~4명, 케이터링은 고정 2종) 드롭다운(select2 multiple)은
 * 목록을 감추고 태그만 남겨 오히려 읽기 나빴다 → 후보를 전부 펼쳐 놓고 토글하는 칩으로 대체.
 * 호텔은 역할(PILOT/FA)별로 줄을 나눠 누가 어느 역할인지 한눈에 보이게 하고,
 * 케이터링은 역할 구분이 없어 라벨 칸 없이 칩만 깐다(.crew-picker-group-label 생략).
 * ============================================================= */
.crew-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0;
}
.crew-picker-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.crew-picker-group-label {
    flex: 0 0 auto;
    min-width: 80px;
    padding-top: 5px;
    font-size: var(--font-small);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--bs-muted);
    text-transform: uppercase;
}
.crew-picker-options {
    display: flex;
    flex: 1 1 240px;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.crew-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius-sm);
    background: var(--bs-bg-white);
    font-size: var(--font-normal);
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.crew-chip:hover {
    border-color: var(--bs-border-primary);
    background: var(--bs-bg-primary-light);
}
.crew-chip:focus-visible {
    outline: 2px solid var(--bs-primary-accent);
    outline-offset: 1px;
}
.crew-chip[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: var(--bs-bg-primary);
    color: var(--bs-primary-dark);
    font-weight: 600;
}
/* 체크 표식은 자리를 항상 차지한다 — 선택할 때 칩 너비가 흔들리지 않게 */
.crew-chip-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid var(--bs-border-muted);
    border-radius: 50%;
    color: var(--bs-white);
    background: transparent;
}
.crew-chip-check svg {
    visibility: hidden;
}
.crew-chip[aria-pressed="true"] .crew-chip-check {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}
.crew-chip[aria-pressed="true"] .crew-chip-check svg {
    visibility: visible;
}
.crew-picker.is-invalid .crew-chip {
    border-color: var(--bs-border-danger);
}
.crew-picker-empty {
    margin: 0;
    padding: 7px 0;
    font-size: var(--font-normal);
    color: var(--bs-muted);
}

/* =============================================================
 * 폼 섹션/필드 구조 컴포넌트 (create/view/모달 공용)
 * ============================================================= */
.form-section {
    background: var(--bs-card);
    border: 1px solid var(--bs-border-secondary);
    border-radius: var(--bs-radius);
    overflow: hidden;
}
.form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--bs-white);
    border-bottom: 1px solid var(--bs-border-secondary);
}
.form-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.form-section-icon svg {
    width: 18px;
    height: 18px;
}
.form-section-icon--personal {
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    border: 1px solid var(--bs-border-primary);
}
.form-section-icon--settings {
    background: #fce7f3;
    color: #db2777;
    border: 1px solid #fbcfe8;
}
.form-section-icon--doc {
    background: #e0e7ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
}
.form-section-title {
    font-size: var(--font-large);
    font-weight: 800;
    color: var(--bs-text);
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}
.form-section-body {
    padding: 15px 20px;
}
/* 공통 비밀번호 규칙 카드 (partials/password-rules-card) — 토큰 사용 */
.password-rules-card .password-rules-intro {
    margin: 0 0 12px;
    font-size: var(--font-normal);
    color: var(--bs-muted-accent);
}
.password-rules-card .password-rules-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--font-normal);
    line-height: 1.5;
    color: var(--bs-text);
}
.password-rules-card .password-rules-list code {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: var(--font-normal);
    color: var(--bs-text);
    background: var(--bs-bg-secondary);
}
.form-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.form-field--full {
    grid-column: 1 / -1;
}
.form-field--half {
    grid-column: span 1;
}
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.form-label-row .form-label {
    margin-bottom: 0;
}
.form-field .form-feedback, .form-feedback {
    font-size: var(--font-normal);
    margin-top: 4px;
    color: var(--bs-danger);
    font-weight: 500;
}
/* 인라인 체크박스 라벨 — 체크박스와 문구를 한 줄로 묶는다.
   전역에 두는 이유: 같은 마크업이 페이지·모달 여러 곳(Bill 등록 3벌 · Bill View 편집 · 케이터링)에
   나오는데, 화면마다 스코프로 복제하면 새 화면에서 스타일만 빠지는 사고가 난다. */
.form-check-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: var(--font-normal);
}
.form-check-label-inline .form-check-input {
    cursor: pointer;
    margin: 0;
}
@media (max-width: 768px) {
    .form-fields {
        grid-template-columns: 1fr;
    }
}

/* CARD */
.card {
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius);
    overflow: hidden;
}

.card-header {
    border-color: var(--bs-border-muted);
    padding: 15px 20px;
    background: var(--bs-white);
}

.card-footer {
    border-color: var(--bs-border-muted);
    padding: 15px 20px;
    background: var(--bs-white);
}

/* =============================================================
 * 페이지 셸 컴포넌트
 * page-* : Bootstrap 무대응 구조 클래스 (부모-자식 계층 네이밍)
 * ============================================================= */

/* ── 페이지 래퍼 ─────────────────────────────────────────── */
.page-wrap {
    display: flex;
    flex-direction: column;
}
.fw-semibold {
    font-weight: 500 !important;
}

/* ── 페이지 헤더 ─────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bs-white);
    /* 고정 height 대신 min-height — 타이틀이 길어 줄바꿈되거나 액션 버튼이 늘어나면
       고정 높이는 내용을 자른다. 평소엔 80px 를 유지하고 필요할 때만 늘어난다. */
    min-height: 80px;
    padding-left: 20px;
    padding-right: 20px;
}
.page-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.page-header-icon {
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    color: var(--bs-text);
    flex-shrink: 0;
}
.page-header-icon svg {
    width: 24px;
    height: 24px;
}
.page-header-title {
    font-size: var(--font-display);
    font-weight: 800;
    color: var(--bs-text);
    letter-spacing: 0.1em;
    margin: 0;
}
.page-header-sub {
    font-size: var(--font-small);
    font-weight: 500;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
    margin: 4px 0 0 0;
}
.page-header-meta {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
}

/* ── 통합 툴바 (스탯 + 필터) ─────────────────────────────── */
.page-toolbar {
    background: var(--bs-white);
    padding: 10px 20px;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    position: sticky;
    top: 70px;
    z-index: 5;
    border-top: 1px solid var(--bs-border-secondary);
    border-bottom: 1px solid var(--bs-border-secondary);
}
.page-toolbar-stats {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.page-toolbar-sep {
    width: 1px;
    height: 38px;
    background: var(--bs-white);
    margin: 0 20px;
    flex-shrink: 0;
}
.page-toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--bs-light-dark);
    flex-shrink: 0;
}

/* 스탯 아이템 */
.page-toolbar-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 18px;
}
.page-toolbar-stat:first-child {
    padding-left: 0;
}
.page-toolbar-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-toolbar-stat-icon svg {
    width: 16px;
    height: 16px;
}
.page-toolbar-stat-icon--blue {
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    border: 1px solid var(--bs-border-primary);
}
.page-toolbar-stat-icon--green {
    background: var(--bs-success-light);
    color: var(--bs-success-dark);
    border: 1px solid var(--bs-border-success);
}
.page-toolbar-stat-icon--red {
    background: var(--bs-danger-light);
    color: var(--bs-danger);
    border: 1px solid var(--bs-border-danger);
}
.page-toolbar-stat-icon--amber {
    background: var(--bs-warning-light);
    color: var(--bs-warning-dark);
    border: 1px solid var(--bs-border-warning);
}
.page-toolbar-stat-icon--gray {
    background: var(--bs-muted-light);
    color: var(--bs-muted-dark);
    border: 1px solid var(--bs-border-muted);
}
/* 보라 — Trip/Crew 캘린더의 ALL OK 통계칸. 공용 배지 .badge-all_ok 와 같은 계열. */
.page-toolbar-stat-icon--purple {
    background: var(--bs-purple-light);
    color: var(--bs-purple);
    border: 1px solid var(--bs-border-purple);
}
.page-toolbar-stat-body {
    min-width: 0;
}
.page-toolbar-stat-lbl {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
}
.page-toolbar-stat-val {
    font-size: var(--font-extra-large);
    font-weight: 900;
    color: var(--bs-text);
    line-height: 1.1;
}
.page-toolbar-stat-loading {
    display: inline-block;
    width: 30px;
    height: 7px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: pageShimmer 1.4s infinite;
}
@keyframes pageShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 필터 영역 ───────────────────────────────────────────── */
.page-toolbar-filters {
    display: flex;
    align-items: flex-end;
    justify-content: end;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.page-toolbar-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.page-toolbar-filter--grow {
    flex: 1;
    min-width: 200px;
}
.page-toolbar-filter-label {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
}
.page-toolbar-filter-actions {
    display: flex;
    align-items: flex-end;
}

/* 검색 인풋 (Bootstrap .form-control 위에 검색 룩 흡수) */
.page-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.page-toolbar-search-ico {
    position: absolute;
    left: 12px;
    color: var(--bs-muted);
    pointer-events: none;
}
.page-toolbar-search .form-control {
    height: 40px;
    border-radius: var(--bs-radius);
    padding: 0 14px 0 36px;
    background: var(--bs-bg-input-disabled);
}
.page-toolbar-search .form-control:focus {
    background: var(--bs-white);
}

/* 자동완성 드롭다운 */
.page-toolbar-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bs-white);
    border: 1.5px solid var(--bs-border-primary);
    border-radius: var(--bs-radius-sm);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}
.page-toolbar-suggest.open {
    display: block;
}
.page-toolbar-suggest.country-suggestions--viewport.open {
    z-index: 10700;
    border-radius: var(--bs-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 240px;
    overflow-y: auto;
}
.page-toolbar-suggest-item {
    display: block;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-secondary);
    text-decoration: none;
    color: var(--bs-text);
    transition: background 0.15s;
    font-size: var(--font-normal);
}
.page-toolbar-suggest-item:last-child {
    border-bottom: none;
}
.page-toolbar-suggest-item:hover,
.page-toolbar-suggest-item.active {
    background: var(--bs-bg-primary);
}
.page-toolbar-suggest-col {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-primary);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.page-toolbar-suggest-val {
    font-size: var(--font-normal);
    color: var(--bs-text);
}

/* 컬럼폭을 colgroup 으로 명시한 표. 좁은 화면에서 폭이 뭉개지지 않게 반응형에서
   min-width:max-content 를 걸어 래퍼(.table-responsive)가 가로 스크롤하게 한다.
   상세뷰 패널의 `.dv-sc-list--fixedcols` 와 같은 관용구를 표 단위로 일반화한 것. */
.table-layout-fixed {
    table-layout: fixed;
}

/* ── 데이터테이블 카드 셸 ─────────────────────────────────── */
.datatable-card {
    background: var(--bs-white);
    overflow: hidden;
}
.datatable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--bs-white);
}
.datatable-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-normal);
    font-weight: 700;
    color: var(--bs-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.datatable-count {
    font-size: var(--font-normal);
    color: var(--bs-muted);
    font-weight: 500;
}
.datatable-count-filtered {
    color: var(--bs-primary);
    font-weight: 600;
}

/* =============================================================
 * Bootstrap 클래스 override
 * 마이그레이션 중에는 범위로 격리(미마이그 페이지 보호).
 * 전 메뉴 완료 후 스코프를 걷어 전역화 예정.
 * ============================================================= */

/* 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.1em;
    font-size: var(--font-small);
    font-weight: 800;
    padding: 0 15px;
    height: 40px;
    border-radius: var(--bs-radius);
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    line-height: 1;
    --bs-btn-disabled-opacity: 0.5;
}
.btn.btn-sm {
    height: 26px;
    padding: 0 10px;
}
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    border-color: var(--bs-border-primary);
}
.btn-outline-warning,
.btn-outline-warning:hover,
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
    background: var(--bs-warning-light);
    color: var(--bs-warning);
    border-color: var(--bs-border-warning);
}
.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    background: var(--bs-secondary-light);
    color: var(--bs-dark);
    border-color: var(--bs-border-secondary);
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background: var(--bs-white);
    color: var(--bs-dark-dark);
    border-color: var(--bs-secondary-dark);
}
.btn-outline-danger,
.btn-outline-danger:hover,
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    background: var(--bs-danger-light);
    color: var(--bs-danger);
    border-color: var(--bs-border-danger);
}

.btn-outline-success,
.btn-outline-success:hover,
.btn-outline-success:disabled,
.btn-outline-success.disabled {
    background: var(--bs-success-light);
    color: var(--bs-success);
    border-color: var(--bs-border-success);
}

/* 상태 뱃지 — 파스텔(미니스탯 색상과 일치) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--bs-radius);
    white-space: nowrap;
    border: 1px solid transparent;
    font-size: var(--font-small);
}
.badge.badge-sm {
    padding: 4px 8px;
}
.badge-enabled {
    background: var(--bs-success-light);
    color: var(--bs-success-dark);
    border-color: var(--bs-border-success);
}
.badge-inactive {
    background: var(--bs-danger-light);
    color: var(--bs-danger-dark);
    border-color: var(--bs-border-danger);
}
.badge-suspended {
    background: var(--bs-warning-light);
    color: var(--bs-warning-dark);
    border-color: var(--bs-border-warning);
}
.badge-danger {
    background: var(--bs-danger-light);
    color: var(--bs-danger-dark);
    border-color: var(--bs-border-danger);
}
.badge-success {
    background: var(--bs-success-light);
    color: var(--bs-success-dark);
    border-color: var(--bs-border-success);
}
.badge-secondary,
.badge-default,
.badge-disabled {
    background: var(--bs-muted-light);
    color: var(--bs-muted);
    border-color: var(--bs-border-muted);
}
.badge-pending {
    background: var(--bs-warning-light);
    color: var(--bs-warning-dark);
    border-color: var(--bs-border-warning);
}
.badge.badge-lg {
    padding: 8px 14px;
}
/* status 색상 */
.badge-ordered,
.badge-primary,
.badge-info,
.badge-accepted,
.badge-partially_open,
.badge-sent,
.badge-customer_confirmed,
.badge-confirmed,
.badge-all_confirmed,
.badge-new,
.badge-rescheduled,
.badge-processing,
.badge-pilot {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
}
.badge-in_progress,
.badge-warning,
.badge-callback_later,
.badge-open,
.badge-bill,
.badge-planned,
.badge-round_trip {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fcd34d !important;
}
.badge-read,
.badge-muted,
.badge-review,
.badge-ready,
.badge-not_payment,
.badge-no_answer,
.badge-draft {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}
.badge-converted,
.badge-delivered,
.badge-management,
.badge-active,
.badge-approved,
.badge-partially_payment,
.badge-submit,
.badge-submitted,
.badge-one_way {
    background: #dcfce7 !important;
    color: #16a34a !important;
    border-color: #86efac !important;
}
.badge-non_management {
    background: #fee2e2 !important;
    color: var(--bs-danger) !important;
    border-color: #fca5a5 !important;
}
/* 완료(terminal) 계열 — 승인(approved)의 연한 초록과 반드시 구분돼야 한다.
   Bill 은 approved 와 paid 가 같은 STATUS 열에 함께 나오므로 색이 같으면 구분이 안 된다. */
.badge-completed,
.badge-done,
.badge-paid {
    background: #d1fae5 !important;
    color: #047857 !important;
    border-color: #6ee7b7 !important;
}
.badge-lost,
.badge-not_interested,
.badge-cancelled,
.badge-canceled,
.badge-void,
.badge-overdue,
.badge-rejected {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}
.badge-multi_leg,
.badge-total {
    background: #e0e7ff !important;
    color: #4338ca !important;
    border-color: #a5b4fc !important;
}
.badge-quoted,
.badge-resubmit {
    background: #ede9fe !important;
    color: #7c3aed !important;
    border-color: #a38ad1 !important;
}
/* 파랑 계열 — Bill 의 PREPAID 표식은 **STATUS 색과 겹치면 안 된다**.
   같은 행에 approved(연두)·paid(에메랄드)·resubmit(보라)·pending(호박)·rejected(빨강)이 나오므로
   그 어느 것과도 다른 파랑을 쓴다. PREPAID 는 상태가 아니라 표식이다. */
.badge-start_trip,
.badge-prepaid {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}
.badge-all_ok,
.badge-return_trip,
.badge-any {
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border-color: #c4b5fd !important;
}
/* Crew Report Template 대상 크루 3종 — PILOT = 파랑(.badge-pilot, 위 primary 계열) · FA = 분홍(여기) ·
   ANY = 보라(.badge-any, 위 all_ok 계열). 분홍은 기존 상태색에 없어 토큰으로 둔다(다크는 토큰 재정의로 따라간다). */
.badge-fa {
    background: var(--bs-pink-light) !important;
    color: var(--bs-pink-dark) !important;
    border-color: var(--bs-border-pink) !important;
}
.badge-unread,
.badge-expired {
    background: var(--bs-danger-light);
    color: var(--bs-danger);
    border-color: var(--bs-border-danger);
}
/* REQUIRED 필 (상태색 아님, 폼 헤더) */
.badge-required {
    color: var(--bs-danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--bs-radius-sm);
    font-weight: 700;
}
.badge-white {
    background: var(--bs-white);
    color: var(--bs-text);
    border: 1px solid var(--bs-border-secondary);
}

/* ID 뱃지 (테이블 셀) */
.badge-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    background: var(--bs-white);
    border: 1px solid var(--bs-border-primary);
    border-radius: var(--bs-radius-sm);
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-primary);
}

/* 공통 테이블 — Bootstrap .table / .table-bordered 호환 */
.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    --bs-table-border-color: var(--bs-border-muted);
}

.table thead th {
    background: var(--bs-bg-light);
    font-size: var(--font-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    padding: 10px;
    color: var(--bs-muted);
    vertical-align: middle;
    border-color: var(--bs-border-muted);
}

.table tbody td {
    font-size: var(--font-normal);
    color: var(--bs-text);
    vertical-align: middle;
    font-weight: 500;
    padding: 10px;
    border-color: var(--bs-border-muted);
}

/* 기본(.table만): DataTable과 동일 — 행 구분선, 셀 테두리 없음 */
.table:not(.table-bordered) thead th {
    border-top: 1px solid var(--bs-border-secondary);
    border-bottom: 1px solid var(--bs-border-secondary);
    border-left: none;
    border-right: none;
}

.table:not(.table-bordered) tbody tr {
    border-bottom: 1px solid var(--bs-border-secondary);
    transition: background 0.15s;
}

.table:not(.table-bordered) tbody tr:last-child {
    border-bottom: none;
}

.table:not(.table-bordered) tbody td {
    border: none;
}

.table tfoot td {
    font-size: var(--font-normal);
    color: var(--bs-text);
    vertical-align: middle;
    font-weight: 500;
    padding: 10px;
    border-color: var(--bs-border-muted);
}

.table:not(.table-bordered) tfoot tr {
    border-bottom: 1px solid var(--bs-border-secondary);
    transition: background 0.15s;
}

.table:not(.table-bordered) tfoot tr:last-child {
    border-bottom: none;
}

.table:not(.table-bordered) tfoot td {
    border: none;
}


/* .table-bordered: 셀 격자 (Bootstrap 보강 — common.css가 border:none으로 막던 부분) */
.table.table-bordered {
    border: 1px solid var(--bs-border-muted);
}

.table.table-bordered > :not(caption) > * > * {
    border-width: 1px;
    border-color: var(--bs-border-muted);
}

/* 파일 업로드 드롭존/파일목록 스타일은 common/file-upload.css 로 이관. */

.dv-upload-btn {
    /*
    min-height: 38px;
    padding: 0 20px;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-accent));
    color: var(--bs-white);
    border: none;
    border-radius: var(--bs-radius-sm);
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    */
}

.dv-upload-btn:hover {
    /* transform: translateY(-1px); */
}

/* .dv-doc-list(업로드 문서 리스트 컨테이너)는 common/file-upload.css 의 .document-list-group 으로 통일. */

.dv-doc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--bs-muted);
    font-size: var(--font-large);
    background: var(--bs-bg-light);
    border: 1px dashed var(--bs-border-secondary);
    border-radius: var(--bs-radius);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.dv-doc-empty-title {
    font-size: var(--font-large);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.05em;
}

.dv-doc-empty-hint {
    font-size: var(--font-small);
    color: var(--bs-muted);
    font-weight: 500;
}

/* 문서 미리보기 패널 */
.dv-doc-preview {
    position: fixed;
    top: 0;
    right: 0;
    width: 56%;
    min-width: 380px;
    max-width: 800px;
    height: 100vh;
    background: #1e293b;
    z-index: 1065;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.dv-doc-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #334155;
}

.dv-doc-preview-title {
    font-size: var(--font-large);
    font-weight: 700;
    color: #fff;
}

.dv-doc-preview-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dv-doc-preview-close:hover {
    color: #fff;
    background: #334155;
}

.dv-doc-preview-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Nav Tabs */
.nav-item {
    border:none;
}

.nav-item button {
    font-size: var(--font-normal);
    font-weight: 600;
    color: var(--bs-muted);
    border: none !important;
    padding: 1rem;
    text-transform: uppercase;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border:none !important;
    /* border-bottom: 2px solid var(--bs-primary) !important; */
    font-weight: 600;
}

/* =============================================================
 * 베이스 유틸리티 (구 overwrite.css 에서 이관: font-size / cursor / text-overflow)
 *  뷰 다수(font-size-* 22곳·cursor-pointer 21곳 등)가 사용 → keeper 유지. 2026-06-22
 * ============================================================= */
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* =============================================================
 * 공용: 시스템 로그 리더 뷰어 (quote 로그 <pre>, 크로스메뉴)
 * ============================================================= */
.system-log-reader-viewer {
    font-size: var(--font-normal);
}

/* =============================================================
 * 공용: 보조 텍스트 힌트 / 카운트 뱃지 (구 .font-size-* 유틸 대체, 크로스메뉴)
 *  풀 시맨틱 — 크기+색+굵기를 담아 text-muted/text-danger/fw-semibold/bg-info 유틸을 대체.
 * ============================================================= */
 .text-hint {
    font-size: var(--font-small);
    color: var(--bs-muted);
    font-weight: 500;
 }
.text-hint-bold {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
}
.text-hint-muted {
    font-size: var(--font-small);
    color: var(--bs-muted);
    font-weight: 500;
}
.text-hint-danger {
    font-size: var(--font-small);
    font-weight: 500;
    color: var(--bs-danger);
}
/* 클릭 가능한 힌트(.text-hint 와 함께 사용) — 최신 1건 메타 줄을 눌러 전체 이력 모달을 여는 케이터링 로그 등.
 * 내용이 없을 땐(:empty) 클릭 대상이 아니므로 커서/밑줄을 주지 않는다. */
.text-hint-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.text-hint-link:hover {
    color: var(--bs-primary);
}
.text-hint-link:empty {
    cursor: default;
    text-decoration: none;
}
/* .badge 와 함께 사용(.badge 가 흰 글자·패딩·라운드 제공) — 배경·크기만 지정 */
.badge-count {
    font-size: var(--font-small);
    background: var(--bs-info);
}
/* 도착 날짜 넘김 "+N day" 배지 — 앱 내부 화면 공용(2026-09-14 통일). 표기 문자열은 JS 가 `'+' + N + ' day'` 로 만든다.
 * 위치(워크시트 입력칸 위 absolute · 표 셀 간격 등)만 쓰는 화면 CSS 가 정한다 — 색·크기는 여기서만.
 * ⚠️고객 문서는 일부러 제외: Trip/Quote Itinerary(.qam-nextday 회색 마커) · 견적서 PDF(글자만). */
.next-day-badge {
    display: inline-block;
    background: var(--bs-info);
    color: var(--bs-white);
    padding: 0 5px;
    border-radius: 4px;
    font-size: var(--font-small);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

/* =============================================================
 * 공용: 문서 미리보기 오른쪽 패널 (documentPreviewPanel)
 * ============================================================= */
 #documentPreviewPanel.document-preview-panel {
    width: 30%;
    min-width: 420px;
    right: 0;
    left: auto;
    z-index: 3600;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}

#documentPreviewPanel .document-preview-panel-content {
    min-height: calc(100vh - 60px);
}

/* 금액 소수부 표시 (전역 금액 포매터 commonjs.formatAmountDecimal 등에서 사용) */
.amt-decimal {
    color: var(--bs-muted);
    font-size: var(--font-small);
    font-weight: 500;
}

/* toast (legacy bootstrap .toast — 잔존 사용처 대비 유지) */
.toast-body {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: var(--font-normal);
}

/* ============================================================
 * IMS Toast — 화면 상단 중앙 고정, 최대 5개 세로 스택.
 * 마크업/동작은 commonjs.showToast (common.js), 스타일은 전역인 여기.
 * ============================================================ */
.ims-toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    width: max-content;
    max-width: min(560px, 92vw);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ims-toast {
    pointer-events: auto;
    min-width: min(360px, 90vw);
    max-width: min(560px, 92vw);
    background: var(--bs-card);
    color: var(--bs-text);
    border-radius: 14px;
    border: 1px solid var(--bs-border-secondary);
    box-shadow: var(--bs-shadow-hover);
    overflow: hidden;
    animation: imsToastIn .34s cubic-bezier(.16, 1, .3, 1);
}
.ims-toast-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
}
.ims-toast-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}
.ims-toast-body {
    flex: 1 1 auto;
    font-size: var(--font-normal);
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}
.ims-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--bs-muted-accent);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 8px;
}
.ims-toast-close:hover {
    color: var(--bs-muted-dark);
    background: var(--bs-muted-light);
}
.ims-toast-progress {
    height: 3px;
    background: var(--bs-muted-light);
}
.ims-toast-progress > span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    animation-name: imsToastBar;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.ims-toast--success .ims-toast-icon,
.ims-toast--success .ims-toast-progress > span { background: var(--bs-success); }
.ims-toast--error .ims-toast-icon,
.ims-toast--error .ims-toast-progress > span { background: var(--bs-danger); }
.ims-toast--warning .ims-toast-icon,
.ims-toast--warning .ims-toast-progress > span { background: var(--bs-warning-dark); }
.ims-toast--info .ims-toast-icon,
.ims-toast--info .ims-toast-progress > span { background: var(--bs-info); }
.ims-toast--hiding {
    animation: imsToastOut .24s ease forwards !important;
}
@keyframes imsToastIn {
    from { opacity: 0; transform: translateY(-18px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes imsToastOut {
    to { opacity: 0; transform: translateY(-14px) scale(.97); }
}
@keyframes imsToastBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ims-toast,
    .ims-toast--hiding,
    .ims-toast-progress > span { animation-duration: .01ms !important; }
}
/* ── 전역 로딩 오버레이 (#globalLoader, footer.php · commonjs.showLoader/hideLoader) ── */
.global-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;                       /* 모달(~1055)보다 위 */
    /* display 은 인라인 none 으로 시작, jQuery show()/hide() 로 토글 → CSS 기본 flex 로 복귀 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .38);   /* 은은한 딤 */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.global-loader-box {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.4rem;
    border-radius: .85rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.08));
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    font-weight: 600;
    font-size: var(--font-large);
    max-width: 80vw;
}
.global-loader-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border-width: .18em;
    color: var(--bs-primary, #0d6efd);
    flex: 0 0 auto;
}
.global-loader-text { font-size: var(--font-normal); font-weight: 600; }
.global-loader-text:empty { display: none; }

/* 문서 미리보기: 이미지 로드 완료 전(특히 HEIC 디코딩 중) 깨진 아이콘 대신 스피너 표시 */
.doc-preview-spinner {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* 밝은(모달)·어두운(미리보기 패널) 배경 모두에서 보이도록: 회색 트랙 + 프라이머리 컬러 arc */
    border: 3px solid rgba(148, 163, 184, .4);
    border-top-color: var(--bs-primary, #3b82f6);
    animation: docPreviewSpin .8s linear infinite;
    pointer-events: none;
}
@keyframes docPreviewSpin { to { transform: rotate(360deg); } }

/* ── 케이터링 ADD MENU ITEM — 저장된 아이템 카탈로그 다중선택 (Trip #tripCateringDishModal · Quote #qvcDishModal 공용) ── */
.catering-cat-search { margin-bottom: 8px; }
.catering-cat-list {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.tvc-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}
.tvc-cat-row:hover { background: var(--bs-tertiary-bg); }
.tvc-cat-row input { cursor: pointer; }
.tvc-cat-name { font-size: var(--font-normal); }
.tvc-cat-21 {
    margin-left: auto;
    font-size: var(--font-small);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}
.tvc-cat-empty { padding: 12px; font-size: var(--font-normal); color: var(--bs-secondary-color); }
/* 발주 ITEMS 목록: 이미 ORDER MENU 에 담긴 항목 표시(체크+disabled + Added 배지 + 흐리게) */
.tvc-cat-row--added { opacity: 0.6; }
.tvc-cat-row--added .tvc-cat-name { color: var(--bs-secondary-color); }
.tvc-cat-added {
    margin-left: auto;
    font-size: var(--font-small);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bs-primary-light);
    color: var(--bs-text);
}
/* 다른 발주가 이미 쓴 아이템("In order") — Added(현재 발주)와 구분되는 중립 톤 */
.tvc-cat-added--other {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}
/* 21+ 배지와 Added 배지가 함께면 21+ 뒤에 붙도록(둘 다 우측 정렬 시 겹침 방지) */
.tvc-cat-21 + .tvc-cat-added { margin-left: 6px; }
.catering-dish-or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bs-secondary-color);
    font-size: var(--font-small);
    margin: 4px 0;
}
.catering-dish-or::before,
.catering-dish-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}
.catering-dish-alcohol {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-size: var(--font-normal);
    line-height: 1.5;
}

/* ── 케이터링 ADD/EDIT ORDER — 담긴 음식 구성(코스별 아이템) 스테이징 목록 (Trip #tvcoStaged · Quote #qvcoStaged 공용) ── */
.catering-order-staged {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 10px;
    min-height: 56px;
}
.tvc-staged-group { padding: 4px 0; }
.tvc-staged-group + .tvc-staged-group { border-top: 1px solid var(--bs-border-color); margin-top: 4px; }
.tvc-staged-course {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tvc-staged-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tvc-staged-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: var(--bs-primary-light);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-text);
    font-size: var(--font-small);
    font-weight: 600;
}
.tvc-staged-name { line-height: 1.2; }
.tvc-staged-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    font-size: var(--font-large);
    line-height: 1;
    cursor: pointer;
}
.tvc-staged-del:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); opacity: 1; }
/* 다른 활성 발주가 이미 쓰는 아이템 — 담은 채로는 발주를 활성 상태로 저장할 수 없다(취소 상태 저장은 가능) */
.tvc-staged-chip--conflict {
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-accent);
    color: var(--bs-danger-text-emphasis);
}
.tvc-staged-warn { font-size: var(--font-small); }
.tvc-staged-conflict {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    color: var(--bs-danger-text-emphasis);
    font-size: var(--font-small);
    line-height: 1.5;
}