/* =========================================
   1. 전역 설정 및 변수 (Global & Variables)
   ========================================= */
:root {
    --nb-bg: #101828; --nb-fg: #ffffff; --nb-link: #c7d2fe; --nb-height: 44px; --nb-z: 9999;
    --primary-900:#0B2A6F; --primary-700:#1D4ED8; --primary-500:#2E7BFF; --primary-200:#BFD9FF; --primary-100:#EAF3FF;
    --accent-600:#F59E0B; --accent-200:#FFE6B3;
    --bg:#F6FAFF; --surface:rgba(255,255,255,.88); --surface-solid:#FFFFFF;
    --text:#0B1220; --muted:#64748B; --border:rgba(2, 10, 30, .12);
    --success:#16A34A; --danger:#DC2626;
    --shadow-lg: 0 18px 55px rgba(2, 10, 30, .18); --shadow-md: 0 10px 24px rgba(2, 10, 30, .12);
    --r-lg:16px; --r-md:12px;
    --bnm-z: 10000; --bnm-backdrop: rgba(0,0,0,.5); --bnm-bg: #fff; --bnm-fg: #000;
    --bnm-accent: #3b82f6; --bnm-radius: 14px; --bnm-shadow: 0 20px 60px rgba(0,0,0,.25);
    /* [추가] 장사 Indigo 테마 핵심 변수 */
    --indigo-main: #5c3c92;    /* 메인 보라색 */
    --indigo-light: #f8f7ff;   /* 연한 보라색 배경 */
    --indigo-border: #d1c4e9;  /* 보더용 연보라 */
}

/* 폰트 사이즈 동적 조절 */
html { font-size: 16px; transition: font-size 0.2s ease-in-out; }
html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="large"] { font-size: 18px; }
html[data-font-size="xlarge"] { font-size: 20px; }

body {
    background-color: #f8f9fa; margin: 0; padding: 0;
    overflow: hidden; /* 모바일 전체 스크롤 방지 */
}

/* 전체 레이아웃 컨테이너 */
.container {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    max-width: 1100px; margin: 0 auto; padding: 0;
}

/* =========================================
   2. 상단/하단/본문 레이아웃 (Layout)
   ========================================= */
.header {
    position: sticky; top: 0; z-index: 1050;
    background-color: #f8f9fa;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.1);
}

.body {
    flex-grow: 1; overflow-y: auto; overflow-x: hidden;
     margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

footer {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 1100px; z-index: 1050;
    background: #fff; border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 10px -4px rgba(0,0,0,0.05);
}
.action-left, .action-right {
    display: flex;
    gap: 8px; /* 버튼 간격 */
    flex-shrink: 0;
}
.bottom-action-bar {
    background-color: #f8f9fa; /* 필요에 따라 색상 변경 */
    border-top: 1px solid #e9ecef;

    /* 가로 스크롤 핵심 속성 */
    overflow-x: auto;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    gap: 20px; /* 좌측과 우측 버튼 그룹 사이의 여백 */

    /* 스크롤바 숨기기 (기능은 유지) */
}
.bottom-action-bar {
    display: flex;
    justify-content: space-between; /* 화면이 넓을 땐 양끝 배치 */
    align-items: center;
    padding: 5px;
    background-color: #f8f9fa; /* 필요에 따라 색상 변경 */
    border-top: 1px solid #e9ecef;

    /* 가로 스크롤 핵심 속성 */
    overflow-x: auto;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    gap: 20px; /* 좌측과 우측 버튼 그룹 사이의 여백 */

    /* 스크롤바 숨기기 (기능은 유지) */
}
.bottom-action-bar button {
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    border: none;

    white-space: nowrap; /* 글씨 개행 방지 */
    flex-shrink: 0;      /* 버튼 축소 방지 */
}
/* =========================================
   3. 대시보드 카드 컴포넌트 (Dashboard Card)
   ========================================= */
.dashboard-card {
    background: #ffffff; border-radius: 12px; border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 10px; margin-bottom: 10px;
}

.card-header-bp {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px;
    font-weight: 700; font-size: 1.1rem; color: #5c3c92; cursor: pointer;
}

.hero-metric { text-align: center; padding: 5px 0; background: #fdfcff; border-radius: 8px; margin-bottom: 12px; }
.hero-metric .label { font-size: 0.9rem; color: #777; margin-bottom: 5px; }
.hero-metric .value { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.5px; }

.data-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 0.95rem; border-bottom: 1px dashed #f5f5f5; }
.data-row:last-child { border-bottom: none; }
.data-row .title { color: #555; font-weight: 500; }
.data-row .amount { font-weight: 600; text-align: right; }
.data-row .sub-text { font-size: 0.8rem; color: #999; display: block; margin-top: 2px;}

.toggle-trigger { cursor: pointer; color: #888; font-size: 0.85rem; }
.card-content { display: none; !important;}

/* =========================================
   4. 네비게이션 및 메뉴 (Navigation)
   ========================================= */
.custom-navbar { background-color: #ffffff; border-bottom: 1px solid #f0f0f0; position: relative; z-index: 1001; }
.navbar-brand { color: #5c3c92 !important; font-size: 1.3rem; letter-spacing: -0.5px; }

/* 메뉴 텍스트 우측 정렬 */
.custom-navbar .nav-link, .custom-navbar .dropdown-item-custom, .custom-navbar .utility-link {
    text-align: right !important; width: 100% !important; display: block !important;
}
.custom-navbar .nav-item { justify-content: flex-end !important; }
.custom-navbar .dropdown-menu { text-align: right !important; border: none; }

/* 드롭다운 2단 그리드 */
.custom-navbar .two-column-list { min-width: 320px; padding: 10px; }
.custom-navbar .two-column-list.show { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.custom-navbar .two-column-list li { width: 100%; }
.custom-navbar .two-column-list .dropdown-item-custom { white-space: normal !important; word-break: keep-all; padding: 8px 12px; display: flex; align-items: center; justify-content: flex-end; }

/* 햄버거 버튼 보라색 필터 */
.custom-toggler { border: none; background-color: #f8f9fa; padding: 8px 10px; border-radius: 8px; }
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2892, 60, 146, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* =========================================
   5. 컨트롤 패널 및 검색 (Search UI)
   ========================================= */
.control-panel { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 10px; border: 1px solid #f0f0f0; }
.date-control-group { display: flex; align-items: center; gap: 10px; }
.date-input-wrap { flex: 1; display: flex; align-items: center; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 5px 10px; height: 48px; }
.date-input-wrap input[type="date"] { border: none; background: transparent; outline: none; flex: 1; font-weight: 600; font-size: 0.8rem; color: #333; max-width: 110px}
.date-input-wrap input[type="search"],
.date-input-wrap input[type="text"] {
    border: none !important;      /* 감싸는 div에 테두리가 있으므로 제거 */
    background: transparent !important;
    outline: none !important;
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    padding: 0;                   /* div 패딩 사용 */
}
.btn-search-modern { background-color: #5c3c92; color: white; border: none; border-radius: 8px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.goal-control-group { display: flex; align-items: center; justify-content: space-between; background: #fdfcff; border: 1px dashed #d1c4e9; border-radius: 8px; padding: 10px; margin-top: 10px; }
.goal-input { width: 120px; border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; font-size: 0.95rem; text-align: right; font-weight: 600; }

/* =========================================
   6. 기타 컴포넌트 (Notice, Buttons 등)
   ========================================= */
#notice-modal{ position: fixed; inset: 0; z-index: var(--bnm-z); }
.notice-backdrop{ position:absolute; inset:0; background: var(--bnm-backdrop); }
.notice-dialog{
    position: relative; margin: 0 auto;
    top: 50%; transform: translateY(-50%);
    width: min(560px, calc(100vw - 32px));
    background: var(--bnm-bg); color: var(--bnm-fg);
    border-radius: var(--bnm-radius); box-shadow: var(--bnm-shadow);
    padding: 20px 20px 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.notice-x{
    position:absolute; top:10px; right:10px; width:36px; height:36px;
    border:0; background:transparent; font-size:22px; cursor:pointer; line-height:1;
    border-radius: 10px;
}
.notice-x:focus{ outline: 2px solid #94a3b8; }
.notice-body{ padding: 8px 6px; }
.notice-body h2{ margin: 0 0 8px; font-size: 18px; }
.notice-message{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;    /* 표시 줄 수 */
    overflow: hidden;
    max-height: 16em;        /* 줄높이(line-height:1.6 기준 2줄=3.2em) */
    line-height: 1.6;
}
.notice-link{ color: var(--bnm-accent); text-decoration: underline; }
.notice-actions{ display:flex; gap:10px; justify-content: flex-end; padding-top: 4px; }
#notice-bar{
    position: sticky; top: 0; left: 0; right: 0; z-index: var(--nb-z);
    background: var(--nb-bg); color: var(--nb-fg);
    min-height: var(--nb-height); box-sizing: border-box;
}
.notice-wrap{
    max-width: 920px; margin: 0 auto; padding: 8px 16px;
    display: flex; align-items: center; gap: 12px;
}
.notice-text{
    flex: 1; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-link:focus, .notice-close:focus{ outline: 2px solid #94a3b8; outline-offset: 2px; border-radius: 6px; }
.notice-close{
    background: transparent; border: 0; color: var(--nb-fg);
    font-size: 20px; line-height: 1; width: 32px; height: 32px; cursor: pointer;
}
.btn-ghost{
    background: transparent; color: #374151; border:1px solid #e5e7eb; padding:10px 14px;
    border-radius: 10px; cursor:pointer;
}
.btn-primary{
    background: var(--bnm-accent); color: #fff; border:0; padding:10px 14px;
    border-radius: 10px; cursor:pointer; font-weight:600;
}
.btn-menu-secondary { background-color: #e2e8f0; color: #333;  border-radius: 12px; border: none;}
.btn-menu-primary { background: #2C2C38 !important; color: #ffffff !important; border-radius: 12px; border: none; }
.btn-menu-danger { background-color: #ff4d4f; color: white; border-radius: 12px; border: none;}

/* 필터 가로 스크롤을 위한 추가 스타일 (기존 CSS에 없는 경우 참고) */
.filter-scroll-group {
    display: flex; gap: 8px; overflow-x: auto;
    padding-bottom: 5px; -webkit-overflow-scrolling: touch;
}
.filter-scroll-group::-webkit-scrollbar { display: none; }
.filter-item { flex-shrink: 0; }

/* 상태 배지 추가 */
.meth-badge { padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; }
.credit-meth { background: #fff1f0; color: #cf1322; }
.card-meth { background: #f6ffed; color: #389e0d; }
.cash-meth { background: #e6f7ff; color: #096dd9; }

/* 아이콘 회전 */
.icon-turn { transition: transform 0.3s; display: inline-block; }
.icon-turn.rotated { transform: rotate(180deg); }

.btn-save-modern {
    background-color: #fff;
    color: #5c3c92;
    border: 1px solid #5c3c92;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 600;
}
menu {
    padding: 0;
}

.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8); /* 반투명 배경 */
    display: none;
    flex-direction: column; /* 세로 정렬 */
    justify-content: center;
    align-items: center;
    z-index: 1050;
    color: white; /* 텍스트 색상 */
    font-size: 1.5rem; /* 글씨 크기 */
}

.hide{
    display: none !important;
}
.hide-con{
    display: none !important;
}

.text-highlight {
    color: #5c3c92;
    font-weight: 700;
}


.reg-section-title { font-size: 0.95rem; font-weight: 700; color: #5c3c92; margin: 15px 5px 10px; display: flex; align-items: center; gap: 6px; }
.reg-label { font-size: 0.8rem; color: #666; font-weight: 600; margin-bottom: 4px; display: block; }
.input-group-custom { position: relative; margin-bottom: 12px; }
.input-group-custom input, .input-group-custom select, .input-group-custom textarea {
    width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; background: #fff;
}
.input-group-custom input:focus { border-color: #5c3c92; outline: none; box-shadow: 0 0 0 2px rgba(92, 60, 146, 0.1); }
.input-group-custom input[readonly] { background-color: #f8f9fa; color: #888; }

.icon-btn-wrap { position: absolute; right: 8px; top: 32px; display: flex; gap: 4px; z-index: 10; }
.icon-btn { background: #f0f0f5; border: none; border-radius: 8px; width: 34px; height: 34px; color: #5c3c92; display: flex; align-items: center; justify-content: center; }

/* 하단 리스트 스타일 */
#listBody tr { border-bottom: 1px solid #f0f0f0; cursor: pointer; }
#listBody th { font-size: 0.9rem; padding: 12px 5px; color: #333; }
#listBody td { font-size: 0.85rem; vertical-align: middle; }

/* 업체 관리 특화 스타일 */
.company-card { transition: transform 0.2s; }
.company-card:active { transform: scale(0.98); }
.status-badge { padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }
.badge-unpaid { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
.action-btns { display: flex; gap: 8px; margin-top: 10px; border-top: 1px dashed #eee; padding-top: 10px; justify-content: flex-end; }
.btn-round-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; color: #5c3c92; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

.filter-select {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background-color: #ffffff;
    color: #333;
    outline: none;
    min-width: 120px; /* 너무 좁아지지 않게 */
    flex-shrink: 0;   /* 가로 스크롤 유지를 위해 축소 방지 */
    cursor: pointer;
    -webkit-appearance: none; /* 브라우저 기본 화살표 제거 대비 (필요시) */
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* 화살표 공간 */
}

.filter-select:focus {
    border-color: #5c3c92;
    box-shadow: 0 0 0 2px rgba(92, 60, 146, 0.1);
}

/* 상품 관리 전용 스타일 */
.product-card { transition: background 0.2s; cursor: pointer; }
.product-card:active { background-color: #f0f0f5; }

.vat-badge { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; margin-right: 6px; vertical-align: middle; }
.price-label { font-size: 0.75rem; color: #888; margin-bottom: 2px; display: block; }
.price-val { font-size: 0.95rem; font-weight: 700; border: none !important; background: transparent !important; width: 100%; text-align: right; }
.price-val:not([readonly]) { border-bottom: 1px solid #5c3c92 !important; background: #fdfcff !important; }

.bulk-panel { background: #f8f6fb; border: 1px dashed #d1c4e9; border-radius: 10px; padding: 12px; margin-top: 10px; }
.stop-status { font-size: 0.75rem; color: #cf1322; background: #fff1f0; padding: 2px 8px; border-radius: 4px; margin-top: 8px; display: inline-block; }


/* 장사 이력 상품 전용 스타일 */
.history-card { border-left: 4px solid #5c3c92; }
.qty-control { display: flex; align-items: center; gap: 10px; background: #f8f6fb; padding: 8px 12px; border-radius: 12px; }
.qty-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #d1c4e9; background: #fff; color: #5c3c92; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.qty-btn:active { background: #5c3c92; color: #fff; }
.qty-input { width: 60px; text-align: center; font-weight: 700; border: none; background: transparent; font-size: 1.1rem; color: #5c3c92; }

.custom-checkbox { width: 22px; height: 22px; cursor: pointer; accent-color: #5c3c92; }
.vat-badge { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; margin-right: 6px; vertical-align: middle; }


.trade-doc { background: #fff; padding: 20px 15px; border-radius: 8px; box-shadow: var(--shadow-md); }
.trade-title { font-size: 1.8rem; font-weight: 800; color: #333; letter-spacing: 5px; text-decoration: underline; text-underline-offset: 8px; }

.table-form { width: 100%;  border-collapse: collapse; font-size: 0.85rem; }
.table-form th, .table-form td { border-bottom: 1px solid #ccc; padding: 6px 4px; vertical-align: middle; }
.table-form th { background: #f4f0fa; color: #5c3c92; font-weight: 700; text-align: center; }

.table-items { width: 100%; border: 2px solid #333; border-top: none; border-collapse: collapse; font-size: 0.85rem; }
.table-items th { background: #5c3c92; color: #fff; border: 1px solid #333; padding: 8px 4px; }
.table-items td { border: 1px solid #333; padding: 8px 4px; height: 32px; }

.sign { position: absolute; height: 40px; margin-left: 5px; margin-top: -10px; }
.memo-input { border: none; width: 100%; background: #fdfcff; padding: 5px; font-weight: 600; color: #5c3c92; }
.memo-input:focus { outline: none; background: #f0f0f5; }

.balance-card { border: 2px solid #333; border-top: none; background: #fff; }
.balance-card th { background: #f4f0fa; font-size: 0.8rem; border-right: 1px solid #333; }
.balance-card td { border-right: 1px solid #333; }

/* 공지사항 상세 전용 스타일 */
.notice-view-card { border-top: 4px solid #5c3c92; }
.notice-title { font-size: 1.25rem; font-weight: 800; color: #5c3c92; line-height: 1.4; word-break: keep-all; }
.notice-content {
    font-size: 1rem; color: #333; line-height: 1.7;
    white-space: pre-wrap; /* 줄바꿈 및 공백 보존 */
    word-break: break-all;
}
.notice-img-wrap {
    background: #f8f9fa; border-radius: 12px; padding: 10px;
    text-align: center; margin-top: 15px; border: 1px solid #eee;
}
.notice-img-view {
    max-width: 100%; height: auto; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
menu {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 미수금 현황 특화 스타일 */
.receive-card { border-left: 4px solid #cf1322; transition: transform 0.2s; }
.receive-card.zero-balance { border-left-color: #d9d9d9; opacity: 0.8; }
.receive-card:active { transform: scale(0.98); }

.summary-box { background: #fdfcff; border: 1px dashed #d1c4e9; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.detail-row { font-size: 0.85rem; color: #666; display: flex; justify-content: space-between; padding: 4px 0; }
.detail-row .val { font-weight: 600; color: #333; }

/* 푸터 합계 스타일 */
.footer-total-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #eee; }
.total-item { text-align: center; padding: 8px; border-radius: 8px; background: #f8f9fa; }
.total-item .label { font-size: 0.7rem; color: #888; display: block; }
.total-item .val { font-size: 0.95rem; font-weight: 800; }

/* 미수금 이력 특화 스타일 */
.history-card { border-left: 4px solid #e0e0e0; position: relative; }
.history-card.type-deposit { border-left-color: #5c3c92; background: #fdfcff; } /* 입금: 보라색 */
.history-card.type-receive { border-left-color: #cf1322; } /* 미수: 빨간색 */

.history-date { font-size: 0.8rem; color: #888; margin-bottom: 5px; font-weight: 600; }
.history-type-badge { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; margin-right: 6px; }

.running-total { background: #f8f9fa; padding: 4px 10px; border-radius: 8px; font-size: 0.85rem; color: #666; }
.running-total b { color: #333; }

/* 하단 요약 정보 그리드 */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid #eee; }
.summary-item { padding: 8px; border-radius: 8px; background: #f8f9fa; text-align: center; }
.summary-item .label { font-size: 0.7rem; color: #888; display: block; margin-bottom: 2px; }
.summary-item .val { font-size: 0.95rem; font-weight: 800; }


/* 입금표 전용 명조/고딕 혼합 스타일 */
.receipt-doc { background: #fff; padding: 30px 20px; border-radius: 8px; box-shadow: var(--shadow-md); font-family: 'Pretendard', sans-serif; }
.receipt-main-title { font-size: 2rem; font-weight: 900; color: #333; letter-spacing: 15px; text-decoration: underline; text-underline-offset: 10px; margin-bottom: 30px; }

.table-receipt { width: 100%; border: 2px solid #333; border-collapse: collapse; font-size: 0.85rem; }
.table-receipt th, .table-receipt td { border: 1px solid #333; padding: 8px 5px; vertical-align: middle; }
.table-receipt th { background: #f4f0fa; color: #5c3c92; font-weight: 700; text-align: center; }

/* 금액 그리드 특화 스타일 */
.amount-grid td { width: 22px; text-align: center; font-weight: 700; font-size: 0.9rem; background: #fff; }
.amount-grid .grid-label { background: #f8f9fa; font-size: 0.65rem; color: #666; font-weight: normal; height: 20px; }

.summary-row { background: #fff; }
.summary-row th { width: 100px; background: #f4f0fa; }
.summary-row td { padding-right: 15px; font-weight: 700; font-size: 1rem; }

.memo-box { border: 1px dashed #5c3c92; background: #fdfcff; padding: 15px; border-radius: 8px; margin-top: 15px; }
.receipt-memo { border: none; width: 100%; background: transparent; font-size: 0.9rem; line-height: 1.6; color: #444; resize: none; }
.receipt-memo:focus { outline: none; }

.stamp-area { position: relative; display: inline-block; width: 100%; text-align: center; padding: 20px 0; font-size: 1.1rem; font-weight: 700; color: #333; }

/* 미수금 전송문 전용 스타일 */
.notice-doc { background: #fff; padding: 25px 15px; border-radius: 8px; box-shadow: var(--shadow-md); }
.doc-header { border-bottom: 2px solid #5c3c92; padding-bottom: 15px; margin-bottom: 20px; }
.doc-title { font-size: 1.5rem; font-weight: 800; color: #5c3c92; margin-bottom: 5px; }

/* 테이블 스타일 정돈 */
.table-notice { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table-notice th { background: #f4f0fa; color: #5c3c92; padding: 10px 5px; border: 1px solid #eee; text-align: center; font-weight: 700; }
.table-notice td { padding: 10px 5px; border: 1px solid #eee; vertical-align: middle; }
.table-notice tr:last-child { background: #fdfcff; font-weight: 800; border-top: 2px solid #5c3c92; }

.memo-box-modern {
    background: #f8f6fb; border: 1px dashed #d1c4e9; border-radius: 10px; padding: 15px; margin-bottom: 20px;
}
.notice-textarea {
    border: none; width: 100%; background: transparent; font-size: 0.9rem; line-height: 1.6; color: #444; resize: none;
}
.notice-textarea:focus { outline: none; }

.meta-info { font-size: 0.85rem; color: #666; }
.meta-info b { color: #333; }

/* 세금계산서 특화 스타일 */
.tax-issued-badge { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.tax-pending-badge { background: #fff7e6; color: #d46b08; border: 1px solid #ffd591; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }

.tax-card { border-top: 3px solid #e0e0e0; }
.tax-card.issued { border-top-color: #389e0d; }
.tax-card.pending { border-top-color: #5c3c92; }

.summary-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mini-item { background: #f8f9fa; padding: 8px; border-radius: 8px; text-align: right; }
.mini-item .label { font-size: 0.7rem; color: #888; display: block; text-align: left; }
.mini-item .val { font-size: 0.9rem; font-weight: 700; }



/* 리스트 테이블의 클릭 가능한 행 강조 */
.sales-list-table tr[onclick]:hover {
    background-color: #fdfcff !important;
    color: #5c3c92;
}

/* 대시보드 카드 중 클릭 가능한 것 강조 */
.dashboard-card[onclick]:hover {
    border-color: #d1c4e9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* onclick 속성이 있는 모든 태그에 공통 적용 */
[onclick] {
    cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(92, 60, 146, 0.1); /* 모바일 터치 시 보라색 잔상 */
}

/* 호버 시 미세한 반응 (UX 개선) */
[onclick]:hover {
    opacity: 0.85;
    /* 필터링이나 카드형태의 경우 미세하게 떠오르는 효과 */
    filter: brightness(0.95);
}

/* (선택 사항) 만약 클릭 가능한 영역임을 시각적으로 더 강조하고 싶다면 */
/* 버튼이나 input이 아닌 일반 div, tr 등에 onclick이 있을 때만 적용 */
div[onclick], tr[onclick], table[onclick], span[onclick] {
    position: relative;
}

/* 버튼이 아닌 태그에 onclick이 있을 때 호버 시 보라색 그림자 효과 */
div[onclick]:hover, tr[onclick]:hover {
    box-shadow: 0 2px 8px rgba(92, 60, 146, 0.15);
}

[onclick]:not(button):not(a) {
    position: relative;
}

[onclick]:not(button):not(a)::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: 0px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #d1c4e9;
    border-bottom: 2px solid #d1c4e9;
    border-radius: 0 0 2px 0;
    pointer-events: none; /* 아이콘이 클릭을 방해하지 않도록 */
}

[onclick]:not(button):not(a):hover::after {
    border-color: #5c3c92;
}
.w-98{
    width: 98% !important;
}

/* 하단 고정 컨테이너 (하단 탭바 형태) */
.bottom-action-bar-fixed {
    width: 100%;
    max-width: 1100px;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    z-index: 1050;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}

.fab-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
}

/* 상단으로 겹쳐서 나오는 메뉴 (본문을 가리며 올라옴) */
.fab-menu-container {
    z-index: 2000;
    position: absolute;
    bottom: 60px; /* 메인 버튼 위로 띄움 */
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #d1c4e9;
    box-shadow: 0 10px 30px rgba(92, 60, 146, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fab-menu-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* 하단에 고정된 메인 트리거 버튼 */
.btn-fab-trigger {
    background: #f0f0f5;
    border: 1px solid #d1c4e9;
    border-radius: 12px;
    padding: 5px 20px;
    color: #5c3c92;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.ps-2{
    padding-left: 10px;
}
.btn-fab-trigger:active {
    background: #5c3c92;
    color: #fff;
}

.icon-arrow {
    transition: transform 0.3s;
}

.btn-fab-trigger.open .icon-arrow {
    transform: rotate(180deg); /* 화살표 반전 */
}

/* 메뉴 내부 버튼 스타일 */
.btn-fab-sub {
    width: 100%;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    text-align: left;
    white-space: nowrap;
}

.btn-outline-indigo {
    background: #fff;
    border: 1px solid #5c3c92;
    color: #5c3c92;
}/* 직원 관리 특화 스타일 */
.employee-card { border-left: 4px solid #5c3c92; transition: all 0.2s; }
.employee-card.stop-account { border-left-color: #64748b; opacity: 0.7; }
.status-active { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.status-stop { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }

/* 1. 테이블이 화면 밖으로 나가지 않도록 감싸는 컨테이너 */
.table-responsive-doc {
    width: 100%;
    overflow-x: auto; /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

/* 2. 테이블 내부 텍스트 처리 */
.table-items {
    min-width: 400px; /* 테이블이 최소한 유지해야 할 너비 (중요!) */
    table-layout: fixed; /* 컬럼 너비 고정 */
    width: 100% !important;
}

.table-items th, .table-items td {
    padding: 8px 4px !important;
    word-break: break-all; /* 영문/숫자 길어도 줄바꿈 */
    white-space: normal !important; /* 자동 줄바꿈 허용 */
    font-size: 0.75rem !important; /* 모바일 대응 폰트 축소 */
    vertical-align: middle;
}

.trade-doc { background: #fff; padding: 25px 15px; border-radius: 12px; }
.quote-header-grid { border: 1px solid #d1c4e9; border-radius: 8px; overflow: hidden; background: #fff; }
.back-indigo-light { background: #f8f7ff; color: #5c3c92; font-weight: bold; text-align: center; font-size: 0.85rem; }
.sign-stamp { width: 40px; height: 40px; position: absolute; margin-top: -10px; margin-left: 5px; opacity: 0.7; }
.table-items th { background: #5c3c92; color: #fff; font-size: 0.8rem; padding: 10px 4px; }
.btn-indigo-active { background: #5c3c92 !important; color: white !important; }
.summary-box { background: #fdfcff; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
.summary-box th { background: #f8f9fa; color: #64748b; font-size: 0.8rem; font-weight: 600; padding: 8px; border-bottom: 1px solid #eee; }
.summary-box td { padding: 8px; border-bottom: 1px solid #eee; font-size: 0.9rem; }

/* 테이블 몸통(tbody)의 짝수 번째 줄에 배경색 부여 */
.table-items tbody tr:nth-child(even) {
    background-color: #f8f7ff !important; /* 장사 연한 보라색 톤 */
}
.trade-title{
    font-size: 1.3rem;
    color: #2c2c38;
}
/* 마우스 오버 시 효과 (선택 사항: 모바일에서도 터치 시 피드백 제공) */
.table-items tbody tr:hover {
    background-color: #f2f0f7 !important;
    transition: background-color 0.2s;
}

     /* 정산 요약 대시보드 스타일 */
 .summary-dashboard {
     background: #fff;
 }

/* 상단 3단 그리드 */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #eef0f5; /* 구분선 역할 */
    border: 1px solid #eef0f5;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

.summary-item {
    background: #fff;
    padding: 10px 8px;
    text-align: center;
}

.summary-item .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.summary-item .value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

/* 하단 하이라이트 카드 */
.balance-highlight-card {
    background: #fdfcff;
    border: 1px solid #5c3c92;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(92, 60, 146, 0.05);
}

.final-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #d1c4e9;
}

.final-label {
    color: #5c3c92;
    font-weight: 800;
    font-size: 0.95rem;
}

.final-value {
    color: #5c3c92;
    font-size: 1.4rem;
    font-weight: 900;
}

.final-value small {
    font-size: 0.85rem;
    margin-left: 2px;
}

.text-highlight { color: #5c3c92 !important; }

.ledger-card { border-left: 4px solid var(--indigo-main); }
.ledger-card.status-stop { border-left-color: #cf1322; }
.memo-area { border: 1px dashed #d1c4e9; background: #fdfcff; border-radius: 12px; padding: 10px; }
#memo { border: none; width: 100%; background: transparent; font-size: 0.9rem; min-height: 40px; outline: none; }
.fw-extrabold { font-weight: 800; }

/* 추가 디자인 보완 */
.input-price-highlight { font-size: 1.3rem !important; font-weight: 800 !important; color: var(--indigo-main) !important; text-align: right; }
.carry-alert-box { background: #fff1f0; border: 1px dashed #ffa39e; border-radius: 10px; padding: 10px; margin-bottom: 15px; }


/* 발주 관리 특화 스타일 */
.order-card { border-left: 4px solid var(--indigo-main); transition: transform 0.2s; }
.order-card:active { transform: scale(0.98); }
.btn-util-icon { background: #f8f9fa; border: 1px solid #eee; width: 34px; height: 34px; border-radius: 8px; color: #5c3c92; margin-right: 4px; }

/* 가이드 전용 스타일 */
.step-num {
    background: var(--indigo-main);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}
.bg-light {
    background-color: #f8f9fc !important;
}
.list-cart-header { background: #f8f9fc; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; padding: 8px 15px; }

.product-select-card { border-left: 4px solid #eee; transition: all 0.2s; cursor: pointer; }
.product-select-card:active { background-color: #f8f7ff; transform: scale(0.98); border-left-color: var(--indigo-main); }
.product-select-card .text-highlight { color: var(--indigo-main) !important; }

.company-select-card { border-left: 4px solid #eee; cursor: pointer; transition: all 0.2s; }
.company-select-card:active { background-color: #f8f7ff; transform: scale(0.98); border-left-color: var(--indigo-main); }
.btn-util-icon-sm {
    background: #f8f9fa; border: 1px solid #eef0f5;
    width: 32px; height: 32px; border-radius: 8px;
    color: var(--indigo-main); display: flex;
    align-items: center; justify-content: center; font-size: 0.9rem;
}
.text-indigo { color: var(--indigo-main) !important; }

.order-confirm-card { border-left: 4px solid var(--indigo-main); transition: transform 0.2s; }
.order-confirm-card:active { transform: scale(0.98); }
.btn-util-icon { background: #f8f9fa; border: 1px solid #eee; width: 34px; height: 34px; border-radius: 8px; color: var(--indigo-main); margin-right: 4px; display: inline-flex; align-items: center; justify-content: center; }
.salary-doc { background: #fff; padding: 20px; border-radius: 8px; }
.salary-title { color: var(--indigo-main); font-size: 1.5rem; font-weight: 800; border-bottom: 2px solid var(--indigo-main); padding-bottom: 10px; margin-bottom: 20px; }
.salary-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.salary-table th { background: #f8f9fa; border: 1px solid #dee2e6; padding: 8px; color: #495057; text-align: center; }
.salary-table td { border: 1px solid #dee2e6; padding: 8px; vertical-align: middle; }
.bg-indigo-light-sub { background-color: #f3f0ff !important; font-weight: 600; }
.text-indigo { color: var(--indigo-main) !important; }
.sign-area { position: relative; display: inline-block; }
.sign-img { position: absolute; right: -40px; top: -25px; width: 60px; opacity: 0.8; }
.filter-sheet-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s;
}
.filter-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 24px 24px 0 0;
    z-index: 2001; transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 20px; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
}
.filter-sheet.show { transform: translateY(0); }
.filter-sheet-overlay.show { display: block; opacity: 1; }

/* 시트 상단 핸들(바) */
.sheet-handle {
    width: 40px; height: 5px; background: #e0e0e0;
    border-radius: 10px; margin: -10px auto 15px;
}

/* 전체를 감싸는 바깥 박스 */
.unified-date-range {
    display: flex;
    align-items: center;
    background-color: #f8f9fa; /* 연한 회색 배경 */
    border: 1px solid #e0e0e0;
    border-radius: 12px;       /* 둥근 모서리 */
    transition: all 0.2s ease;
}

/* 박스 내부 클릭(포커스) 시 변화 */
.unified-date-range:focus-within {
    border-color: #5c3c92;     /* 장사 메인 컬러 */
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(92, 60, 146, 0.1);
}

/* 내부 실제 입력창 스타일 초기화 */
.date-inner {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 8px 0;
    font-size: 0.9rem;
    flex: 1;                  /* 공간 공평하게 나눠갖기 */
    min-width: 0;             /* 모바일에서 찌그러짐 방지 */
    text-align: center;
    color: #333;
}

/* 중간 물결 표시(~) */
.date-separator {
    color: #adb5bd;
    font-weight: bold;
    padding: 0 8px;
    user-select: none;
}

/* 크롬/사파리에서 날짜 아이콘 크기 조절 (선택사항) */
.date-inner::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.top-menu-back {
    background: #f8f9fa !important;
}