/**
 * 만나관리 V6 — 기본 스타일시트
 * 폰트: 맑은 고딕 10pt 기본 (기획서 excel-conventions 규칙)
 * 금액: #,##0 형식 (JS에서 처리)
 * 헤더: 배경색 연회색, 볼드, 가운데정렬
 * 합계행: 위에 얇은 선, 아래 이중선
 */

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary: #6171A8;
    --primary-dark: #4E5B8C;
    --success: #4B8C6B;
    --warning: #B8860B;
    --danger: #C45050;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    --manna-color: #2D8A5E;
    --hongin-color: #D4883C;

    --font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size: 13px;
    --border-radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

html, body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-50);
    min-height: 100vh;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 글씨 크기 단계 (font-size-control에서 class 부여) ── */
html.fs-xs { font-size: 11px; }
html.fs-sm { font-size: 12px; }
html.fs-md { font-size: 13px; }  /* 기본 */
html.fs-lg { font-size: 14px; }
html.fs-xl { font-size: 15px; }
html.fs-2xl { font-size: 16px; }

/* ── Layout ── */
.v6-app {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ── */
.v6-sidebar {
    width: 240px;
    background: var(--gray-900);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
}

.v6-logo {
    padding: 20px 16px;
    border-bottom: 1px solid var(--gray-700);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v6-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.v6-logo-text {
    font-size: 15px;
    font-weight: 600;
}

.v6-logo-version {
    font-size: 11px;
    color: var(--gray-400);
}

/* Nav */
.v6-nav {
    flex: 1;
    padding: 8px 0;
}

.v6-nav-section {
    padding: 8px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
}

.v6-nav-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--gray-300);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    gap: 10px;
}

.v6-nav-item:hover {
    background: var(--gray-800);
    color: #fff;
}

.v6-nav-item.active {
    background: var(--primary);
    color: #fff;
}

.v6-nav-badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    color: var(--gray-400);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}
.v6-nav-badge:empty { display: none; }
.v6-nav-item.active .v6-nav-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.v6-nav-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

/* Entity Switcher */
.v6-entity-switcher {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-700);
    display: flex;
    gap: 4px;
}

.v6-entity-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--gray-600);
    border-radius: 4px;
    background: transparent;
    color: var(--gray-400);
    font-size: 11px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.v6-entity-btn:hover {
    border-color: var(--gray-400);
    color: #fff;
}

.v6-entity-btn.active {
    color: #fff;
    font-weight: 600;
}

.v6-entity-btn.active[data-entity="MANNA"] {
    background: var(--manna-color);
    border-color: var(--manna-color);
}

.v6-entity-btn.active[data-entity="HONGIN"] {
    background: var(--hongin-color);
    border-color: var(--hongin-color);
}

.v6-entity-btn.active[data-entity="ALL"] {
    background: var(--gray-600);
    border-color: var(--gray-600);
}

/* ── Main Content ── */
.v6-main {
    flex: 1;
    margin-left: 240px;
    padding: 0;
}

.v6-topbar {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.v6-topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
}

.v6-topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-500);
}

.v6-content {
    padding: 24px;
}

/* ── Table (엑셀 서식 규칙 반영) ── */
.v6-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 12px;
}

.v6-table thead th {
    background: var(--gray-100);  /* 연회색 배경 */
    font-weight: 600;            /* 볼드 */
    text-align: center;          /* 가운데정렬 */
    padding: 10px 12px;
    border-bottom: 2px solid var(--gray-300);
    color: var(--gray-700);
    white-space: nowrap;
    line-height: 1.4;
}

.v6-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    line-height: 1.5;
}

.v6-table tbody tr:hover {
    background: #F7F8FB;
}

/* 합계행 (위: 얇은 선, 아래: 이중선) */
.v6-table tbody tr.row-total td {
    font-weight: 600;
    border-top: 1px solid var(--gray-400);
    border-bottom: 3px double var(--gray-600);
    background: var(--gray-50);
}

/* ── Cards ── */
.v6-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.v6-card {
    background: #fff;
    padding: 16px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--gray-300);
}

.v6-card-title {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.v6-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
}

.v6-card-label {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}

.v6-card-total {
    background: var(--gray-800);
    border-left-color: var(--primary);
}
.v6-card-total .v6-card-title { color: var(--gray-400); }
.v6-card-total .v6-card-value { color: #fff; }
.v6-card-total .v6-card-label { color: var(--gray-500); }

/* ── List Header ── */
.v6-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v6-list-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.v6-count {
    font-size: 12px;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Badge ── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.badge-gray { background: var(--gray-200); color: var(--gray-600); }

/* ── Pagination ── */
.v6-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.v6-page-btn {
    padding: 4px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}

.v6-page-btn:hover { background: var(--gray-100); }
.v6-page-btn.v6-page-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Search ── */
.v6-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.v6-search input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: 13px;
    font-family: var(--font-family);
}

.v6-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(97, 113, 168, 0.1);
}

.v6-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-family);
    font-weight: 500;
    transition: background 0.15s;
}

.v6-btn-primary { background: var(--primary); color: #fff; }
.v6-btn-primary:hover { background: var(--primary-dark); }
.v6-btn-success { background: var(--success); color: #fff; }
.v6-btn-danger { background: var(--danger); color: #fff; }
.v6-btn-outline {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}
.v6-btn-outline:hover { background: var(--gray-100); }

/* ── Toast ── */
.v6-toast {
    padding: 10px 16px;
    border-radius: var(--border-radius);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    max-width: 360px;
}

.v6-toast-show { opacity: 1; transform: translateX(0); }
.v6-toast-success { background: var(--success); }
.v6-toast-error { background: var(--danger); }
.v6-toast-warning { background: var(--warning); color: var(--gray-900); }
.v6-toast-info { background: var(--primary); }

/* ── Loading ── */
#v6-loading {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.v6-loading-content {
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.v6-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: v6-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes v6-spin { to { transform: rotate(360deg); } }

/* ── Error ── */
.v6-error {
    padding: 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--border-radius);
    color: var(--danger);
    font-size: 13px;
}

/* ── Dashboard ── */
.v6-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.v6-dashboard-panel {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.v6-dashboard-panel h4 {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Status indicator ── */
.v6-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.v6-status-ok { background: var(--success); }
.v6-status-warn { background: var(--warning); }
.v6-status-error { background: var(--danger); }

/* ── Form Fields (input, select, textarea) ── */
.v6-input, .v6-select, .v6-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--gray-800);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.v6-input:focus, .v6-select:focus, .v6-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(97, 113, 168, 0.1);
}

.v6-input:disabled, .v6-select:disabled, .v6-textarea:disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
}

.v6-input::placeholder { color: var(--gray-400); }
.v6-textarea { min-height: 72px; resize: vertical; }
.v6-select { cursor: pointer; appearance: auto; }

/* ── Form Validation States ── */
.v6-input.v6-field-error, .v6-select.v6-field-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.v6-input.v6-field-success, .v6-select.v6-field-success {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.v6-field-msg {
    font-size: 11px;
    margin-top: 3px;
    min-height: 16px;
}

.v6-field-msg-error { color: var(--danger); }
.v6-field-msg-success { color: var(--success); }

/* Required field indicator */
.v6-required::after {
    content: ' *';
    color: var(--danger);
    font-weight: 600;
}

/* ── Form Panel ── */
.v6-form-panel {
    background: #fff;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.v6-form-panel h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.v6-form-group {
    margin-bottom: 12px;
}

.v6-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 4px;
    cursor: pointer;
}

/* 로딩 스피너 */
@keyframes v6-spin {
    to { transform: rotate(360deg); }
}
.v6-loading::after {
    content: "";
    display: inline-block;
    width: 16px; height: 16px;
    margin-left: 8px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: v6-spin 0.6s linear infinite;
    vertical-align: middle;
}

.v6-form-row {
    display: flex;
    gap: 12px;
}

.v6-form-row .v6-form-group {
    flex: 1;
}

/* ── Toolbar ── */
.v6-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.v6-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.v6-btn-group {
    display: flex;
    gap: 4px;
}

/* ── Modal / Dialog ── */
.v6-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: v6-fadeIn 0.15s ease;
}

.v6-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: v6-slideUp 0.2s ease;
}

.v6-modal-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v6-modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
}

.v6-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--gray-100);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.v6-modal-close:hover { background: var(--gray-200); }

.v6-modal-body {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.6;
}

.v6-modal-footer {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.v6-modal-lg { max-width: 640px; }

@keyframes v6-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes v6-slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Command Palette (Ctrl+K) ── */
.v6-cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10001;
    animation: v6-fadeIn 0.1s ease;
}

.v6-cmd-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 480px;
    max-width: 90vw;
    overflow: hidden;
    animation: v6-slideUp 0.15s ease;
}

.v6-cmd-input {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    font-size: 15px;
    font-family: var(--font-family);
    color: var(--gray-800);
    outline: none;
}

.v6-cmd-input::placeholder { color: var(--gray-400); }

.v6-cmd-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.v6-cmd-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    gap: 10px;
    transition: background 0.1s;
    font-size: 13px;
    color: var(--gray-700);
}

.v6-cmd-item:hover, .v6-cmd-item.v6-cmd-active {
    background: var(--gray-100);
    color: var(--gray-900);
}

.v6-cmd-item .v6-cmd-icon {
    width: 24px;
    text-align: center;
    font-size: 14px;
}

.v6-cmd-item .v6-cmd-name { flex: 1; }

.v6-cmd-item .v6-cmd-shortcut {
    font-size: 11px;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.v6-cmd-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--gray-200);
    font-size: 11px;
    color: var(--gray-400);
    display: flex;
    gap: 12px;
}

.v6-cmd-footer kbd {
    background: var(--gray-100);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 11px;
}

/* ── Tooltip ── */
.v6-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.v6-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 999;
}

.v6-tooltip:hover::after { opacity: 1; }

/* ── Skeleton Loader ── */
.v6-skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: v6-shimmer 1.5s infinite;
    border-radius: 4px;
}

.v6-skeleton-line { height: 14px; margin-bottom: 8px; }
.v6-skeleton-card { height: 80px; border-radius: var(--border-radius); }
.v6-skeleton-table-row { height: 36px; margin-bottom: 4px; }

@keyframes v6-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Empty State ── */
.v6-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-400);
}

.v6-empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.v6-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.v6-empty-state-desc {
    font-size: 12px;
    margin-bottom: 16px;
}

/* ── Breadcrumb ── */
.v6-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.v6-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

.v6-breadcrumb a:hover { text-decoration: underline; }
.v6-breadcrumb-sep { color: var(--gray-300); }

/* ── Section Title ── */
.v6-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Comparison Card (Dashboard) ── */
.v6-entity-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.v6-comparison-card {
    padding: 10px;
    border-radius: var(--border-radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.v6-comparison-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}

/* ── Quick Actions ── */
.v6-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Recent Pages Widget (topbar) ── */
.v6-recent-pages {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.v6-recent-chip {
    padding: 2px 8px;
    font-size: 11px;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.v6-recent-chip:hover {
    background: var(--primary);
    color: #fff;
}

/* ── Keyboard Shortcut Badge ── */
.v6-kbd {
    display: inline-block;
    padding: 1px 5px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    font-family: monospace;
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.4;
}

/* ── Shortcut Help Panel ── */
.v6-shortcut-panel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 16px 20px;
    width: 320px;
    z-index: 9998;
    animation: v6-slideUp 0.2s ease;
}

.v6-shortcut-panel h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--gray-800);
}

.v6-shortcut-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    color: var(--gray-600);
}

/* ── Page Transition ── */
.v6-page-enter {
    animation: v6-pageIn 0.2s ease;
}

@keyframes v6-pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .v6-form-row { flex-direction: column; gap: 0; }
    .v6-cmd-box { width: 90vw; }
}

@media (max-width: 768px) {
    .v6-sidebar {
        width: 60px;
    }
    .v6-logo-text, .v6-logo-version, .v6-nav-section {
        display: none;
    }
    .v6-nav-item span:not(.v6-nav-icon) {
        display: none;
    }
    .v6-main {
        margin-left: 60px;
    }
    .v6-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .v6-topbar { padding: 8px 12px; }
    .v6-content { padding: 12px; }
    .v6-toolbar { flex-direction: column; }
    .v6-table { font-size: 11px; }
    .v6-table thead th { padding: 6px 6px; }
    .v6-table tbody td { padding: 4px 6px; }
    .v6-recent-pages { display: none; }
    .v6-shortcut-panel { width: calc(100vw - 80px); right: 10px; bottom: 10px; }
    .v6-modal { width: 95%; }
}

/* Table horizontal scroll on small screens */
.v6-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══ 상품코드 마스터 (ProductView) ═══ */

/* 통계 카드 */
.pm-stats-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pm-stat-card { flex: 1; min-width: 100px; background: #fff; border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid #e5e7eb; }
.pm-stat-card.pm-stat-total   { border-left-color: #7B8ABF; }
.pm-stat-card.pm-stat-food    { border-left-color: #4B8C6B; }
.pm-stat-card.pm-stat-product { border-left-color: #B8860B; }
.pm-stat-card.pm-stat-expense { border-left-color: #C45050; }
.pm-stat-card.pm-stat-vendor  { border-left-color: #7E7A9A; }
.pm-stat-number { font-size: 24px; font-weight: 700; color: #1f2937; }
.pm-stat-label  { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* 테이블 */
.pm-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pm-table thead th { background: #f8fafc; color: #374151; font-weight: 600; padding: 10px 8px; border-bottom: 2px solid #e5e7eb; white-space: nowrap; user-select: none; font-size: 12px; }
.pm-table thead th:hover { background: #f1f5f9; }
.pm-table tbody td { padding: 8px; border-bottom: 1px solid #f3f4f6; }
.pm-row { cursor: pointer; transition: background .15s; }
.pm-row:hover { background: #F5F6FA; }

/* 뱃지 */
.pm-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pm-badge-food    { background: #DDE8E2; color: #065f46; }
.pm-badge-product { background: #fef3c7; color: #92400e; }
.pm-badge-expense { background: #fee2e2; color: #991b1b; }
.pm-badge-tax     { background: #ECEEF5; color: #4E5B8C; }
.pm-badge-exempt  { background: #f3f4f6; color: #6b7280; }

/* 페이징 */
.pm-page-btn { padding: 6px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all .15s; }
.pm-page-btn:hover { background: #F5F6FA; border-color: #7B8ABF; }
.pm-page-btn.pm-page-active { background: #7B8ABF; color: #fff; border-color: #7B8ABF; }

/* 상세 패널 */
.pm-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 1000; }
.pm-detail-panel { position: fixed; top: 0; right: -420px; width: 400px; max-width: 90vw; height: 100vh; background: #fff; z-index: 1001; box-shadow: -4px 0 20px rgba(0,0,0,.15); overflow-y: auto; transition: right .3s ease; }
.pm-detail-panel.pm-detail-open { right: 0; }
.pm-detail-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 20px 12px; border-bottom: 1px solid #e5e7eb; }
.pm-detail-code { font-size: 28px; font-weight: 700; color: #6171A8; }
.pm-detail-name { font-size: 16px; color: #374151; margin-top: 4px; }
.pm-detail-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af; padding: 4px 8px; }
.pm-detail-close:hover { color: #374151; }
.pm-detail-badges { padding: 12px 20px; display: flex; gap: 6px; flex-wrap: wrap; }
.pm-detail-body { padding: 8px 20px 24px; }
.pm-detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.pm-detail-label { flex: 0 0 90px; font-size: 12px; color: #9ca3af; font-weight: 500; }
.pm-detail-value { flex: 1; font-size: 14px; color: #1f2937; }

/* Print styles */
@media print {
    .v6-sidebar, .v6-topbar, .v6-toolbar, .v6-pagination, .v6-toast, .v6-cmd-overlay, .v6-modal-overlay { display: none !important; }
    .v6-main { margin-left: 0 !important; }
    .v6-content { padding: 0 !important; }
    .v6-table { box-shadow: none; font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════
   V6 UX Enhancement — 2026.03.30
   ══════════════════════════════════════════════════════════ */

/* ── 사이드바 네비 호버 전환 효과 강화 ── */
.v6-nav-item {
    transition: all .2s ease;
    border-left: 3px solid transparent;
}
.v6-nav-item:hover {
    border-left-color: rgba(255,255,255,.3);
    padding-left: calc(12px + 3px);
}
.v6-nav-item.active {
    border-left-color: var(--primary);
}

/* ── 사이드바 축소 시 모바일 대응 ── */
@media (max-width: 768px) {
    .v6-sidebar {
        width: 56px;
        overflow: hidden;
    }
    .v6-sidebar:hover {
        width: 240px;
    }
    .v6-sidebar .v6-logo-text,
    .v6-sidebar .v6-logo-version,
    .v6-sidebar .v6-nav-section,
    .v6-sidebar .v6-nav-item span:not(.v6-nav-icon),
    .v6-sidebar .v6-entity-switcher {
        display: none;
    }
    .v6-sidebar:hover .v6-logo-text,
    .v6-sidebar:hover .v6-logo-version,
    .v6-sidebar:hover .v6-nav-section,
    .v6-sidebar:hover .v6-nav-item span:not(.v6-nav-icon),
    .v6-sidebar:hover .v6-entity-switcher {
        display: inline;
    }
    .v6-main {
        margin-left: 56px !important;
    }
    .v6-sidebar:hover ~ .v6-main {
        margin-left: 240px;
    }
}

/* ── 토스트 알림 시스템 ── */
.v6-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.v6-toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    pointer-events: auto;
    animation: v6ToastIn .3s ease;
    max-width: 360px;
}
.v6-toast-success { background: #4B8C6B; }
.v6-toast-error { background: #C45050; }
.v6-toast-warning { background: #B8860B; color: #1f2937; }
.v6-toast-info { background: #6171A8; }
@keyframes v6ToastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── 카드/패널 호버 효과 ── */
.v6-dashboard-panel {
    transition: transform .15s, box-shadow .15s;
}
.v6-dashboard-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ── 버튼 리플 효과 ── */
.v6-btn {
    position: relative;
    overflow: hidden;
    transition: all .15s;
}
.v6-btn:active {
    transform: scale(0.97);
}

/* ── 테이블 행 호버 ── */
.v6-table tbody tr {
    transition: background .15s;
}
.v6-table tbody tr:hover {
    background: #f8fafc;
}

/* ── 폼 입력 포커스 강화 ── */
.v6-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(97, 113, 168, .1);
    outline: none;
}

/* ── 로딩 스피너 ── */
@keyframes v6Spin { to { transform: rotate(360deg); } }
.v6-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: v6Spin .7s linear infinite;
}

/* ── 스크롤바 스타일링 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── 빈 상태 공통 ── */
.v6-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--gray-400);
}
.v6-empty-state .icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: .4;
}
.v6-empty-state p {
    font-size: .88rem;
    line-height: 1.7;
    max-width: 400px;
    margin: 0 auto;
}

/* ── 상단바 개선 ── */
.v6-topbar {
    transition: box-shadow .2s;
}
.v6-topbar:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ── 키보드 단축키 뱃지 (글로벌) ── */
kbd, .v6-kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 11px;
    font-family: monospace;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    color: var(--gray-500);
}

/* ── 페이지 전환 애니메이션 ── */
@keyframes v6PageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v6-page-active {
    animation: v6PageIn .25s ease;
}

/* ── 뱃지 카운트 개선 ── */
.v6-nav-badge:empty { display: none; }
.v6-nav-badge {
    background: rgba(255,255,255,0.18);
    color: var(--gray-300);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ── 인쇄용 스타일 ── */
@media print {
    .v6-sidebar, .v6-topbar, .v6-entity-switcher { display: none !important; }
    .v6-main { margin-left: 0 !important; }
    .v6-content { padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════
   V6 Missing CSS Fixes — 2026.03.30 Audit
   ══════════════════════════════════════════════════════════ */

/* ── 경고 버튼 (index.html LOT추적 리콜 시뮬레이션에 사용) ── */
.v6-btn-warning {
    background: #B8860B;
    color: #1f2937;
    border: none;
}
.v6-btn-warning:hover {
    background: #B8860B;
}

/* ── 법인 탭 버튼 (마감/정산 페이지) ── */
.v6-tab-btn {
    padding: 5px 14px;
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.v6-tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.v6-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ── HACCP 체크박스 스타일 ── */
.haccp-sanitation,
.haccp-ccp,
.closing-check {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ── 반품 품목 행 ── */
.rtn-item-row td {
    padding: 6px 4px;
}
.rtn-item-code,
.rtn-item-name,
.rtn-item-qty,
.rtn-item-price {
    font-size: 13px;
}

/* ── z-index 충돌 해결: 토스트 > 모달 ── */
.v6-toast-container {
    z-index: 10001;
}

/* ── 모바일 소형 기기 (< 480px) ── */
@media (max-width: 480px) {
    .v6-input, .v6-select {
        font-size: 14px;
        padding: 10px 12px;
        min-height: 44px;
    }
    .v6-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }
    .v6-topbar {
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }
    .v6-topbar-info {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 11px;
    }
    .v6-dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    .v6-form-row {
        flex-direction: column;
    }
    .v6-toolbar {
        flex-direction: column;
        gap: 8px;
    }
}

/* ── 엔터티 비교 카드 간격 ── */
.v6-entity-comparison {
    display: flex;
    gap: 12px;
}
.v6-comparison-card {
    flex: 1;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    text-align: center;
}
.v6-comparison-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
}

/* ── 폼 패널 공통 ── */
.v6-form-panel {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}
.v6-form-panel h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray-100);
}

/* ── 필수 입력 표시 ── */
.v6-required::after {
    content: ' *';
    color: var(--danger);
}

/* ══════════════════════════════════════
   글씨 크기 조절 컨트롤 (topbar 우측)
   ══════════════════════════════════════ */
.v6-font-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 6px;
    padding: 2px;
    margin-right: 4px;
}
.v6-font-control button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}
.v6-font-control button:hover {
    background: #fff;
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}
.v6-font-control .v6-fc-label {
    font-size: 11px;
    color: var(--gray-500);
    padding: 0 4px;
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    user-select: none;
}