/* =====================================================
   카메이트 웹 — 다크 모던 스타일 v11.0
   내비게이션: 사이드바 제거 → 상단 메뉴바 + 툴바
   ===================================================== */

/* ── CSS 변수 ── */
:root {
    --bg:        #080f1c;
    --panel:     rgba(13,20,35,0.95);
    --line:      rgba(255,255,255,0.07);
    --line2:     rgba(148,163,184,0.18);
    --text:      #dde8f5;
    --muted:     #8fa5bf;
    --primary:   #0ea5e9;
    --success:   #22c55e;
    --danger:    #ef4444;
    --radius:    16px;
    --radius-sm: 9px;

    /* 레이아웃 높이 */
    --h-title:   46px;
    --h-toolbar: 58px;
    --h-top:     calc(var(--h-title) + var(--h-toolbar));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }


/* ══════════════════════════════════════════
   ① 프로그램 타이틀바
══════════════════════════════════════════ */
.app-titlebar {
    height: var(--h-title);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 14px;
    background: linear-gradient(90deg,
        rgba(8,15,28,1) 0%,
        rgba(10,20,40,1) 60%,
        rgba(12,22,44,1) 100%
    );
    border-bottom: 1px solid rgba(14,165,233,.20);
    flex-shrink: 0;
}
.app-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-title-badge {
    width: 30px; height: 30px; min-width: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(59,130,246,.22);
}
.app-title-car-svg { width: 18px; height: 18px; display: block; }
.app-title-text {
    font-size: 15px; font-weight: 800;
    color: #f0f8ff; letter-spacing: -0.01em;
}
.app-title-ver {
    font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(14,165,233,.10);
    border: 1px solid rgba(14,165,233,.18);
}
.app-title-right { display: flex; align-items: center; }
.app-shop-name {
    font-size: 20px; font-weight: 900;
    color: #7dd3fc; letter-spacing: -0.025em;
    text-shadow: 0 0 24px rgba(125,211,252,.30);
}


/* ══════════════════════════════════════════
   ② 메뉴바 (수평 탭형)
══════════════════════════════════════════ */
.app-menubar {
    height: var(--h-menu);
    display: flex;
    align-items: stretch;
    padding: 0 8px;
    background: rgba(6,12,24,.96);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: 2px;
}
.app-menu-item {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
}
.app-menu-item:hover {
    color: #f0f8ff;
    background: rgba(255,255,255,.04);
    border-bottom-color: rgba(14,165,233,.40);
}
.app-menu-active {
    color: #7dd3fc !important;
    border-bottom-color: var(--primary) !important;
    background: rgba(14,165,233,.06) !important;
}


/* ══════════════════════════════════════════
   ③ 툴바 (아이콘 버튼 행)
══════════════════════════════════════════ */
.app-toolbar {
    height: var(--h-toolbar);
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: rgba(8,14,28,.98);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: 3px;
}
.app-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 50px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    gap: 3px;
    transition: all .15s;
    color: var(--muted);
}
.app-tool-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(148,163,184,.16);
    color: #f0f8ff;
    transform: translateY(-1px);
}
.app-tool-active {
    background: linear-gradient(180deg, rgba(14,165,233,.18), rgba(37,99,235,.12));
    border-color: rgba(56,189,248,.32) !important;
    color: #7dd3fc !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.app-tool-icon {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.app-tool-icon svg { width: 20px; height: 20px; display: block; }
.app-tool-label {
    font-size: 11px; font-weight: 700;
    white-space: nowrap; line-height: 1;
}


/* ══════════════════════════════════════════
   ④ 콘텐츠 영역 (풀너비, 스크롤 독립)
══════════════════════════════════════════ */
.app-content {
    height: calc(100vh - var(--h-top));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 12px;
    gap: 10px;
    background: linear-gradient(135deg, #080f1c, #0d1830 55%, #080f1c);
}

/* body flex column */
body.app-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}


/* ══════════════════════════════════════════
   공통 카드
══════════════════════════════════════════ */
.panel-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}


/* ══════════════════════════════════════════
   공통 버튼
══════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 0 14px; height: 34px; min-width: 76px;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap;
    transition: all .15s;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), #2563eb);
    color: #fff; border-color: rgba(56,189,248,.30);
    box-shadow: 0 4px 14px rgba(14,165,233,.20);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14,165,233,.28); }

.btn-secondary {
    background: rgba(255,255,255,.06); color: var(--text); border-color: var(--line2);
}
.btn-secondary:hover { background: rgba(255,255,255,.10); }

.btn-success {
    background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.14) 60%, rgba(8,14,28,.98));
    border-color: rgba(74,222,128,.32); color: #fff;
}
.btn-success:hover { transform: translateY(-1px); border-color: rgba(74,222,128,.46); }

.btn-danger {
    background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(185,28,28,.14) 60%, rgba(8,14,28,.98));
    border-color: rgba(248,113,113,.30); color: #fff;
}
.btn-danger:hover { transform: translateY(-1px); border-color: rgba(248,113,113,.44); }

.btn-mini {
    height: 28px; min-width: 46px; padding: 0 9px; font-size: 11px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.10));
    border: 1px solid rgba(96,165,250,.22); color: #fff;
}
.btn-mini:hover { transform: translateY(-1px); border-color: rgba(96,165,250,.36); }

.btn-inline-create {
    background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.14) 60%, rgba(8,14,28,.98));
    border-color: rgba(74,222,128,.32); color: #fff;
}
.btn-inline-create:hover { transform: translateY(-1px); border-color: rgba(74,222,128,.46); }


/* ══════════════════════════════════════════
   대시보드 레이아웃
══════════════════════════════════════════ */
.hero-card {
    padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex: 0 0 auto; border-radius: var(--radius); border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(14,165,233,.12) 0%, rgba(37,99,235,.07) 45%, rgba(8,14,28,.98) 100%);
}
.hero-kicker { color: var(--success); font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.hero-title  { font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 7px; letter-spacing: -0.015em; }
.hero-desc   { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 640px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

.stats-grid {
    display: grid; grid-template-columns: repeat(6,1fr);
    gap: 10px; flex: 0 0 auto;
}
.stat-card { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.stat-label { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.stat-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }

.panel-grid {
    display: grid; grid-template-columns: 260px 1fr;
    gap: 10px; flex: 1 1 auto; min-height: 0; align-items: stretch;
}
.panel-left {
    padding: 14px; display: flex; flex-direction: column;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.panel-left h3 { font-size: 14px; margin-bottom: 10px; color: #f0f8ff; }
.clean-list { list-style: none; }
.clean-list li {
    padding: 10px 0; border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--text); line-height: 1.4;
}
.clean-list li:last-child { border-bottom: none; }

.dashboard-preview-panel {
    padding: 14px; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.dashboard-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px; flex: 0 0 auto;
}
.dashboard-preview-head h3 { font-size: 14px; color: #f0f8ff; }
.dashboard-preview-head p  { font-size: 11px; color: var(--muted); }

.mini-preview-grid {
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px; flex: 1 1 auto; min-height: 0; align-items: start;
}
.mini-preview-card {
    padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(180deg,#15223a,#101c32);
    border: 1px solid rgba(148,163,184,.14);
    display: flex; flex-direction: column; overflow: hidden;
}
.mini-preview-title {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 10px; margin-bottom: 8px; border-radius: 9px;
    background: linear-gradient(135deg,rgba(59,130,246,.18),rgba(99,102,241,.12));
    border: 1px solid rgba(96,165,250,.22); color: #fff;
    font-size: 12px; font-weight: 800; width: fit-content;
}
.mini-preview-title-icon {
    width: 16px; height: 16px; min-width: 16px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,rgba(59,130,246,.28),rgba(99,102,241,.18));
    border: 1px solid rgba(96,165,250,.22);
}
.mini-preview-title-icon svg { width: 10px; height: 10px; display: block; }
.mini-preview-field-head {
    margin-bottom: 5px; padding-bottom: 5px;
    border-bottom: 1px dashed rgba(148,163,184,.18);
    color: var(--muted); font-size: 10px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: Consolas,"Courier New",monospace;
}
.mini-preview-row {
    padding: 5px 0; border-bottom: 1px dashed rgba(148,163,184,.12);
    font-size: 11px; color: #d5e5f8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: Consolas,"Courier New",monospace; line-height: 1.3;
}
.mini-preview-row:last-child { border-bottom: none; }
.mini-preview-empty { font-size: 11px; color: var(--muted); }


/* ══════════════════════════════════════════
   엔티티 레이아웃 (목록 / 폼)
══════════════════════════════════════════ */
.page-section {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
}

/* 검색 패널 */
.panel-card-search-v23 {
    padding: 10px 14px; flex: 0 0 auto; border-radius: var(--radius);
}
.listing-search-shell { display: flex; flex-direction: column; gap: 8px; }
.listing-search-top-row {
    display: grid;
    grid-template-columns: minmax(0,300px) minmax(240px,300px);
    justify-content: space-between; align-items: start; gap: 12px;
}
.listing-meta-panel {
    padding: 9px 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.05);
    background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
}
.listing-meta-panel .eyebrow-text {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 3px;
}
.listing-meta-panel h3 { font-size: 15px; margin-bottom: 5px; color: #f0f8ff; }
.listing-meta-panel .panel-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.listing-meta-inline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.meta-chip {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
    border-radius: 999px; background: rgba(14,165,233,.10);
    border: 1px solid rgba(14,165,233,.16); color: #d0f0ff; font-size: 11px; font-weight: 700;
}

/* 검색 입력 (우상단) */
.detached-search-top-right { width: 100%; max-width: 300px; justify-self: end; }
.detached-search-top-right label { font-size: 11px; color: #cddaf0; font-weight: 700; margin-bottom: 3px; display: block; }
.search-input-icon-wrap { position: relative; }
.search-input-icon {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--muted); pointer-events: none; z-index: 2;
    display: inline-flex; align-items: center;
}
.search-input-icon svg { width: 14px; height: 14px; display: block; }
.detached-search-top-right input {
    width: 100%; height: 30px; padding: 0 10px 0 30px; font-size: 12px;
    border-radius: 9px; border: 1px solid var(--line2); background: #101b2e; color: var(--text); outline: none;
}
.detached-search-top-right input:focus { border-color: rgba(14,165,233,.55); }

/* 필터 그리드 */
.listing-filter-grid-v23 {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto;
    gap: 6px 8px; align-items: end;
}
.listing-filter-grid-v23 .form-item { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.listing-filter-grid-v23 label { font-size: 10px; color: var(--muted); font-weight: 700; }
.listing-filter-grid-v23 input,
.listing-filter-grid-v23 select,
select.ui-select {
    height: 30px; min-height: 30px; padding: 0 9px; font-size: 12px;
    border-radius: 9px; border: 1px solid var(--line2); background: #101b2e;
    color: var(--text); outline: none; width: 100%; appearance: none;
}
.listing-filter-grid-v23 input:focus,
.listing-filter-grid-v23 select:focus { border-color: rgba(14,165,233,.55); }
select.ui-select option { background: #101b2e; color: var(--text); }
.filter-actions-inline-v23 {
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; flex-wrap: nowrap;
}
.filter-actions-inline-v23 .btn { height: 30px; min-width: 68px; font-size: 12px; border-radius: 9px; }

/* 목록 패널 */
.panel-card-list {
    padding: 10px 14px 8px;
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    border-radius: var(--radius);
    background: var(--panel); border: 1px solid var(--line);
}
.compact-list-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px; flex: 0 0 auto;
}
.compact-list-head h3 { font-size: 14px; color: #f0f8ff; }
.table-count { font-size: 11px; color: var(--muted); font-weight: 700; }
.header-actions-wrap { display: flex; gap: 6px; flex-wrap: wrap; }

.table-wrap, .table-wrap-compact {
    flex: 1 1 auto; min-height: 0;
    overflow: auto;
    position: relative;
    /* sticky thead가 이 컨테이너 기준으로 작동 */
}
/* table 자체는 border-collapse 유지 */
.data-table, .data-table-compact {
    border-collapse: separate;
    border-spacing: 0;
}
.data-table, .data-table-compact { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td,
.data-table-compact th, .data-table-compact td {
    padding: 7px 9px; border-bottom: 1px solid var(--line);
    text-align: left; font-size: 12px;
}
.data-table thead th,
.data-table-compact thead th {
    color: var(--muted);
    background: #0c1829;
    font-size: 11px; white-space: nowrap;
    position: sticky; top: 0; z-index: 20;
    /* 완전 불투명 배경으로 하단 셀 가림 */
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

.data-table td:last-child,
.data-table-compact td:last-child { white-space: nowrap; }
.row-action-wrap {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;
}
.empty-cell { text-align: center; padding: 20px; color: var(--muted); font-size: 12px; }

/* 페이지네이션 */
.list-pagination-bar {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: center; gap: 6px; margin-top: 7px;
    padding-top: 7px; border-top: 1px solid var(--line);
}
.list-pagination-info { font-size: 11px; color: var(--muted); text-align: center; }
.list-pagination-actions {
    display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: nowrap;
}
.btn-page { height: 30px; min-width: 78px; font-size: 12px; padding: 0 11px; border-radius: 8px; }
.page-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
    background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.22);
    font-size: 12px; font-weight: 800; color: #d0f0ff;
}
.page-jump-form-inline { display: inline-flex; align-items: center; gap: 5px; }
.page-jump-select {
    width: 110px; min-width: 110px; height: 30px; font-size: 12px;
    border-radius: 8px; padding: 0 28px 0 9px;
}


/* ══════════════════════════════════════════
   폼 레이아웃 (수정/등록)
══════════════════════════════════════════ */
.entity-page, .entity-page-optimized {
    display: grid; gap: 10px; min-height: 0; flex: 1 1 auto;
}
.entity-hero-card {
    padding: 12px 16px; display: grid;
    grid-template-columns: minmax(0,1.5fr) auto auto;
    gap: 12px; align-items: center;
    background: linear-gradient(135deg,rgba(14,165,233,.10),rgba(37,99,235,.06) 45%,rgba(8,14,28,.98));
    border-radius: var(--radius); border: 1px solid var(--line); flex: 0 0 auto;
}
.entity-hero-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.015em; }
.entity-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.entity-meta-chip {
    min-width: 110px; padding: 8px 11px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.entity-meta-chip span  { display: block; font-size: 10px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; }
.entity-meta-chip strong { font-size: 12px; color: #f0f8ff; word-break: break-word; }
.entity-top-actions { display: flex; gap: 7px; justify-content: flex-end; }

.entity-form-shell { display: grid; gap: 10px; min-height: 0; flex: 1 1 auto; }

.form-panel, .compact-panel {
    padding: 12px 14px; border-radius: var(--radius);
    background: rgba(8,13,26,.94); border: 1px solid var(--line);
}
.compact-panel-optimized {
    display: flex; flex-direction: column;
    min-height: 0; max-height: calc(100vh - var(--h-top) - 130px);
    overflow: hidden;
}
.form-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.form-panel-head h4  { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.form-panel-head p   { font-size: 12px; color: var(--muted); line-height: 1.5; }
.inline-save-hint {
    display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
    background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.16);
    color: #bbf7d0; font-size: 11px; font-weight: 700; white-space: nowrap; flex: 0 0 auto;
}

.entity-form-scroll-area {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding-right: 6px; padding-bottom: 12px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.13) transparent;
}
.entity-form-scroll-area::-webkit-scrollbar { width: 6px; }
.entity-form-scroll-area::-webkit-scrollbar-track { background: transparent; }
.entity-form-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.13); border-radius: 999px;
    border: 1px solid transparent; background-clip: padding-box;
}

.entity-form-grid,
.entity-form-grid-optimized,
.entity-form-grid-wide,
.entity-form-grid-compact,
.entity-form-grid-dense,
.ultra-dense-form-grid,
.compact-form-grid,
.form-grid-dense {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 9px 11px;
}
.form-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-item label { font-size: 11px; margin: 0; color: #cddaf0; font-weight: 700; }
.form-item input, .form-item select {
    height: 36px; min-height: 36px; padding: 0 9px; font-size: 13px; border-radius: 10px;
    background: linear-gradient(180deg,rgba(18,30,50,.96),rgba(12,20,38,.98));
    border: 1px solid var(--line2); color: #f0f8ff; outline: none;
    transition: border-color .15s;
}
.form-item input:focus, .form-item select:focus { border-color: rgba(14,165,233,.55); }
.form-item textarea {
    min-height: 36px; padding: 7px 9px; font-size: 13px; border-radius: 10px;
    background: linear-gradient(180deg,rgba(18,30,50,.96),rgba(12,20,38,.98));
    border: 1px solid var(--line2); color: #f0f8ff; height: 36px; resize: vertical; outline: none;
}
.form-item input[readonly] { background: rgba(148,163,184,.07); color: #9ab0c8; }
.form-item-wide { grid-column: span 2; }

.sticky-form-actions,
.sticky-form-actions-compact,
.inline-save-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 7px; padding: 10px 0 2px; flex: 0 0 auto;
    border-top: 1px solid var(--line); margin-top: 8px;
}
.sticky-form-actions .btn,
.sticky-form-actions-compact .btn,
.inline-save-bar .btn { min-width: 76px; height: 36px; }

/* 알림 */
.notice-card { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-weight: 700; font-size: 12px; }
.notice-success { background: rgba(34,197,94,.10); color: #86efac; border: 1px solid rgba(34,197,94,.18); }
.notice-error   { background: rgba(239,68,68,.10);  color: #fca5a5; border: 1px solid rgba(239,68,68,.18); }

/* 유틸 */
.page-kicker { color: var(--primary); font-size: 10px; letter-spacing: .10em; margin-bottom: 2px; font-weight: 700; }
.page-title  { font-size: 22px; font-weight: 800; margin: 0; }
.eyebrow-text { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.panel-desc  { color: var(--muted); font-size: 12px; line-height: 1.6; }


/* ══════════════════════════════════════════
   반응형
══════════════════════════════════════════ */
@media (max-width: 1600px) {
    .stats-grid { grid-template-columns: repeat(3,1fr); }
    .mini-preview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .entity-form-grid, .entity-form-grid-optimized,
    .entity-form-grid-wide, .entity-form-grid-compact,
    .entity-form-grid-dense, .ultra-dense-form-grid,
    .compact-form-grid, .form-grid-dense { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1320px) {
    .panel-grid { grid-template-columns: 1fr; }
    .listing-search-top-row { grid-template-columns: 1fr; }
    .detached-search-top-right { max-width: none; }
}
@media (max-width: 1100px) {
    .entity-form-grid, .entity-form-grid-optimized,
    .entity-form-grid-wide, .entity-form-grid-compact,
    .entity-form-grid-dense, .ultra-dense-form-grid,
    .compact-form-grid, .form-grid-dense { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .app-menu-item { padding: 0 8px; font-size: 11px; }
}
@media (max-width: 860px) {
    html, body { overflow: auto; }
    .app-content { height: auto; overflow: visible; }
    .app-toolbar { flex-wrap: wrap; height: auto; padding: 6px 8px; }
    .app-tool-btn { min-width: 44px; height: 44px; }
    .entity-form-grid, .entity-form-grid-optimized,
    .entity-form-grid-wide, .entity-form-grid-compact,
    .entity-form-grid-dense, .ultra-dense-form-grid,
    .compact-form-grid, .form-grid-dense { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .mini-preview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .listing-filter-grid-v23 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .entity-hero-card { grid-template-columns: 1fr; }
    .hero-card { flex-direction: column; align-items: stretch; }
    .app-shop-name { font-size: 15px; }
    .compact-panel-optimized { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
    .entity-form-grid, .entity-form-grid-optimized,
    .entity-form-grid-wide, .entity-form-grid-compact,
    .entity-form-grid-dense, .ultra-dense-form-grid,
    .compact-form-grid, .form-grid-dense { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .mini-preview-grid { grid-template-columns: 1fr; }
    .app-content { padding: 10px; }
}

/* ── 테이블 교차 행 색상 ── */
.data-table tbody tr.tr-alt td,
.data-table-compact tbody tr.tr-alt td,
.parts-table tbody tr.tr-alt td {
    background: rgba(255,255,255,0.018);
}
.data-table tbody tr:hover td,
.data-table-compact tbody tr:hover td,
.parts-table tbody tr:hover td {
    background: rgba(14,165,233,0.06) !important;
    cursor: default;
}

/* ── 전역 투명 스크롤바 ── */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}
*:hover::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.18);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── 섹션 서브메뉴 ── */
.app-subnav {
    height: 34px;
    display: flex;
    align-items: stretch;
    padding: 0 10px;
    background: rgba(10,18,34,0.98);
    border-bottom: 1px solid rgba(14,165,233,0.14);
    flex-shrink: 0;
    gap: 1px;
    overflow: visible;
    scrollbar-width: none;
    position: relative;
    z-index: 100;
}
.app-subnav::-webkit-scrollbar { display: none; }

.app-subnav-item {
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all .15s;
    cursor: pointer;
}
.app-subnav-item:hover {
    color: #f0f8ff;
    background: rgba(255,255,255,0.04);
}
.app-subnav-item.active {
    color: #7dd3fc;
    border-bottom-color: var(--primary);
    background: rgba(14,165,233,0.07);
}

/* 서브메뉴 있을 때 콘텐츠 높이 재계산 */
.app-content.has-subnav {
    height: calc(100vh - var(--h-title) - var(--h-toolbar) - 34px);
}

/* ── 검색 패널 높이 자동조절 ── */
.panel-card-search-v23 {
    height: auto !important;
    flex: 0 0 auto !important;
}
.listing-search-shell {
    height: auto !important;
}

/* ── 목록 페이지 자동 여백 조정 ── */
/* 검색 패널: 내용에 맞게 높이 자동 */
.panel-card-search-v23 {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
}
/* 결과 없을 때 목록 패널도 최소 높이만 */
.panel-card-list:has(.empty-cell) {
    flex: 0 0 auto !important;
    min-height: 80px;
}
/* 결과 있을 때는 남은 공간 채움 */
.panel-card-list:not(:has(.empty-cell)) {
    flex: 1 1 auto !important;
}
/* 검색 영역 자동 여백 */
.col-filter-form,
.listing-filter-grid-v23 {
    height: auto !important;
}


/* ══════════════════════════════════════════════════════
   📱 모바일 반응형 — 카메이트 v1.0
   breakpoints: 768px (태블릿), 480px (모바일)
══════════════════════════════════════════════════════ */

/* ── 공통: 터치 친화적 기본 ── */
@media (max-width: 768px) {
    /* 전체 레이아웃 스크롤 허용 */
    html, body { overflow: auto !important; height: auto !important; }
    body.app-body { height: auto !important; overflow: auto !important; }

    /* 콘텐츠 영역 높이 자동 */
    .app-content,
    .app-content.has-subnav {
        height: auto !important;
        overflow: visible !important;
        padding: 10px 10px 80px !important;
        min-height: calc(100vh - 130px);
    }

    /* ── 타이틀바 ── */
    .app-titlebar { padding: 0 10px; }
    .app-title-text { font-size: 12px; }
    .app-title-ver { display: none; }
    .app-shop-name { font-size: 14px; }
    .logout-btn { padding: 0 8px; font-size: 10px; }

    /* ── 툴바 (상단 메뉴) ── */
    .app-toolbar {
        height: auto !important;
        padding: 6px 6px;
        flex-wrap: wrap;
        gap: 2px;
        justify-content: flex-start;
    }
    .app-tool-btn {
        min-width: 46px;
        height: 46px;
        padding: 3px 5px;
    }
    .app-tool-label { font-size: 10px; }
    .app-tool-icon svg { width: 18px; height: 18px; }

    /* ── 서브메뉴 ── */
    .app-subnav {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        height: auto !important;
        min-height: 36px;
        flex-wrap: nowrap;
        position: relative;
        z-index: 200;
    }
    .app-subnav::-webkit-scrollbar { display: none; }
    .app-subnav-item { padding: 0 10px; font-size: 11px; white-space: nowrap; }

    /* ── 드롭다운 메뉴 ── */
    .app-subnav-drop-menu { min-width: 130px; z-index: 9999; }
    /* ── 패널 카드 ── */
    .panel-card { border-radius: 10px; }

    /* ── 검색 영역 ── */
    .listing-search-top-row { flex-direction: column; gap: 8px; }
    .detached-search-top-right { max-width: none; width: 100%; }
    .listing-meta-panel { padding: 10px 14px 8px; }

    /* col-filter-grid 2열 */
    .col-filter-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }
    .col-filter-actions { flex-wrap: wrap; }

    /* ── 폼 그리드 2열 ── */
    .entity-form-grid,
    .entity-form-grid-optimized,
    .entity-form-grid-wide,
    .entity-form-grid-compact,
    .entity-form-grid-dense,
    .ultra-dense-form-grid,
    .compact-form-grid,
    .form-grid-dense { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    /* ── 테이블 가로 스크롤 ── */
    .table-wrap, .table-wrap-compact {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .data-table, .data-table-compact { min-width: 600px; }

    /* ── 버튼 그룹 ── */
    .row-action-wrap { flex-wrap: wrap; gap: 3px; }
    .btn-mini { height: 28px; padding: 0 8px; font-size: 11px; }

    /* ── 대시보드 ── */
    .cm-repair-table { min-width: 700px; }
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
    .cm-quick-cards { gap: 12px; }
    .cm-quick-card { padding: 24px 20px; min-width: 140px; }

    /* ── 하단 고정 바 (미수금 등) ── */
    .cm-footer-bar {
        flex-wrap: wrap;
        height: auto !important;
        padding: 6px 10px;
        gap: 6px;
    }
    .cm-footer-item { padding: 4px 10px; }

    /* ── 수정 폼 하단 버튼 ── */
    .sticky-form-actions {
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        z-index: 500;
        padding: 10px 14px;
        background: rgba(8,15,28,.97);
        border-top: 1px solid rgba(14,165,233,.2);
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    /* ── 페이지 헤더 ── */
    .entity-hero-card { flex-direction: column; gap: 8px; align-items: flex-start; }
    .entity-hero-title { font-size: 16px !important; }

    /* ── 고객 조회 필터 ── */
    .cs-filter-grid { grid-template-columns: repeat(2,1fr) !important; }

    /* ── 정비조회 아코디언 ── */
    .rs-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    /* ── 엔진오일 예상 ── */
    .oe-filter-row { flex-wrap: wrap; }
    .oe-input { width: 130px; }

    /* ── 미수금 필터 ── */
    .rv-filter-row { flex-wrap: wrap; }
    .rv-range-row .rv-input { width: 90px; }

    /* ── 부품재고 ── */
    .ps-filter-row { flex-wrap: wrap; }
    .ps-input { width: 130px; }

    /* ── 스케줄 ── */
    .sch-calendar { font-size: 11px; }

    /* ── 견적서 ── */
    .est-header-grid { grid-template-columns: 1fr !important; }

    /* ── 설정 페이지 ── */
    .settings-grid { grid-template-columns: 1fr !important; }
}

/* ── 480px 이하: 모바일 전용 ── */
@media (max-width: 480px) {
    /* 앱 타이틀 간소화 */
    .app-title-badge { width: 26px; height: 26px; min-width: 26px; }
    .app-title-text { font-size: 11px; }
    .app-shop-name { font-size: 13px; }

    /* 툴바 아이콘 작게 */
    .app-tool-btn { min-width: 40px; height: 42px; }
    .app-tool-label { font-size: 9px; }

    /* 콘텐츠 패딩 */
    .app-content { padding: 8px 8px 80px !important; }

    /* 1열 폼 */
    .entity-form-grid,
    .entity-form-grid-optimized,
    .entity-form-grid-wide,
    .entity-form-grid-compact,
    .entity-form-grid-dense,
    .ultra-dense-form-grid,
    .compact-form-grid,
    .form-grid-dense { grid-template-columns: 1fr !important; }

    /* 1열 필터 */
    .col-filter-grid { grid-template-columns: 1fr !important; }
    .cs-filter-grid  { grid-template-columns: 1fr !important; }
    .rs-filter-grid  { grid-template-columns: 1fr !important; }

    /* 통계 카드 2열 유지 */
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; }

    /* 테이블 */
    .data-table, .data-table-compact { min-width: 520px; font-size: 11px; }
    .data-table th, .data-table-compact th,
    .data-table td, .data-table-compact td { padding: 5px 6px; }

    /* 버튼 */
    .btn { height: 32px; padding: 0 10px; font-size: 11px; }
    .btn-mini { height: 26px; padding: 0 7px; font-size: 10px; }

    /* 대시보드 퀵카드 */
    .cm-quick-cards { flex-direction: column; align-items: stretch; }
    .cm-quick-card { flex-direction: row; padding: 16px 20px; min-width: auto; }
    .cm-quick-icon { font-size: 28px; }

    /* 페이지네이션 */
    .rs-pagination, .rv-pagination, .ps-pagination { gap: 2px; flex-wrap: wrap; }
    .rs-page-btn, .rv-page-btn, .ps-page-btn { min-width: 26px; height: 26px; font-size: 11px; }

    /* 헤더 통계 칩 숨김 (공간 절약) */
    .oe-stat-chips .oe-chip-warning,
    .rv-chips .rv-chip:last-child,
    .ps-chips .ps-chip:last-child { display: none; }

    /* 고객조회 날짜 버튼 */
    .cs-quick-btns button { padding: 0 6px; font-size: 10px; }

    /* 날짜 범위 입력 */
    .rs-date-range { flex-wrap: wrap; }
    .rs-quick-dates { flex-wrap: wrap; }
    .rs-quick-dates button { height: 26px; font-size: 10px; }

    /* 하단 요약바 */
    .cm-footer-bar { justify-content: center; }
    .cm-footer-item { min-width: calc(50% - 12px); }
    .cm-footer-label { font-size: 9px; }
    .cm-footer-val { font-size: 13px; }
}

/* ── 터치 기기: 버튼 최소 터치 영역 44px ── */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-mini, .app-tool-btn, .app-subnav-item,
    .rs-btn-search, .rs-btn-reset, .oe-btn-search, .oe-btn-reset,
    .rv-btn-search, .rv-btn-reset, .ps-btn-search, .ps-btn-reset {
        min-height: 40px;
    }
    .btn-mini { min-height: 34px; }
    input, select, textarea { font-size: 16px !important; } /* iOS 줌 방지 */
}


/* =====================================================
   🔴 PATCH: 정비조회 결과영역 내부 오른쪽 투명 스크롤바 표시
   적용대상: repair_search 결과 목록 / table-wrap 계열
   ===================================================== */
.table-wrap,
.table-wrap-compact,
.repair-search-result-scroll,
.repair-history-table-wrap,
.result-table-wrap {
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-gutter: stable;
    position: relative;
}

.repair-search-result-scroll,
.repair-history-table-wrap,
.result-table-wrap {
    max-height: calc(100vh - 260px);
    min-height: 320px;
}

.table-wrap::-webkit-scrollbar,
.table-wrap-compact::-webkit-scrollbar,
.repair-search-result-scroll::-webkit-scrollbar,
.repair-history-table-wrap::-webkit-scrollbar,
.result-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-wrap::-webkit-scrollbar-track,
.table-wrap-compact::-webkit-scrollbar-track,
.repair-search-result-scroll::-webkit-scrollbar-track,
.repair-history-table-wrap::-webkit-scrollbar-track,
.result-table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02);
    border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-wrap-compact::-webkit-scrollbar-thumb,
.repair-search-result-scroll::-webkit-scrollbar-thumb,
.repair-history-table-wrap::-webkit-scrollbar-thumb,
.result-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.table-wrap:hover::-webkit-scrollbar-thumb,
.table-wrap-compact:hover::-webkit-scrollbar-thumb,
.repair-search-result-scroll:hover::-webkit-scrollbar-thumb,
.repair-history-table-wrap:hover::-webkit-scrollbar-thumb,
.result-table-wrap:hover::-webkit-scrollbar-thumb,
.table-wrap:active::-webkit-scrollbar-thumb,
.table-wrap-compact:active::-webkit-scrollbar-thumb,
.repair-search-result-scroll:active::-webkit-scrollbar-thumb,
.repair-history-table-wrap:active::-webkit-scrollbar-thumb,
.result-table-wrap:active::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.32);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.table-wrap,
.table-wrap-compact,
.repair-search-result-scroll,
.repair-history-table-wrap,
.result-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.28) rgba(255,255,255,0.02);
}

.panel-card-list,
.repair-search-panel,
.result-panel {
    overflow: visible !important;
}