/* ============================================================
   XELOS Template - 공통 스타일
   테마별 색상은 theme-aurora.css / theme-onyx.css 의
   CSS 변수로 주입된다.
   ============================================================ */

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

html, body {
    height: 100%;
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: 14px;
    color: var(--text-1);
    background: var(--bg-body);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* 네이티브 위젯(날짜 입력 등)을 테마에 맞춰 렌더링 */
body.theme-aurora { color-scheme: light; }
body.theme-onyx { color-scheme: dark; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------
   버튼 : 모든 기본 버튼은 아이콘 + 라벨 구조로 일관성 유지
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter .15s, transform .05s, background .15s, box-shadow .15s;
    white-space: nowrap;
    user-select: none;
}
/* 모든 button / submit / reset — 활성 시 hand */
button:not(:disabled):not([disabled]),
input[type="button"]:not(:disabled):not([disabled]),
input[type="submit"]:not(:disabled):not([disabled]),
input[type="reset"]:not(:disabled):not([disabled]),
.btn:not(:disabled):not([disabled]),
a.btn:not(.is-disabled):not([aria-disabled="true"]) {
    cursor: pointer;
}
.btn[hidden] { display: none !important; }
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"][disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a.btn.is-disabled,
a.btn[aria-disabled="true"] {
    background: var(--bg-disabled) !important;
    border-color: var(--bg-disabled) !important;
    color: var(--text-disabled) !important;
    box-shadow: none !important;
    filter: none;
    opacity: 1;
    cursor: not-allowed !important;
    pointer-events: none; /* 클릭·호버 차단 */
}
.btn:disabled:hover,
.btn[disabled]:hover { filter: none; }
.btn:disabled:active,
.btn[disabled]:active { transform: none; }
.btn i { font-size: 14px; }

.btn-primary { background: var(--accent);      color: var(--accent-text); box-shadow: 0 2px 8px var(--accent-shadow); }
.btn-success { background: var(--ok);          color: #fff; }
.btn-info    { background: var(--info);        color: #fff; }
.btn-warning { background: var(--warn);        color: #fff; }
.btn-danger  { background: var(--danger);      color: #fff; }
.btn-ghost   { background: var(--btn-ghost-bg); color: var(--text-1); border-color: var(--line-1); }
.btn-ghost:hover { background: var(--btn-ghost-hover); filter: none; }
.btn-excel   { background: #107c41; color: #fff; }   /* 엑셀 다운로드 : Excel 브랜드 그린 */
.btn-print   { background: #0d9488; color: #fff; }   /* 출력 : 틸(청록) */

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn-icon { width: 34px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 28px; }

/* ------------------------------------------------------------
   폼 요소
   ------------------------------------------------------------ */
.form-control, .form-select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-1);
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-control::placeholder { color: var(--text-3); }
textarea.form-control { height: auto; padding: 10px; resize: vertical; line-height: 1.6; }

/* 읽기전용보다 비활성 상태가 한 단계 더 진한 회색으로 보이도록 구분 */
.form-control[readonly] {
    background: var(--bg-readonly);
    color: var(--text-2);
}
.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--bg-disabled) !important;
    border-color: var(--bg-disabled) !important;
    color: var(--text-disabled) !important;
    -webkit-text-fill-color: var(--text-disabled);
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    filter: grayscale(1);
    opacity: .65;
}
label:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
.input-affix:has(.form-control:disabled) > i { color: var(--text-disabled); }
/* readonly / disabled 이면 지우기(X) 숨김. clearable-keep 은 달력·검색코드 등 예외 */
.input-affix:has(.form-control[readonly]:not(.clearable-keep)) .x-clear,
.input-affix:has(.form-control:disabled) .x-clear {
    display: none !important;
}
/* 검색피커: 라벨(앞 입력)이 잠기거나 돋보기가 비활성이면 코드란 X도 숨김 */
.search-picker:has(> :first-child.form-control[readonly]) .x-clear,
.search-picker:has(> :first-child > .form-control[readonly]) .x-clear,
.search-picker:has(> .sp-btn:disabled) .x-clear {
    display: none !important;
}

.form-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }

.checkbox-wrap { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.checkbox-wrap input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ------------------------------------------------------------
   메인 레이아웃 : 좌측 메뉴 / Top / 컨텐츠(탭) / Bottom
   ------------------------------------------------------------ */
.layout { display: flex; height: 100vh; overflow: hidden; padding-left: 64px; }

/* --- 좌측 사이드바 : 기본은 아이콘 레일(64px), 펼치면 오버레이(248px) --- */
.sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 64px;
    display: flex;
    flex-direction: column;
    background: var(--bg-side);
    border-right: 1px solid var(--line-side);
    transition: width .2s ease, transform .25s ease;
    z-index: 70;
    overflow: hidden;
}
.layout.side-open .sidebar {
    width: 248px;
    box-shadow: 0 0 48px rgba(0, 0, 0, .35);
}
/* 메뉴가 열리면 메인 화면 위에 반투명 백드롭 (클릭 시 닫힘) */
.layout.side-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 60;
}

/* --- 아이콘 레일 (접힌 상태) : 아이콘만 표시 --- */
.layout:not(.side-open) .sidebar .brand { justify-content: center; padding: 0; }
.layout:not(.side-open) .sidebar .logo-text { display: none; }
.layout:not(.side-open) .menu-scroll { padding: 10px 8px; overflow-x: hidden; }
.layout:not(.side-open) .menu-group > .menu-title { justify-content: center; padding: 13px 0; }
.layout:not(.side-open) .menu-group > .menu-title span,
.layout:not(.side-open) .menu-group > .menu-title .arrow { display: none; }
.layout:not(.side-open) .menu-group > .menu-title i.menu-ico { font-size: 19px; width: auto; }
.layout:not(.side-open) .menu-children { display: none !important; }
.layout:not(.side-open) .sidebar-foot { display: none; }

/* --- 사이드 메뉴/즐겨찾기 탭 토글 --- */
.menu-mode-tabs {
    display: flex; gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--side-hover) 70%, transparent);
}
.menu-mode-tab {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 8px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--side-text);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.menu-mode-tab i { font-size: 13px; }
.menu-mode-tab[data-menu-mode="fav"] i { color: #f5b301; }
.menu-mode-tab:hover { background: var(--side-hover); color: var(--side-text-strong); }
.menu-mode-tab.is-on {
    background: var(--side-active-bg);
    color: var(--side-active-text);
}
.menu-mode-tab.is-on[data-menu-mode="fav"] i { color: #f5b301; }
.menu-mode-panel { display: none !important; flex-direction: column; gap: 2px; min-height: 0; }
.menu-mode-panel.is-show { display: flex !important; }
.menu-fav-items { display: flex; flex-direction: column; gap: 2px; }
.menu-fav-item {
    display: flex; align-items: center; gap: 9px;
    position: relative;
    width: 100%; padding: 8px 12px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--side-text);
    font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
    transition: background .15s, color .15s;
}
.menu-fav-item i.menu-ico { font-size: 14px; width: 18px; text-align: center; color: var(--accent-side); }
.menu-fav-item:hover { background: var(--side-hover); color: var(--side-text-strong); }
.menu-fav-item.active { background: var(--side-active-bg); color: var(--side-active-text); }
.menu-fav-item.active i.menu-ico { color: var(--side-active-text); }

/* 레일(접힘) 상태: 즐겨찾기/탭 메뉴명 — native title 대신 템플릿 팁 */
.com-side-tip {
    position: fixed;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(280px, calc(100vw - 80px));
    padding: 9px 12px;
    border: 1px solid var(--line-side);
    border-radius: 10px;
    background: var(--bg-side);
    color: var(--side-text-strong);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .01em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: com-side-tip-in .14s ease-out;
}
.com-side-tip i {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--accent-side);
}
.com-side-tip.is-fav i { color: #f5b301; }
.com-side-tip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-left: 1px solid var(--line-side);
    border-bottom: 1px solid var(--line-side);
    background: var(--bg-side);
    transform: rotate(45deg);
}
.com-side-tip.is-left::before {
    left: auto;
    right: -5px;
    border-left: 0;
    border-right: 1px solid var(--line-side);
    border-bottom: 0;
    border-top: 1px solid var(--line-side);
}
@keyframes com-side-tip-in {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
.menu-fav-empty {
    display: none !important;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 28px 12px;
    color: var(--text-3); font-size: 12px; text-align: center; line-height: 1.45;
}
.menu-fav-empty.is-show { display: flex !important; }
.menu-fav-empty i { font-size: 22px; color: #f5b301; opacity: .85; }
.layout:not(.side-open) .menu-mode-tabs { flex-direction: column; padding: 2px; gap: 2px; margin-bottom: 8px; }
.layout:not(.side-open) .menu-mode-tab { min-height: 40px; padding: 0; }
.layout:not(.side-open) .menu-mode-tab span { display: none; }
.layout:not(.side-open) .menu-mode-tab i { font-size: 16px; }
.layout:not(.side-open) .menu-fav-item { justify-content: center; padding: 11px 0; }
.layout:not(.side-open) .menu-fav-item span { display: none; }
.layout:not(.side-open) .menu-fav-item i.menu-ico { font-size: 18px; width: auto; }
.layout:not(.side-open) .menu-fav-empty { padding: 16px 4px; font-size: 0; }
.layout:not(.side-open) .menu-fav-empty i { font-size: 18px; }
.layout:not(.side-open) .menu-fav-empty span { display: none; }

.menu-item-star {
    margin-left: auto;
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    opacity: .35;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .15s, color .15s, background .15s;
}
.menu-item:hover .menu-item-star,
.menu-item[data-menu-favo-yn="Y"] .menu-item-star,
.menu-flyout .menu-item-star { opacity: 1; }
.menu-item-star:hover { background: var(--side-hover); color: #f5b301; opacity: 1; }
.menu-item[data-menu-favo-yn="Y"] .menu-item-star { color: #f5b301; opacity: 1; }
.menu-item-star i { font-size: 12px !important; width: auto !important; color: inherit !important; pointer-events: none; }
.layout:not(.side-open) .menu-item-star { display: none; }
.menu-flyout .menu-item-star { opacity: .55; }
.menu-flyout .menu-item:hover .menu-item-star,
.menu-flyout .menu-item[data-menu-favo-yn="Y"] .menu-item-star { opacity: 1; }

.page-title-fav {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    pointer-events: auto;
    transition: color .15s, background .15s, transform .12s;
}
.page-title-fav:hover { background: color-mix(in srgb, #f5b301 14%, transparent); color: #f5b301; }
.page-title-fav.is-on { color: #f5b301; }
.page-title-fav:active { transform: scale(.92); }
.page-title-fav i { font-size: 17px; color: inherit; pointer-events: none; }

/* 화면 도움말 (?): page-title crumb 뒤 — 눈에 띄는 헬프 컬러 */
.page-title-help {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px;
    border: 1px solid color-mix(in srgb, #2563eb 55%, var(--line-1));
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 14%, var(--bg-panel));
    color: #2563eb;
    box-shadow: 0 0 0 2px color-mix(in srgb, #2563eb 12%, transparent);
    cursor: pointer;
    pointer-events: auto;
    transition: color .15s, background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.page-title-help:hover {
    color: #fff;
    border-color: #1d4ed8;
    background: #2563eb;
    box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 22%, transparent);
}
.page-title-help:active { transform: scale(.92); }
.page-title-help i { font-size: 15px; font-weight: 700; color: inherit; pointer-events: none; }

.page-help-body { font-size: 13px; line-height: 1.55; color: var(--text-1); }
/*
 * 도움말 모달 전용 (선택자: .modal-body.page-help-body 만 — 일반 모달 영향 없음)
 * - display:block : modal-body 기본 flex column 에서 img height:auto 가 0으로 붕괴하는 것 방지
 * - flex:1 + min-height:0 : 부모 .modal(flex column + max-height + overflow:hidden) 안에서
 *   본문이 줄어들며 overflow-y:auto 스크롤이 생기게 함 (flex:none 이면 본문이 커져 잘림)
 */
.modal-body.page-help-body {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
.page-help-body h3 {
    margin: 0 0 8px;
    font-size: 14px; font-weight: 800;
    color: var(--text-1);
}
.page-help-body h4 {
    margin: 16px 0 6px;
    font-size: 13px; font-weight: 700;
    color: var(--accent);
}
.page-help-body h4:first-of-type { margin-top: 10px; }
.page-help-body p { margin: 0 0 8px; color: var(--text-2); }
.page-help-body ul { margin: 0 0 8px; padding-left: 1.15rem; color: var(--text-2); }
.page-help-body li { margin: 3px 0; }
.page-help-body .help-tip {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
    color: var(--text-2); font-size: 12.5px;
}
.page-help-body kbd, .page-help-body .help-ui {
    display: inline-block; padding: 0 5px; border-radius: 4px;
    border: 1px solid var(--line-1); background: var(--bg-input, var(--bg-panel));
    font-size: 12px; font-weight: 600; color: var(--text-1);
}
.page-help-body .help-fig {
    margin: 10px 0 14px;
    border: 1px solid var(--line-1);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-panel);
    flex: none !important;
    min-height: 120px;
}
.page-help-body .help-fig img {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 160px;
    max-height: 420px;
    object-fit: contain;
    object-position: top center;
    background: color-mix(in srgb, var(--text-3) 6%, var(--bg-panel));
    cursor: zoom-in;
}
.page-help-body .help-fig figcaption {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--text-3) 4%, var(--bg-panel));
}
.page-help-body .help-fig.is-empty {
    min-height: 120px;
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    color: var(--text-3); font-size: 12px;
}
.page-help-body .help-fig.is-empty img { display: none !important; min-height: 0; }
.page-help-body .help-fig-miss {
    padding: 16px 14px;
    text-align: center;
    color: var(--danger, #dc2626);
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-all;
}
.modal-back.help-zoom-back .modal {
    width: min(1200px, 96vw);
    max-height: 92vh;
}
.modal-back.help-zoom-back .modal-body {
    padding: 8px;
    overflow: auto;
    text-align: center;
}
.modal-back.help-zoom-back .modal-body img {
    max-width: 100%;
    height: auto;
}

/* 전체 업무 프로세스 사용자 가이드 — 일반 메뉴처럼 가로 100% + 본문 세로 스크롤 */
body.frame-body.process-guide-page {
    padding: 0;
    gap: 0;
    height: 100%;
    max-height: 100%;
}
.process-guide {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px 20px 48px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.process-guide > .page-title { margin-bottom: 8px; }
.process-guide-lead {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    max-width: none;
}
.process-guide-section { margin-bottom: 28px; }
.process-guide-section h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
}
.process-guide-section h4 {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
.process-guide-section p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
}
.process-guide-section ul {
    margin: 0 0 12px;
    padding-left: 1.2rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}
.process-guide-section li { margin: 4px 0; }
.process-guide .help-fig {
    margin: 10px 0 16px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-panel);
}
.process-guide .help-fig img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
    background: color-mix(in srgb, var(--text-3) 5%, var(--bg-panel));
    cursor: zoom-in;
}
.process-guide .help-fig figcaption {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--line-1);
}
.process-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px 4px;
    padding: 14px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-panel);
}
.process-step {
    flex: 1 1 110px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 10px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line-1));
}
.process-step-num {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 11px; font-weight: 800;
    color: var(--accent-text, #fff);
    background: var(--accent);
}
.process-step > .bi { font-size: 20px; color: var(--accent); margin-top: 2px; }
.process-step strong { font-size: 13px; color: var(--text-1); }
.process-step span:last-child { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.process-arrow {
    display: flex; align-items: center;
    color: var(--text-3);
    font-size: 16px;
    padding: 0 2px;
}
.process-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.process-card {
    padding: 14px 16px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-panel);
}
.process-card header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.process-card-num {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 11px; font-weight: 800;
    color: var(--accent-text, #fff);
    background: var(--accent);
    flex-shrink: 0;
}
.process-card h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-1); }
.process-card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.process-card ul {
    margin: 0; padding-left: 1.1rem;
    font-size: 12.5px; color: var(--text-2);
}
.process-card li { margin: 3px 0; }
.process-guide-tip {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 8px; padding: 12px 14px; border-radius: 8px;
    border: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
    font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.process-guide-tip > .bi { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Top 사용자 가이드 버튼 — 주황 책 아이콘 (다른 Top 버튼과 구분) */
.top-guide-btn {
    width: 36px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #f97316;
    border-radius: 8px;
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .35), 0 0 0 2px rgba(249, 115, 22, .22);
    cursor: pointer;
    transition: filter .15s, transform .12s, box-shadow .15s;
}
.top-guide-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 6px rgba(234, 88, 12, .45), 0 0 0 3px rgba(249, 115, 22, .28);
}
.top-guide-btn:active { transform: scale(.94); }
.top-guide-btn i { font-size: 18px; color: #fff; pointer-events: none; }

@media (max-width: 720px) {
    .process-arrow { display: none; }
    .process-step { flex: 1 1 calc(50% - 8px); }
}

.menu-flyout {
    position: fixed;
    z-index: 80;
    min-width: 195px;
    padding: 6px;
    background: var(--bg-side);
    border: 1px solid var(--line-side);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .3);
}
.menu-flyout .fly-title {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-side);
    font-size: 12.5px; font-weight: 800;
    color: var(--accent-side);
}
.menu-flyout .menu-item { padding: 8px 10px; }
.sidebar .brand {
    display: flex; align-items: center; gap: 10px;
    height: 58px; padding: 0 18px;
    border: 0; border-bottom: 1px solid var(--line-side);
    background: transparent; width: 100%;
    cursor: pointer; text-align: left;
    transition: background .15s;
}
.sidebar .brand:hover { background: var(--side-hover); }
.sidebar .brand:focus-visible {
    outline: 2px solid var(--accent-side); outline-offset: -2px;
}
.sidebar .brand .logo-badge {
    width: 32px; height: 32px; border-radius: 9px;
    display: block; flex-shrink: 0;
    object-fit: contain;
    background: transparent;
}
.sidebar .brand .logo-text { font-size: 17px; font-weight: 800; letter-spacing: .5px; color: var(--side-text-strong); }
.sidebar .brand .logo-text em { font-style: normal; color: var(--accent-side); }

.menu-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; }

.menu-group + .menu-group { margin-top: 4px; }
.menu-group > .menu-title {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--side-text);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.menu-group > .menu-title:hover { background: var(--side-hover); color: var(--side-text-strong); }
.menu-group > .menu-title i.menu-ico { font-size: 15px; width: 18px; text-align: center; color: var(--accent-side); }
.menu-group > .menu-title .arrow { margin-left: auto; font-size: 11px; transition: transform .2s; color: var(--text-3); }
.menu-group.open > .menu-title .arrow { transform: rotate(90deg); }

.menu-children { display: none; padding: 2px 0 6px; }
.menu-group.open > .menu-children { display: block; }
.menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px 8px 24px;
    border-radius: 8px;
    color: var(--side-text);
    font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
}
.menu-item i { font-size: 13px; width: 16px; text-align: center; color: var(--text-3); }
.menu-item:hover { background: var(--side-hover); color: var(--side-text-strong); }
.menu-item.active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 700; }
.menu-item.active i { color: var(--side-active-text); }

/* --- 3Depth 중메뉴(subgroup) --- */
.menu-subgroup { margin: 2px 0; }
.menu-sub-title {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 12px 7px 22px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--side-text);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.menu-sub-title:hover { background: var(--side-hover); color: var(--side-text-strong); }
.menu-sub-title i:first-child { font-size: 12px; width: 16px; text-align: center; color: var(--text-3); }
.menu-sub-title .arrow { margin-left: auto; font-size: 10px; transition: transform .2s; color: var(--text-3); }
.menu-subgroup.open > .menu-sub-title .arrow { transform: rotate(90deg); }
.menu-sub-children { display: none; padding: 0 0 4px; }
.menu-subgroup.open > .menu-sub-children { display: block; }
.menu-sub-children .menu-item { padding-left: 36px; font-size: 12.5px; }

/* 플라이아웃 내 중메뉴 */
.menu-flyout .menu-subgroup { margin-top: 4px; }
.menu-flyout .menu-sub-title { padding-left: 10px; color: var(--accent-side); }
.menu-flyout .menu-sub-children { display: block; }
.menu-flyout .menu-subgroup .arrow { display: none; }
.menu-flyout .menu-sub-children .menu-item { padding-left: 22px; }

.sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--line-side); font-size: 11px; color: var(--text-3); }

/* --- 우측 영역 --- */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* --- Top 바 : 햄버거 / 시계 / 사용자 --- */
.topbar {
    height: 58px; min-height: 58px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: var(--bg-top);
    border-bottom: 1px solid var(--line-1);
}
.topbar .hamburger {
    width: 36px; height: 36px; border: 0; border-radius: 8px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 18px; cursor: pointer;
    transition: background .15s, color .15s;
}
.topbar .hamburger:hover { background: var(--accent); color: var(--accent-text); }

.top-clock { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.top-clock .time { font-size: 20px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.top-clock .date { font-size: 12px; color: var(--text-3); line-height: 1.3; }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-user {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px; border: 1px solid var(--line-1);
    background: var(--bg-input); cursor: pointer;
}
.top-user .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-grad); color: #fff; font-size: 14px;
}
.top-user .uname { font-size: 13px; font-weight: 700; }
.top-user .ucomp { font-size: 11px; color: var(--text-3); }

/* --- 상단 알림 티커 (AS-IS notice-roll UX 시안) --- */
.top-notice {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-input));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.top-notice.is-pulse {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line-1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    animation: top-notice-pulse 1.2s ease 1;
}
@keyframes top-notice-pulse {
    0% { transform: translateY(0); }
    30% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
.top-notice-icon {
    position: relative;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 13px;
}
.top-notice-badge {
    position: absolute;
    top: -5px; right: -6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger, #e5484d);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-top);
}
.top-notice-roll {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    overflow: hidden;
    position: relative;
}
.top-notice-track {
    will-change: transform;
}
.top-notice-item {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-1);
    cursor: pointer;
    text-align: left;
}
.top-notice-item:hover .top-notice-text { color: var(--accent); }
.top-notice-item:hover .top-notice-go { opacity: 1; transform: translateX(0); }
.top-notice-tag {
    flex: 0 0 auto;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.02em;
}
.top-notice-tag.is-order {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}
.top-notice-tag.is-mail {
    background: color-mix(in srgb, #2f9e44 16%, transparent);
    color: #2f9e44;
}
.top-notice-tag.is-notice,
.top-notice-tag.is-empty,
.top-notice-tag.is-etc {
    background: color-mix(in srgb, var(--text-3) 16%, transparent);
    color: var(--text-2);
}
.top-notice.is-empty {
    background: color-mix(in srgb, var(--bg-input) 90%, var(--accent-soft));
    opacity: 0.92;
}
.top-notice-item.is-empty-item {
    cursor: default;
}
.top-notice-item.is-empty-item:hover .top-notice-text { color: var(--text-2); }
.top-notice-item.is-empty-item .top-notice-text {
    font-weight: 600;
    color: var(--text-3);
}
.top-notice-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color .15s ease;
}
.top-notice-go {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.top-notice-ack {
    flex: 0 0 auto;
    height: 28px !important;
    min-width: 52px;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 12px;
    font-weight: 700;
}
.top-notice-ack:hover {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    border-color: transparent !important;
}

@media (max-width: 1100px) {
    .top-notice { max-width: 420px; }
}
@media (max-width: 900px) {
    .top-notice { max-width: 280px; }
    .top-notice-ack .btn-label { display: none; }
    .top-notice-ack::before {
        content: "✓";
        font-weight: 800;
    }
}
@media (max-width: 640px) {
    .top-notice { display: none !important; }
}

/* --- 탭 바 (스크롤 화살표 + 전체 닫기) --- */
.tabbar-wrap {
    display: flex; align-items: flex-end; gap: 4px;
    padding: 8px 8px 0;
    background: var(--bg-tabbar);
    border-bottom: 1px solid var(--line-1);
    min-width: 0;
}
.tabbar {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: flex-end; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; /* Firefox — 네이티브 스크롤바 숨김, 화살표로 이동 */
    -ms-overflow-style: none;
}
.tabbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tab {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    height: 36px; padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--line-1) 80%, #000 20%); border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--bg-tabbar) 88%, #000 12%); color: var(--text-2);
    font-size: 13px; cursor: pointer; white-space: nowrap;
    max-width: 220px;
}
.tab > span:not(.tab-close) {
    overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.tab i.tab-ico { font-size: 13px; flex: none; }
.tab .tab-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    font-size: 10px; color: var(--text-3);
}
.tab .tab-close:hover { background: var(--danger); color: #fff; }
.tab:hover {
    background: color-mix(in srgb, var(--bg-tabbar) 80%, var(--accent) 20%);
    border-color: color-mix(in srgb, var(--line-1) 65%, var(--accent) 35%);
    color: var(--text-1);
}
.tab.active {
    background: color-mix(in srgb, var(--bg-content) 84%, var(--accent) 16%);
    border-color: color-mix(in srgb, var(--line-1) 55%, var(--accent) 45%);
    color: var(--accent);
    font-weight: 700;
    position: relative;
}
.tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: color-mix(in srgb, var(--bg-content) 84%, var(--accent) 16%);
}

.tabbar-nav {
    flex: none; align-self: center; margin-bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--line-1); border-radius: 8px;
    background: var(--btn-ghost-bg); color: var(--text-2);
    cursor: pointer; line-height: 1;
}
.tabbar-nav:hover:not(:disabled) {
    background: var(--btn-ghost-hover); color: var(--accent); border-color: color-mix(in srgb, var(--line-1) 60%, var(--accent) 40%);
}
.tabbar-nav:disabled {
    opacity: .35; cursor: default;
}
.tabbar-nav[hidden] { display: none !important; }
.tabbar-nav i { font-size: 14px; }

.tabbar-close-all {
    flex: none; align-self: center; margin-bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--line-1); border-radius: 8px;
    background: var(--btn-ghost-bg); color: var(--text-2);
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tabbar-close-all:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--btn-ghost-bg));
    border-color: color-mix(in srgb, var(--line-1) 50%, var(--danger) 50%);
    color: var(--danger);
}
.tabbar-close-all[hidden] { display: none !important; }
.tabbar-close-all i { font-size: 12px; }
@media (max-width: 720px) {
    .tabbar-close-all-txt { display: none; }
    .tabbar-close-all { width: 28px; padding: 0; }
}

/* --- 컨텐츠(iframe 탭 패널) --- */
.content { flex: 1; position: relative; background: var(--bg-content); min-height: 0; }
.tab-panel { position: absolute; inset: 0; display: none; }
.tab-panel.active { display: block; }
.tab-panel iframe { width: 100%; height: 100%; border: 0; }

.content .welcome {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    color: var(--text-3);
}
.content .welcome i { font-size: 52px; color: var(--accent); opacity: .6; }
.content .welcome b { font-size: 18px; color: var(--text-2); }

/* --- Bottom (Copyright) --- */
.footer {
    height: 34px; min-height: 34px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
    background: var(--bg-top);
    border-top: 1px solid var(--line-1);
    font-size: 11.5px; color: var(--text-3);
}

/* ------------------------------------------------------------
   프레임(업무) 화면 공통
   - 탭 iframe 안에서는 100vh 가 브라우저 전체 기준이라 문서가 iframe 보다
     커지고, 상세 스크롤 끝에서 프레임 스크롤이 생기며 세로가 늘어날 수 있다.
   - iframe 높이에 맞춰 100% 로 채우고 외곽 스크롤은 막는다.
   ------------------------------------------------------------ */
html:has(> body.frame-body) {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
body.frame-body,
.frame-body {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    background: var(--bg-content);
    overflow: hidden;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.page-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text-1); }
.page-title > i { color: var(--accent); }
.page-title .page-title-name { color: var(--text-1); }
.page-title .crumb { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-3); }
/* 탭 iframe: 메뉴명·Navi 적용 전 i18n 텍스트 깜빡임 방지 (모든 메뉴) */
html.is-menu-title-pending .page-title > span:not(.page-title-help):not(.page-title-fav),
html.is-menu-title-pending .page-title .page-title-name,
html.is-menu-title-pending .page-title .crumb {
    visibility: hidden;
}
/* help is always the last item in .page-title (after Navi/.crumb) */

.search-panel {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
    padding: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--line-1);
    border-radius: 12px;
}
.search-field { position: relative; display: flex; flex-direction: column; }
.search-field .form-label { margin-bottom: 4px; }
.search-actions { display: flex; gap: 6px; margin-left: auto; }

/* --- 검색조건 접기/펼치기 --- */
.search-panel.collapsible { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
/* 토글 버튼 : 첫 라인 오른쪽 끝, 조건 입력과 같은 높이(34px)라 Top 이 일치한다 */
.search-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    width: 34px; height: 34px;
    border: 0; border-radius: 8px;
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 2px 8px var(--accent-shadow);
    cursor: pointer; font-size: 14px;
    transition: filter .15s, transform .05s;
}
.search-toggle:hover { filter: brightness(1.1); }
.search-toggle:active { transform: translateY(1px); }
.search-toggle i { transition: transform .2s; display: inline-block; }
.search-panel.collapsible.open .search-toggle i { transform: rotate(180deg); }
.search-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.search-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.search-line.extra { display: none; }
.search-panel.collapsible.open .search-line.extra { display: flex; }
.search-summary {
    font-size: 11.5px; color: var(--text-3);
    padding-top: 8px;
    border-top: 1px dashed var(--line-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.grid-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grid-toolbar .total-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 700;
}
.grid-toolbar .spacer { flex: 1; }

.grid-wrap { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-1); }

/* ------------------------------------------------------------
   모달 / 토스트
   ------------------------------------------------------------ */
.modal-back {
    position: fixed; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); z-index: 20000; /* Tabulator tooltip(기본 높음)보다 위 */
    backdrop-filter: blur(2px);
}
.modal-back.show { display: flex; }
.modal {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    background: var(--bg-modal);
    border: 1px solid var(--line-1);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    overflow: hidden;
}
.modal.modal-lg { width: min(880px, calc(100vw - 32px)); }
.modal.modal-xl { width: min(980px, calc(100vw - 24px)); }

/* 반품 엑셀 업로드 결과 — 모달(파일업로드) 폭 안에서 가로 스크롤 */
.retn-excl-result {
    margin-top: 12px;
    max-height: 280px;
    overflow: auto;
    width: 100%;
    border: 1px solid var(--line-2);
    border-radius: 8px;
}
.retn-excl-result table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
}
.retn-excl-result th,
.retn-excl-result td {
    font-size: 12px;
    padding: 6px 8px;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.retn-excl-result thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-modal);
    box-shadow: 0 1px 0 var(--line-2);
}
.retn-excl-result .retn-excl-fail {
    color: #ff0000;
    background-color: #ffe0d9;
    white-space: normal;
    word-break: break-word;
}
.retn-excl-result .retn-excl-err-txt {
    color: #ff0000;
    white-space: normal;
    word-break: break-word;
}
.retn-excl-result .retn-excl-ok-txt { color: #0066ff; }
.retn-excl-result .retn-excl-error-row.is-current td {
    box-shadow: inset 0 2px 0 var(--danger), inset 0 -2px 0 var(--danger);
}
.retn-excl-result .retn-excl-error-row.is-current .retn-excl-err-txt {
    font-weight: 800;
}
.retn-excl-error-btn {
    margin-right: auto;
    color: var(--danger);
}
/* 컬럼별 적정 폭 */
.retn-excl-result col.rx-c-num { width: 48px; }
.retn-excl-result col.rx-c-err { width: 160px; }
.retn-excl-result col.rx-c-id { width: 120px; }
.retn-excl-result col.rx-c-name { width: 90px; }
.retn-excl-result col.rx-c-cc { width: 64px; }
.retn-excl-result col.rx-c-zip { width: 80px; }
.retn-excl-result col.rx-c-addr { width: 140px; }
.retn-excl-result col.rx-c-tel { width: 110px; }
.retn-excl-result col.rx-c-code { width: 110px; }
.retn-excl-result col.rx-c-prd { width: 140px; }
.retn-excl-result col.rx-c-qty { width: 56px; }
.retn-excl-result col.rx-c-type { width: 72px; }
.retn-excl-result col.rx-c-reason { width: 140px; }
.retn-excl-result col.rx-c-wb { width: 130px; }
/* 오류·주소·상품명·사유는 줄바꿈 허용 */
.retn-excl-result td:nth-child(2),
.retn-excl-result td:nth-child(8),
.retn-excl-result td:nth-child(9),
.retn-excl-result td:nth-child(14),
.retn-excl-result td:nth-child(15),
.retn-excl-result td:nth-child(18),
.retn-excl-result td:nth-child(21) {
    white-space: normal;
    word-break: break-word;
}

/* 주문상세 / 신규 / 상태이력 공통 팝업 */
.od-modal .od-head {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.od-head-main { display:flex; align-items:center; gap:8px; font-weight:700; min-width:0; }
.od-ecl { margin-left:auto; margin-right:8px; font-size:12px; color:var(--text-3); font-weight:600; letter-spacing:.02em; }
.od-mode-pill {
    display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    background:color-mix(in srgb, var(--text-2) 12%, transparent); color:var(--text-2);
}
.od-mode-pill.is-new {
    background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
}
.od-body { padding-top:14px !important; max-height:calc(100vh - 160px); overflow:auto; }
.order-detail-stack { display:flex; flex-direction:column; gap:14px; max-height:none; overflow:visible; padding-right:2px; }
.od-card {
    border:1px solid var(--line-1);
    border-radius:12px;
    background:var(--bg-2, var(--panel-2, var(--bg-modal)));
    padding:0;
    overflow:hidden;
}
.od-card-head {
    display:flex; align-items:center; gap:8px;
    margin:0; padding:10px 14px;
    font-size:12.5px; font-weight:700; color:var(--text-1);
    border-bottom:1px solid var(--line-1);
    background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.od-card-head .bi { color:var(--accent); opacity:.9; }
.od-card-head .btn { margin-left:auto; }
.od-card .field-grid { padding:14px; }
.od-card .table-responsive { padding:0 10px 10px; }
.od-card .table { margin:0; font-size:12.5px; }
.form-label.is-req::after,
th.is-req::after,
.adj-eq-h .is-req::after { content:" *"; color:#e11d48; font-weight:700; }
.od-seq-row { display:flex; align-items:center; gap:6px; }
.od-seq-block {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; width: 100%;
}
.od-seq-block .od-seq-date-wrap { flex: 0 0 132px; width: 132px; }
.od-seq-block .od-seq-date-wrap .form-control { width: 100%; }
.od-seq-block .od-seq-sep { color: var(--text-3); font-weight: 700; flex: 0 0 auto; }
.od-seq-block .od-seq-no { flex: 0 0 72px; width: 72px; text-align: center; }
.od-seq-block .od-seq-title { flex: 1 1 auto; min-width: 120px; }
#orderDetailFrm .od-goods-row td { position: relative; }
#orderDetailFrm .od-seq-block > .form-control { position: relative; }
.od-goods-wrap .search-picker { width:100%; }
.od-g-opt { margin-top:4px; font-size:11px; color:var(--text-3); min-height:14px; }
.od-row-del {
    border:0; background:transparent; color:var(--text-3); cursor:pointer; padding:4px 6px; border-radius:6px;
}
.od-row-del:hover { color:#e11d48; background:color-mix(in srgb, #e11d48 10%, transparent); }
.od-empty { text-align:center; color:var(--text-3); padding:16px 8px !important; }
#orderDetailModal:not(.is-new) .od-new-only { display:none !important; }
#orderDetailModal.is-new .od-edit-only,
#orderDetailModal:not(.is-writable) .od-writable-only { display:none !important; }
#orderDetailModal:not(.is-cancel-view) .od-cancel-only { display:none !important; }
.od-cancel-label { color: var(--danger) !important; }
.od-cancel-meta { display:grid; grid-template-columns: 1.2fr 1fr; gap:8px; }
.status-badge {
    display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700;
    background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
}
.grid-cell-action {
    display:inline-flex; align-items:center; gap:6px; max-width:100%;
    cursor:pointer; vertical-align:middle;
}
.grid-cell-action__text {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:var(--accent); font-weight:700;
}
.grid-cell-action__ico {
    flex:0 0 auto; font-size:12px; opacity:.75; color:var(--accent);
    transition: transform .15s ease, opacity .15s ease;
}
.grid-cell-action:hover .grid-cell-action__ico { opacity:1; transform:translateY(-1px); }
.grid-cell-action--detail:hover .grid-cell-action__text { text-decoration:underline; }
.grid-cell-action--trace .status-badge {
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.grid-cell-action--trace:hover .status-badge {
    background:color-mix(in srgb, var(--accent) 28%, transparent);
}
.trace-meta {
    display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px;
    font-size:12.5px; color:var(--text-2);
}
.trace-meta b { color:var(--text-1); font-weight:700; }
.trace-meta em { font-style:normal; margin-right:4px; color:var(--text-3); }
.trace-id { color:var(--text-3); margin-left:4px; }
.od-badge {
    display:inline-flex; align-items:center; justify-content:center;
    padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
}
.od-badge-wms {
    background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.od-badge-wait {
    background:color-mix(in srgb, #ea580c 14%, transparent); color:#c2410c;
    border:1px solid color-mix(in srgb, #ea580c 30%, transparent);
}

/* 반품상태·반품타입 그리드 뱃지 */
.rtn-badge {
    display:inline-flex; align-items:center; justify-content:center;
    padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
    white-space:nowrap; line-height:1.4;
}
.rtn-badge--recv {
    background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.rtn-badge--courier {
    background:color-mix(in srgb, var(--info) 14%, transparent); color:var(--info);
    border:1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
.rtn-badge--recvok {
    background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok);
    border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.rtn-badge--done {
    background:color-mix(in srgb, var(--text-3) 16%, transparent); color:var(--text-2);
    border:1px solid color-mix(in srgb, var(--text-3) 35%, transparent);
}
.rtn-badge--type-a {
    background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.rtn-badge--type-b {
    background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn);
    border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.rtn-badge--type-c {
    background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger);
    border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
.rtn-badge--type-d {
    background:color-mix(in srgb, var(--info) 12%, transparent); color:var(--info);
    border:1px solid color-mix(in srgb, var(--info) 28%, transparent);
}

/* 공지사항 Div 상세 */
.noti-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-1);
}
.noti-detail-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-1);
    word-break: break-word;
}
.noti-detail-title p { margin: 0; }
.noti-detail-attrs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 2px;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
}
.noti-detail-attrs em {
    font-style: normal;
    margin-right: 4px;
    color: var(--text-3);
}
.noti-detail-attrs b {
    font-weight: 600;
    color: var(--text-2);
}
.noti-detail-sep {
    margin: 0 6px;
    color: var(--text-3);
    opacity: .7;
}
.noti-detail-contents {
    margin-top: 4px;
    min-height: 180px;
    max-height: 42vh;
    overflow: auto;
    padding: 14px 2px;
    color: var(--text-1);
    line-height: 1.6;
    font-size: 13px;
}
.noti-detail-contents img { max-width: 100%; height: auto; }
.noti-list-title {
    display: inline;
    line-height: 1.35;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.noti-list-title:hover { text-decoration: underline; }
.noti-list-title p { display: inline; margin: 0; }
.noti-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.noti-file-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--line-1); border-radius: 8px; background: var(--bg-panel);
}
.noti-file-item > i { color: var(--accent); }
.noti-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-file-empty { color: var(--text-3); font-size: 12px; }
.noti-new-badge {
    display: inline-block; margin-left: 4px; padding: 1px 5px;
    border-radius: 999px; font-size: 10px; font-weight: 800;
    color: #fff; background: var(--danger);
}
.qna-file-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qna-form { display: flex; flex-direction: column; gap: 14px; }
.qna-form .form-control,
.qna-form .form-select { width: 100%; }
.qna-form-row {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.qna-field-writer { width: min(280px, 100%); flex: 0 0 auto; }
.qna-field-title,
.qna-field-cont { width: 100%; }
.qna-meta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px;
    padding-bottom: 8px; font-size: 12px; color: var(--text-3); line-height: 1.5;
}
.qna-meta-row[hidden] { display: none !important; }
.qna-meta-row em { font-style: normal; margin-right: 4px; color: var(--text-3); }
.qna-meta-row b { font-weight: 600; color: var(--text-2); }

/* 답변완료 상세 : 질문/답변 2열 — 세로 스크롤 최소화 */
.qna-modal.is-detail { width: min(980px, calc(100vw - 24px)); }
.qna-modal.is-detail .modal-body { max-height: min(78vh, 720px); }
.qna-detail-view[hidden],
.qna-form[hidden] { display: none !important; }
.qna-detail-view { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.qna-detail-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-1);
}
.qna-detail-title {
    font-size: 17px; font-weight: 700; line-height: 1.4;
    color: var(--text-1); word-break: break-word;
}
.qna-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 2px; margin-top: 8px;
    font-size: 12px; color: var(--text-3); line-height: 1.5;
}
.qna-detail-meta em { font-style: normal; margin-right: 4px; }
.qna-detail-meta b { font-weight: 600; color: var(--text-2); }
.qna-ans-badge {
    display: inline-flex; align-items: center;
    margin-left: 4px; padding: 2px 8px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.qna-detail-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 0;
    flex: 1;
}
.qna-detail-pane {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0;
    padding: 12px;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--bg-panel);
}
.qna-pane-ans {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line-1));
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
}
.qna-pane-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: 13px; font-weight: 700; color: var(--text-1);
}
.qna-pane-head > i { color: var(--accent); }
.qna-pane-ans .qna-pane-head > i { color: var(--ok); }
.qna-pane-sub {
    margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-3);
}
.qna-pane-sub em { font-style: normal; margin-right: 3px; }
.qna-pane-sub b { font-weight: 600; color: var(--text-2); }
.qna-pane-title {
    font-size: 13px; font-weight: 700; color: var(--text-1);
    padding-bottom: 4px; border-bottom: 1px dashed var(--line-1);
}
.qna-pane-title[hidden] { display: none !important; }
.qna-pane-body {
    flex: 1; min-height: 120px; max-height: 34vh;
    overflow: auto; padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-modal);
    border: 1px solid var(--line-1);
    white-space: pre-wrap; word-break: break-word;
    font-size: 13px; line-height: 1.55; color: var(--text-1);
}
.qna-pane-files .form-label { margin-bottom: 4px; }
.qna-pane-files .noti-file-list { max-height: 88px; overflow: auto; }

@media (max-width: 820px) {
    .qna-detail-split { grid-template-columns: 1fr; }
    .qna-pane-ans { order: -1; }
    .qna-pane-body { max-height: 28vh; }
}

/* 공통 파일 첨부 (드롭존 + 목록) */
.file-drop {
    position: relative;
    display: block;
    border: 1.5px dashed var(--line-1);
    border-radius: 12px;
    background: var(--bg-panel);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.file-drop:hover,
.file-drop.is-dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.file-drop-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 1;
}
.file-drop-inner {
    pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 22px 16px; text-align: center;
}
.file-drop-inner > i {
    font-size: 28px; color: var(--accent); line-height: 1;
}
.file-drop-title {
    font-size: 13px; font-weight: 700; color: var(--text-1);
}
.file-drop-hint {
    font-size: 12px; color: var(--text-3);
    line-height: 1.45; max-width: 420px;
}
.file-drop-list {
    display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
}
.file-drop-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-panel);
}
.file-drop-item > i { color: var(--accent); font-size: 16px; flex: 0 0 auto; }
.file-drop-item .file-drop-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.file-drop-item .file-drop-name {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--text-1); font-weight: 600;
}
.file-drop-item .file-drop-size {
    font-size: 11px; color: var(--text-3); white-space: nowrap;
}
.file-drop-item .file-drop-warn {
    font-size: 11.5px; font-weight: 700; color: var(--danger); white-space: nowrap;
}
.file-drop-item.is-oversize {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line-1));
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-panel));
}
.file-drop-item.is-oversize > i { color: var(--danger); }
.file-drop-item .file-drop-actions {
    display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
}
.file-drop-item.is-existing > i { color: var(--ok, #16a34a); }
.file-drop[hidden],
.file-drop.is-disabled {
    opacity: .55; pointer-events: none; cursor: default;
}
.modal-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-1);
    font-size: 15px; font-weight: 800;
}
.modal-head i { color: var(--accent); }
.modal-head .modal-x {
    margin-left: auto; width: 28px; height: 28px;
    border: 0; border-radius: 7px; background: transparent;
    color: var(--text-3); font-size: 15px; cursor: pointer;
}
.modal-head .modal-x:hover { background: var(--btn-ghost-hover); color: var(--text-1); }
.modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--line-1);
    background: var(--bg-panel);
}

/* 브라우저 alert/confirm 대체 공통 대화상자 */
.com-dialog-back {
    position: fixed; inset: 0; z-index: 25000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(5, 10, 24, .52);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .16s ease;
}
.com-dialog-back.ready { opacity: 1; }
.com-dialog {
    width: min(410px, calc(100vw - 32px));
    display: grid; grid-template-columns: 48px 1fr; gap: 14px;
    padding: 22px; border: 1px solid var(--line-1); border-radius: 16px;
    background: var(--bg-modal); color: var(--text-1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
}
.com-dialog-back.ready .com-dialog { transform: none; }
.com-dialog-icon {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 13px; font-size: 21px;
    color: var(--info); background: color-mix(in srgb, var(--info) 13%, transparent);
}
.com-dialog-icon.question {
    color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.com-dialog-icon.warning {
    color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent);
}
.com-dialog-icon.danger {
    color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent);
}
.com-dialog-content { min-width: 0; padding-top: 1px; }
.com-dialog-content h2 { margin: 0 0 7px; font-size: 16px; line-height: 1.35; }
.com-dialog-content p {
    margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.65;
    white-space: pre-line; overflow-wrap: anywhere;
}
.com-dialog-actions {
    grid-column: 1 / -1; display: flex; justify-content: flex-end;
    gap: 7px; margin-top: 7px;
}
.com-dialog-actions .btn { min-width: 76px; justify-content: center; }
.com-dialog.has-input { width: min(460px, calc(100vw - 32px)); }
.com-dialog-input { margin-top: 12px; display: grid; gap: 6px; }
.com-dialog-input-label {
    font-size: 12.5px; font-weight: 700; color: var(--text-1);
}
.com-dialog-input-label.is-req::after { content: " *"; color: var(--danger); font-weight: 800; }
.com-dialog-prompt { resize: vertical; min-height: 72px; }
.com-dialog-prompt.err {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.com-dialog-input-error { min-height: 16px; color: var(--danger); font-size: 11.5px; }

/* 개인정보 엑셀 다운로드 입력 레이어 */
.excel-dialog-back,
.excel-progress-back {
    position: fixed; inset: 0; z-index: 1250;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(5, 10, 24, .58);
    backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease;
}
.excel-dialog-back.show,
.excel-progress-back.show { opacity: 1; }
.excel-dialog {
    position: relative; width: min(460px, calc(100vw - 32px));
    padding: 22px; border: 1px solid var(--line-1); border-radius: 16px;
    background: var(--bg-modal); color: var(--text-1);
    box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.excel-dialog-x {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-3); cursor: pointer;
}
.excel-dialog-x:hover { background: var(--bg-hover); color: var(--danger); }
.excel-dialog-head { display: flex; gap: 12px; padding-right: 28px; margin-bottom: 17px; }
.excel-dialog-head > i {
    flex: 0 0 44px; height: 44px; display: grid; place-items: center;
    border-radius: 13px; color: #16a34a; background: color-mix(in srgb, #16a34a 13%, transparent);
    font-size: 21px;
}
.excel-dialog-head h2 { margin: 1px 0 4px; font-size: 16px; }
.excel-dialog-head p { margin: 0; color: var(--text-2); font-size: 12.5px; }
.excel-dialog-fields { display: grid; gap: 11px; }
.excel-dialog-fields label {
    display: flex; flex-direction: column; gap: 5px;
    color: var(--text-2); font-size: 12.5px; font-weight: 700;
}
.excel-dialog-fields .excel-field-label { display: inline; line-height: 1.3; }
.excel-dialog-fields .required { color: var(--danger); }
.excel-dialog-fields textarea { resize: vertical; min-height: 72px; }
.excel-dialog-fields .is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}
.excel-dialog-error { min-height: 17px; color: var(--danger); font-size: 11.5px; }
.excel-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 5px; }

/* 비동기 생성 진행률 */
.excel-progress {
    width: min(420px, calc(100vw - 32px)); text-align: center;
    padding: 26px; border: 1px solid var(--line-1); border-radius: 16px;
    background: var(--bg-modal); color: var(--text-1);
    box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.excel-progress-icon {
    width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px;
    border-radius: 15px; background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #16a34a; font-size: 25px;
}
.excel-progress h2 { margin: 0 0 5px; font-size: 17px; }
.excel-progress-message { min-height: 20px; margin: 0 0 15px; color: var(--text-2); font-size: 12.5px; }
.excel-progress-track {
    height: 10px; overflow: hidden; border-radius: 999px;
    background: var(--bg-disabled);
}
.excel-progress-track span {
    display: block; width: 0; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    transition: width .25s ease;
}
.excel-progress-percent { display: block; margin: 8px 0 4px; color: #16a34a; font-size: 16px; }
.excel-progress small { color: var(--text-3); font-size: 11px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .full { grid-column: 1 / -1; }

#toast-area { position: fixed; top: 16px; right: 16px; z-index: 30000; display: flex; flex-direction: column; gap: 8px; }

/* 서버 통신 공통 로딩 (모달·confirm 위, toast 아래) */
html.com-busy,
html.com-busy body { cursor: wait; }
.com-loading-back {
    position: fixed; inset: 0; z-index: 28000;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(5, 10, 24, .38);
    backdrop-filter: blur(2px);
    cursor: wait;
}
.com-loading-back.show { display: flex; }
.com-loading-box {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    min-width: 160px; padding: 22px 28px;
    border: 1px solid var(--line-1); border-radius: 16px;
    background: var(--bg-modal); color: var(--text-1);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}
.com-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: com-spin .7s linear infinite;
}
.com-loading-msg {
    margin: 0; font-size: 13px; font-weight: 700; color: var(--text-2);
    text-align: center; white-space: nowrap;
}
@keyframes com-spin { to { transform: rotate(360deg); } }

.toast {
    display: flex; align-items: center; gap: 10px;
    min-width: 240px; max-width: 360px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bg-toast);
    color: var(--text-1);
    border: 1px solid var(--line-1);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    font-size: 13px; font-weight: 600;
    animation: toast-in .25s ease;
}
.toast.ok i { color: var(--ok); }
.toast.err i { color: var(--danger); }
.toast.info i { color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   Tabulator 그리드 테마 오버라이드
   ------------------------------------------------------------ */
.tabulator { border: 0; background: var(--bg-panel); font-size: 12.5px; }
.tabulator .tabulator-header {
    background: var(--grid-head-bg); border-bottom: 2px solid var(--accent);
    color: var(--text-1);
}
.tabulator .tabulator-header .tabulator-col { background: var(--grid-head-bg); border-right: 1px solid var(--line-1); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-weight: 700; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--grid-head-hover); }
.tabulator .tabulator-header input, .tabulator .tabulator-header select {
    border: 1px solid var(--line-1) !important; border-radius: 6px;
    background: var(--bg-input) !important; color: var(--text-1) !important;
    padding: 3px 6px !important; font-size: 12px;
}
/* 출고 그리드 공통 헤더필터 (WAVE / Picking) */
.outgo-hdr-list { position: relative; width: 100%; }
.outgo-hdr-list-input {
    width: 100%; height: 28px; box-sizing: border-box;
    border: 1px solid var(--line-1); border-radius: 6px;
    padding: 0 8px; font-size: 12px; background: var(--bg-input); color: var(--text-1);
    cursor: pointer;
}
.outgo-hdr-range {
    display: flex; align-items: center; gap: 3px; width: 100%; min-width: 0;
}
.outgo-hdr-range-input {
    flex: 1 1 0; min-width: 0; width: 0; height: 28px; box-sizing: border-box;
    border: 1px solid var(--line-1); border-radius: 6px;
    padding: 0 4px; font-size: 11px; text-align: center;
    background: var(--bg-input); color: var(--text-1);
}
.outgo-hdr-range-sep {
    flex: none; font-size: 11px; font-weight: 700; color: var(--text-3);
}
.outgo-hdr-list-panel {
    position: fixed; z-index: 30050; max-height: 240px; overflow: auto;
    background: var(--bg-modal, #fff); color: var(--text-1);
    border: 1px solid var(--line-1); border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    padding: 6px; box-sizing: border-box;
}
.outgo-hdr-list-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; border-radius: 6px;
    font-size: 12px; cursor: pointer; user-select: none;
}
.outgo-hdr-list-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.outgo-hdr-list-clear {
    display: block; width: 100%; margin-top: 4px;
    border: 0; background: transparent;
    color: var(--text-3); font-size: 11px; font-weight: 700;
    cursor: pointer; padding: 4px;
}
.outgo-hdr-list-empty {
    padding: 8px; color: var(--text-3); font-size: 12px; text-align: center;
}
.tabulator .tabulator-tableholder { background: var(--bg-panel); }
.tabulator .tabulator-tableholder .tabulator-table { background: transparent; color: var(--text-1); }
.tabulator .tabulator-placeholder { background: var(--bg-panel) !important; color: var(--text-3) !important; }
.tabulator .tabulator-placeholder span { color: var(--text-3) !important; }
/* 정렬 화살표 : Tabulator 기본(.tabulator-arrow) — aria-sort 에 따라 세모/역세모 */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter .tabulator-arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 5px solid var(--text-3);
    border-top: none;
    opacity: .55;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 5px solid var(--accent);
    border-top: none;
    opacity: 1;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-sorter .tabulator-arrow {
    border-bottom: none;
    border-top: 5px solid var(--accent);
    opacity: 1;
}
/* 리사이즈 핸들 : Tabulator 기본 폭/마진 유지(헤더·바디 동일). hover 만 강조 */
.tabulator .tabulator-col-resize-handle:hover {
    cursor: col-resize;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* 컬럼 표시 드롭다운 (게시판형 공통) */
.xgrid-col-drop {
    position: fixed;
    z-index: 12000;
    width: 168px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    background: var(--bg-modal);
    border: 1px solid var(--line-1);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    overflow: hidden;
    font-size: 12.5px;
}
.xgrid-col-drop .xgrid-col-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-1);
    font-weight: 700;
    color: var(--text-1);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.xgrid-col-drop .xgrid-col-list {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    max-height: 210px;
}
.xgrid-col-drop .xgrid-col-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: var(--text-1);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xgrid-col-drop .xgrid-col-item:hover,
.xgrid-col-drop .xgrid-col-all:hover { background: var(--accent-soft); }
.xgrid-col-drop input[type=checkbox] {
    width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0;
}
/* 숨긴 열이 있을 때 컬럼 버튼 강조 (경고톤으로 눈에 띄게) */
.btn.is-col-hidden,
.btn.is-col-hidden:hover {
    color: #fff !important;
    border-color: var(--warn) !important;
    background: var(--warn) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent);
}
.btn.is-col-hidden > i,
.btn.is-col-hidden .btn-label {
    color: #fff !important;
}
.tabulator-row { background: var(--grid-row); border-bottom: 1px solid var(--grid-row-line); min-height: 30px; }
.tabulator-row.tabulator-row-even { background: var(--grid-row-even); }
.tabulator-row:hover { background: var(--grid-row-hover) !important; }
.tabulator-row.tabulator-selected { background: var(--grid-row-selected) !important; }
/* 셀 : 정의 width 안에서만 표시, 초과 분은 … (복사는 Tabulator 원본값)
   ※ width 미지정 inline-block 은 글자만큼 늘어남 → JS 가 width/maxWidth 인라인 강제 */
.tabulator-row .tabulator-cell {
    border-right: 1px solid var(--grid-row-line);
    padding: 6px 8px;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle;
}
/* 데이터 말줄임 래퍼 : 열 width 를 밀어내지 못하도록 내부에서 절단 */
.tabulator-row .tabulator-cell .xgrid-clip {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
/* 멀티라인·운송장 뱃지 등: 줄바꿈 허용 (컬럼 variableHeight / xgridWrap) */
.tabulator-row .tabulator-cell.xgrid-cell-wrap {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    height: auto !important;
    vertical-align: top;
}
.tabulator-row .tabulator-cell.xgrid-cell-wrap .xgrid-clip,
.tabulator-row .tabulator-cell .xgrid-clip.xgrid-clip-wrap {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
.xgrid-multiline {
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}
.od-badge-wb {
    background: color-mix(in srgb, var(--text-2) 10%, transparent);
    color: var(--text-1);
    border: 1px solid var(--line-1);
    margin: 1px 2px 1px 0;
}
.tabulator .tabulator-header .tabulator-col {
    box-sizing: border-box !important;
    overflow: hidden;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 열 리사이즈 핸들 클릭 보장 */
.tabulator .tabulator-col-resize-handle {
    z-index: 50 !important;
    pointer-events: auto !important;
}
.tabulator .tabulator-col-resize-handle:hover {
    cursor: col-resize;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.tabulator-row.tabulator-frozen {
    background: var(--grid-row-frozen) !important;
    border-bottom: 2px solid var(--warn);
}
.tabulator-row.tabulator-frozen .tabulator-cell:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tabulator .tabulator-footer {
    background: var(--grid-head-bg); border-top: 1px solid var(--line-1); color: var(--text-2);
    padding: 5px 8px;
}
.tabulator .tabulator-footer .tabulator-page, .tabulator .tabulator-footer .tabulator-page-size {
    border: 1px solid var(--line-1); border-radius: 6px;
    background: var(--bg-input); color: var(--text-1);
}
.tabulator .tabulator-footer .tabulator-page.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tabulator-menu { background: var(--bg-modal) !important; border: 1px solid var(--line-1) !important; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.tabulator-menu .tabulator-menu-item { color: var(--text-1) !important; padding: 8px 14px; font-size: 13px; }
.tabulator-menu .tabulator-menu-item:hover { background: var(--accent-soft) !important; }
/* --- 셀 범위 선택 : 엑셀 스타일 --- */
/* 클릭=단일 셀 선택, 드래그=범위 선택, 화살표 키=셀 이동, Shift+화살표=범위 확장 */
.tabulator-range {
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}
.tabulator-range-overlay .tabulator-range { background: var(--accent-ring); }
/* 활성 셀(화살표 이동 기준 셀) : 엑셀처럼 진한 테두리만 표시 */
.tabulator .tabulator-range-overlay .tabulator-range-cell-active {
    border: 2px solid var(--accent);
    background: transparent;
}
/* 선택 범위에 걸린 헤더 강조 색상을 테마 톤으로 통일 */
.tabulator .tabulator-header .tabulator-col.tabulator-range-selected {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
}
.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,
.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
}
/* 엑셀의 채우기 핸들(우하단 사각형) */
.tabulator-range-overlay .tabulator-range::after {
    content: ""; position: absolute; right: -4px; bottom: -4px;
    width: 8px; height: 8px;
    background: var(--accent);
    border: 1.5px solid var(--bg-panel);
    border-radius: 1px;
}
.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background: var(--accent-soft); }
/* 선택 범위에 걸린 헤더/행번호 강조 (엑셀의 행·열 머리글 하이라이트) */
.tabulator .tabulator-col.tabulator-range-highlight,
.tabulator .tabulator-cell.tabulator-range-row-header.tabulator-range-highlight {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* --- 체크박스 선택 --- */
.xgrid-selall { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.xgrid-rowcheck { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.xgrid-rowcheck-na { color: var(--text-3); font-size: 12px; }
.tabulator .tabulator-cell.xgrid-cb-cell.is-disabled { opacity: .45; cursor: default; }
.total-badge .sel-cnt { color: var(--danger); margin-left: 2px; }
/* 키보드 포커스 중인 체크박스 셀 : 엑셀 활성 셀처럼 테두리 표시 */
.tabulator .tabulator-cell.xgrid-cb-cell.xgrid-cb-focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
}

/* --- 선택 건수 입력 레이어 (헤더 체크박스 위 팝오버) --- */
.xgrid-selpop {
    position: fixed;
    z-index: 3000;
    padding: 12px 14px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line-1);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}
.xgrid-selpop .selpop-close {
    position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px;
    border: 0; border-radius: 5px;
    background: transparent; color: var(--text-3);
    font-size: 11px; cursor: pointer; line-height: 1;
}
.xgrid-selpop .selpop-close:hover { background: var(--btn-ghost-hover); color: var(--text-1); }
.xgrid-selpop .selpop-label { font-size: 12px; font-weight: 700; color: var(--text-1); margin: 0 18px 8px 0; white-space: nowrap; }
.xgrid-selpop .selpop-max { color: var(--text-3); font-weight: 600; }
.xgrid-selpop .selpop-row { display: flex; align-items: center; gap: 6px; }
.xgrid-selpop .selpop-input {
    width: 90px; height: 26px;
    padding: 0 8px;
    border: 1px solid var(--line-1); border-radius: 6px;
    background: var(--bg-input); color: var(--text-1);
    font-size: 12.5px;
}
.xgrid-selpop .selpop-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.xgrid-selpop .selpop-btn {
    display: inline-flex; align-items: center; gap: 3px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--line-1); border-radius: 6px;
    background: var(--bg-input); color: var(--text-2);
    font-size: 12px; cursor: pointer; white-space: nowrap;
}
.xgrid-selpop .selpop-btn:hover { background: var(--btn-ghost-hover); }
.xgrid-selpop .selpop-btn.ok { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.xgrid-selpop .selpop-btn.ok:hover { filter: brightness(1.1); }
/* 체크박스를 가리키는 꼬리 화살표 */
.xgrid-selpop .selpop-arrow {
    position: absolute; bottom: -6px;
    width: 10px; height: 10px;
    margin-left: -5px;
    background: var(--bg-panel);
    border-right: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    transform: rotate(45deg);
}
.xgrid-selpop.xgrid-selpop-below .selpop-arrow {
    bottom: auto; top: -6px;
    border-right: none; border-bottom: none;
    border-left: 1px solid var(--line-1);
    border-top: 1px solid var(--line-1);
}

/* --- 열 고정 : 고정 구간 오른쪽 경계 강조 --- */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen.tabulator-frozen-left,
.tabulator .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    border-right: 2px solid var(--accent);
}
/*
 * sticky 고정열은 Tabulator 기본이 background-color:inherit.
 * 행에 rgba 반투명 배경을 주면 가로스크롤 시 뒤 셀 글자가 비친다.
 * → 고정열·헤더는 항상 불투명 배경으로 덮는다.
 */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen {
    background-color: var(--grid-head-bg);
}
.tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: var(--grid-row);
}
.tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
    background-color: var(--grid-row-even);
}
.tabulator-row:hover .tabulator-cell.tabulator-frozen {
    background-color: var(--grid-row-hover);
}
.tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen {
    background-color: var(--grid-row-selected);
}
/* 경고 행(재고부족·출고예정 등) — color-mix 로 불투명 유지 */
.tabulator-row.xgrid-row-warn {
    background: color-mix(in srgb, var(--danger) 10%, var(--grid-row)) !important;
}
.tabulator-row.tabulator-row-even.xgrid-row-warn {
    background: color-mix(in srgb, var(--danger) 10%, var(--grid-row-even)) !important;
}
.tabulator-row.xgrid-row-warn:hover {
    background: color-mix(in srgb, var(--danger) 14%, var(--grid-row-hover)) !important;
}
.tabulator-row.xgrid-row-warn .tabulator-cell.tabulator-frozen {
    background-color: color-mix(in srgb, var(--danger) 10%, var(--grid-row));
}
.tabulator-row.tabulator-row-even.xgrid-row-warn .tabulator-cell.tabulator-frozen {
    background-color: color-mix(in srgb, var(--danger) 10%, var(--grid-row-even));
}
.tabulator-row.xgrid-row-warn:hover .tabulator-cell.tabulator-frozen {
    background-color: color-mix(in srgb, var(--danger) 14%, var(--grid-row-hover));
}
.tabulator-row.tabulator-selected.xgrid-row-warn .tabulator-cell.tabulator-frozen {
    background-color: var(--grid-row-selected);
}

/* --- 필터 토글 (가장 왼쪽 깔때기 아이콘) --- */
.tabulator.xgrid-filters-hidden .tabulator-header-filter { display: none; }
.xgrid-funnel { cursor: pointer; font-size: 15px; color: var(--text-3); transition: color .15s; }
.xgrid-funnel:hover { color: var(--accent); }
.xgrid-funnel.on { color: var(--accent); }
.xgrid-rownum { color: var(--text-3); font-size: 11.5px; }

/* ------------------------------------------------------------
   상세 화면 (입력폼) 공통
   ------------------------------------------------------------ */
.detail-card {
    background: var(--bg-panel);
    border: 1px solid var(--line-1);
    border-radius: 12px;
    padding: 18px;
}
.detail-card + .detail-card { margin-top: 12px; }
.detail-card .card-title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line-1);
    font-size: 14px; font-weight: 800;
}
.detail-card .card-title i { color: var(--accent); }

.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.field-grid .span-2 { grid-column: span 2; }
.field-grid .span-3 { grid-column: 1 / -1; }
.field-grid .form-control, .field-grid .form-select { width: 100%; }

.field-item.field-top { display: flex; flex-direction: column; }
.field-item[hidden] { display: none !important; }
.field-item.field-side {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    align-items: center;
    column-gap: 10px;
}
.field-item.field-side .form-label { margin: 0; text-align: right; }

.field-help { margin-top: 4px; font-size: 11.5px; color: var(--text-3); }

/* 라디오 / 체크박스 그룹 : 칩 스타일 */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line-1); border-radius: 999px;
    background: var(--bg-input);
    font-size: 13px; cursor: pointer; user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.chip input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}
.chip:has(input:disabled) {
    border-color: var(--bg-disabled);
    background: var(--bg-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}
.chip:has(input:disabled):hover { border-color: var(--bg-disabled); }

/* 검색형 셀렉트 / 멀티 셀렉트 (Tom Select) */
.ts-wrapper { width: 100%; }
/* Tom Select 가 원본 select 의 form-control/form-select 클래스를 래퍼 div 에 복사하므로
   래퍼 자체의 테두리·높이·패딩을 무효화 (실제 외곽선은 내부 .ts-control 이 담당) */
.ts-wrapper.form-control, .ts-wrapper.form-select {
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    min-height: 34px;
    padding: 6px 34px 6px 10px;
    border: 1px solid var(--line-1);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-1);
    box-shadow: none;
    cursor: pointer;
}
/* vendor tom-select.css 가 .input-active/.full 시 background:#fff 로 덮음 → 다크테마에서 선택값 소실
   동일·상위 특이도로 테마 토큰을 유지한다 */
.ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.full .ts-control,
.full .ts-control {
    background: var(--bg-input) !important;
    color: var(--text-1);
}
.ts-wrapper.single .ts-control .item,
.ts-wrapper.multi .ts-control .item {
    color: var(--text-1);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.ts-wrapper.disabled .ts-control {
    background: var(--bg-disabled) !important;
    border-color: var(--bg-disabled) !important;
    color: var(--text-disabled) !important;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}
.ts-wrapper.disabled .clear-button { display: none !important; }
.ts-wrapper.single .ts-control::after {
    border-color: var(--text-3) transparent transparent;
}

/* 값 지우기(X) 버튼 : 일반 input 의 X 버튼(.x-clear)과 동일한 모양/위치
   (CDN 기본 스타일의 opacity/transform/right 를 모두 무효화) */
.ts-wrapper.plugin-clear_button .clear-button {
    display: none;
    position: absolute; top: 50%; right: 9px !important;
    transform: translateY(-50%);
    margin: 0 !important; padding: 2px;
    color: var(--text-3); font-size: 14px; line-height: 1;
    background: transparent !important;
    cursor: pointer; z-index: 2;
    opacity: 1 !important; transition: none;
}
.ts-wrapper.plugin-clear_button.x-on .clear-button { display: block; }
.ts-wrapper.plugin-clear_button .clear-button:hover { color: var(--danger); }
/* X 버튼이 표시되는 동안에는 같은 자리의 드롭다운 화살표를 숨긴다 */
.ts-wrapper.single.x-on .ts-control::after { display: none; }
.ts-control > input {
    min-width: 24px;
    color: var(--text-1);
}
.ts-control > input::placeholder { color: var(--text-3); }
.ts-dropdown {
    z-index: 22000;
    margin-top: 5px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-modal);
    color: var(--text-1);
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
    overflow: hidden;
}
.ts-dropdown.ts-dropdown-up {
    margin-top: 0 !important;
    margin-bottom: 5px;
}
.ts-dropdown .dropdown-input-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--line-1);
}
.ts-dropdown .dropdown-input {
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line-1);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-1);
    font-size: 12.5px;
    outline: none;
}
.ts-dropdown .dropdown-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ts-dropdown .option { padding: 8px 10px; }
.ts-dropdown .active { background: var(--accent-soft); color: var(--accent); }
.ts-dropdown .selected { color: var(--accent); font-weight: 700; background: transparent; }
.ts-dropdown .no-results { padding: 12px; color: var(--text-3); text-align: center; }
.ts-wrapper.plugin-checkbox_options .option input { accent-color: var(--accent); }

/* 멀티 선택값은 첫 항목을 말줄임하고 나머지 개수를 표시 */
.ts-wrapper.multi .ts-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}
/* X 버튼은 컨트롤 오른쪽 패딩 영역에 absolute 로 배치되므로
   요약 문구는 콘텐츠 영역(패딩 안쪽) 전체를 사용해도 겹치지 않음 */
.multi-summary {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 5px;
    pointer-events: none;
}
.multi-summary .multi-first {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.multi-summary .multi-count {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

/* 입력 아이콘 (달력 등) */
.input-affix { position: relative; }
.input-affix > i {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: 14px; pointer-events: none;
}
.input-affix .form-control { padding-right: 32px; }
/* 테이블/인라인용 기본 날짜 입력 폭 (Y-m-d, 아이콘은 박스 안) */
.date-input-sm {
    display: inline-block;
    width: 132px;
    max-width: 100%;
    vertical-align: middle;
}
.date-input-sm > .form-control { width: 100%; box-sizing: border-box; }

/* 로그인 회사 표시/도메인 변경 */
.company-switch {
    width: 100%; margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--line-1);
    border-radius: 10px; display: flex; align-items: center; gap: 10px;
    color: var(--text-1); background: var(--bg-card); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s, transform .05s;
}
.company-switch:hover { border-color: var(--accent); background: var(--accent-soft); }
.company-switch:active { transform: translateY(1px); }
.company-switch > i:first-child { color: var(--accent); font-size: 18px; }
.company-switch > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.company-switch small { color: var(--text-3); font-size: 10.5px; }
.company-switch b { overflow: hidden; color: var(--text-1); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.company-switch .bi-chevron-right { color: var(--text-3); font-size: 12px; }

/* ------------------------------------------------------------
   입력 유틸 (XInput - common.js) : X 지우기 / 오류 표시 / 필수값
   ------------------------------------------------------------ */
.field-grid > div { position: relative; }

/* 값 지우기(X) 버튼 : 입력값이 있을 때만 표시 */
.x-clear {
    position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
    border: 0; background: transparent; padding: 2px;
    color: var(--text-3); font-size: 14px; line-height: 1;
    cursor: pointer; display: none; z-index: 2;
}
.x-clear:hover { color: var(--danger); }
.x-clear.with-icon { right: 30px; }             /* 달력 아이콘이 있는 입력 : 아이콘 왼쪽에 */
.x-clear.for-textarea { top: 10px; transform: none; }
.form-control.has-clear { padding-right: 30px; }
.input-affix:has(> i) .form-control.has-clear { padding-right: 52px; }

/* 입력 오류 / 필수값 미입력 : 외곽선 빨간색 */
.form-control.err, .form-select.err, .ts-wrapper.err .ts-control {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}
/* 오류 메시지 : absolute 라 주변 레이아웃에 영향 없음 */
.field-msg {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    padding: 3px 9px;
    font-size: 11px; color: #fff;
    background: var(--danger);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    white-space: nowrap; z-index: 6; pointer-events: none;
}
.field-msg::before {
    content: ""; position: absolute; top: -4px; left: 14px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 4px solid var(--danger);
}

/* 필수값 라벨 : 빨간 별표 */
.form-label.required::after { content: " *"; color: var(--danger); font-weight: 800; }

/* 로그인 비밀번호 표시/숨김 */
.input-icon .password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--text-3); font-size: 17px; cursor: pointer;
}
.input-icon .password-toggle:hover,
.input-icon .password-toggle:focus-visible {
    color: var(--accent); background: var(--btn-ghost-hover); outline: none;
}
.input-icon:has(.password-toggle) .form-control { padding-right: 48px; }

/* 로그인 Caps Lock 안내 */
.caps-lock-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 8px;
}
.caps-lock-hint[hidden] { display: none !important; }
.caps-lock-hint > i { font-size: 14px; color: #d97706; }
.input-icon:has(.form-control.caps-lock-on) .form-control {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

/* ------------------------------------------------------------
   검색 자동완성 (comSearchPicker - common.js)
   : 입력 → 서버 검색 목록 → 선택 시 라벨 + 코드(readonly) 셋팅
   : [입력][돋보기][코드] 가 붙어 있는 하나의 input-group 형태로,
     전체 폭은 일반 input 하나와 동일하다.
   ------------------------------------------------------------ */
/* 카카오 주소찾기 : 우편번호 + 찾기 버튼 */
.addr-zip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.addr-zip-row > .form-control {
    flex: 0 0 140px;
    max-width: 160px;
    min-width: 0;
    cursor: pointer;
}
.addr-zip-row > .form-control[readonly] { cursor: pointer; }

/* 반품출고: 우편번호(고정) + 주소(나머지 전체폭) */
.retn-out-addr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.retn-out-addr-row > .retn-out-zip {
    flex: 0 0 120px;
    max-width: 140px;
    min-width: 0;
}
.retn-out-addr-row > .retn-out-addr {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.addr-detail-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
    width: 100%;
}
@media (max-width: 720px) {
    .addr-zip-row > .form-control { flex: 1 1 auto; max-width: none; }
    .addr-detail-row { grid-template-columns: 1fr; }
    .retn-out-addr-row { flex-wrap: wrap; }
    .retn-out-addr-row > .retn-out-zip { flex: 1 1 100%; max-width: none; }
    .retn-out-addr-row > .retn-out-addr { flex: 1 1 100%; }
}

.search-picker {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: visible;
}
/* 상세 스크롤 영역에서 자동완성 목록이 잘리지 않도록 */
.cust-detail-body .field-item:has(> .search-picker),
.field-item:has(> .search-picker) {
    overflow: visible;
}
/*
 * 테이블 셀 안 search-picker (재고/판매상품 등 공통)
 * - 자동완성 목록은 body 포탈이므로 overflow 잘림과 무관
 * - z-index 를 낮춰 옆 열을 덮지 않음
 * - max-width:0 은 table-layout:fixed 에서 내용 min-content 로 열 팽창 방지
 */
.table td .search-picker {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    z-index: 1;
}
.table td:has(> .search-picker) {
    overflow: hidden;
    max-width: 0;
}
.table td .search-picker .form-control,
.table td .search-picker > .input-affix {
    min-width: 0;
    max-width: 100%;
}

/*
 * 좌/우 슬롯: search-picker 의 첫/마지막 자식.
 * (input 직접 또는 clearable 의 .input-affix 모두 동일하게 맞춤)
 */
.search-picker > :first-child,
.search-picker > :last-child {
    flex: 1 1 0;
    min-width: 0;
}

/* 좌측 검색어 : 왼쪽만 round, 오른쪽은 돋보기에 맞댐 */
.search-picker > :first-child.form-control,
.search-picker > :first-child > .form-control {
    width: 100%;
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
}
.search-picker > :first-child.form-control:focus,
.search-picker > :first-child > .form-control:focus {
    box-shadow: none;
}

/* 가운데 검색 버튼 (돋보기) */
.search-picker > .sp-btn {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: var(--accent-text, #fff);
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s;
}
.search-picker > .sp-btn:hover { filter: brightness(1.12); }
.search-picker > .sp-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}

/* 우측 코드 : 오른쪽만 round, 왼쪽은 돋보기에 맞댐 */
.search-picker > :last-child.form-control,
.search-picker > :last-child > .form-control {
    width: 100%;
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
}
.search-picker > :last-child.form-control:focus,
.search-picker > :last-child > .form-control:focus {
    box-shadow: none;
}

/* readonly 코드란 */
.search-picker .form-control[readonly] {
    background: var(--bg-readonly);
    color: var(--text-2);
    cursor: not-allowed;
}

/*
 * 차수 선택 (seq-picker)
 * [날짜] - [순번] [돋보기]
 * - 날짜: yyyy-MM-dd(10자)만 보이도록 고정
 * - 순번: 숫자 4자리 폭으로 고정
 */
.seq-picker {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: stretch;
    width: 210px;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.field-item:has(> .seq-picker),
.search-field:has(> .seq-picker) {
    overflow: visible;
}
.seq-picker > .input-affix {
    flex: 0 0 118px;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
}
.seq-picker > .input-affix > .form-control {
    width: 100%;
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    padding-right: 10px;
    letter-spacing: 0;
    cursor: pointer;
}
.seq-picker > .input-affix > .form-control:focus {
    box-shadow: none;
}
.seq-picker > .seq-picker-sep {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    background: var(--bg-panel);
    color: var(--text-3);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.seq-picker > .seq-input {
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}
.seq-picker > .seq-input:focus {
    box-shadow: none;
}
.seq-picker > .seq-input {
    cursor: pointer;
}
/* 차수 날짜: 달력 아이콘 숨김 (팝업 선택 전용) */
.seq-picker > .input-affix > i.bi-calendar-event,
.seq-picker > .input-affix > i.bi-calendar-check {
    display: none;
}
.seq-picker > .sp-btn {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--accent);
    color: var(--accent-text, #fff);
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s;
}
.seq-picker > .sp-btn:hover { filter: brightness(1.12); }
.seq-picker > .sp-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}
.seq-picker .form-control[readonly] {
    background: var(--bg-readonly);
    color: var(--text-2);
    cursor: pointer;
}

/* 결과 목록 드롭다운 : body 포탈 + fixed (overflow 클리핑 방지) */
.sp-list {
    display: none;
    position: fixed;
    min-width: 260px;
    max-width: min(480px, calc(100vw - 24px));
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-modal);
    color: var(--text-1);
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
    /* modal-back(20000) 위에서 자동완성 표시 */
    z-index: 21000;
}
.sp-list.show { display: block; }
.sp-list .option { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.sp-list .option.active { background: var(--accent-soft); color: var(--accent); }
.sp-list .no-results { padding: 12px; color: var(--text-3); text-align: center; }

/* 고객사 찾기 공통 lookup 모달 */
.com-lookup-modal .modal { width: min(720px, calc(100vw - 32px)); }
.com-lookup-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.com-lookup-toolbar .form-control { flex: 1 1 220px; min-width: 0; }
.com-lookup-table-wrap {
    border: 1px solid var(--line-1);
    border-radius: 10px;
    overflow: auto;
    max-height: min(42vh, 360px);
    background: var(--bg-panel);
}
.com-lookup-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.com-lookup-table th,
.com-lookup-table td {
    padding: 9px 12px;
    border: 1px solid var(--line-1);
    text-align: left;
    white-space: nowrap;
}
.com-lookup-table th {
    position: sticky; top: 0;
    background: var(--bg-panel);
    color: var(--text-2);
    font-weight: 700;
    z-index: 1;
}
.com-lookup-table tbody tr { cursor: pointer; }
.com-lookup-table tbody tr:hover { background: var(--accent-soft); }
.com-lookup-table .empty-cell {
    text-align: center; color: var(--text-3); padding: 28px 12px; cursor: default;
}
.com-lookup-pager {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
}
.retn-order-search-modal .modal.modal-xl { width: min(1100px, calc(100vw - 24px)); }
.retn-os-filter { margin-bottom: 10px; }
.retn-os-filter .date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.retn-os-filter .date-range .form-control { min-width: 0; }
.retn-os-filter .dr-sep { color: var(--muted); flex: 0 0 auto; }
.retn-os-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 8px;
}
.retn-os-table td.is-link { color: var(--accent); font-weight: 600; }
.com-lookup-pager .page-btn {
    min-width: 32px; height: 30px; padding: 0 8px;
    border: 1px solid var(--line-1); border-radius: 7px;
    background: var(--bg-panel); color: var(--text-2);
    font-size: 12.5px; cursor: pointer;
}
.com-lookup-pager .page-btn.is-active {
    border-color: var(--accent); background: var(--accent); color: var(--accent-text, #fff);
}

/* 차수 찾기 공통 모달 — 좁고 심플, 셀 border + 선택 아이콘 */
.com-seq-search-modal .modal {
    width: min(460px, calc(100vw - 32px));
}
.com-seq-search-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.com-seq-search-toolbar > .form-label {
    margin: 0;
    white-space: nowrap;
}
.com-seq-search-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.com-seq-search-dates .input-affix {
    width: 132px;
    flex: 0 0 132px;
}
.com-seq-search-dates .form-control {
    width: 100%;
}
.com-seq-search-table-wrap {
    border: 1px solid var(--line-1);
    border-radius: 8px;
    overflow: auto;
    max-height: min(48vh, 340px);
    background: var(--bg-panel);
}
.com-seq-search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.com-seq-search-table th,
.com-seq-search-table td {
    padding: 7px 8px;
    border: 1px solid var(--line-1);
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}
.com-seq-search-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    color: var(--text-2);
    font-weight: 700;
}
.com-seq-search-table .col-select {
    width: 46px;
}
.com-seq-search-table .col-seq {
    width: 56px;
}
.com-seq-search-table .col-title {
    text-align: left;
}
.com-seq-search-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.com-seq-search-table .empty-cell {
    text-align: center;
    color: var(--text-3);
    padding: 24px 12px;
    border: 1px solid var(--line-1);
}
.com-seq-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line-1);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--accent);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.com-seq-select-btn:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.com-seq-select-btn i { font-size: 15px; line-height: 1; }
.com-seq-search-modal .com-lookup-pager {
    margin-top: 10px;
}

/* From ~ To 기간 선택 */
.date-range-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto 86px;
    align-items: center;
    gap: 8px;
}
.range-separator { color: var(--text-3); font-weight: 700; text-align: center; }
.range-limit-label {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.date-range-row .range-limit { width: 86px; }

/* 하단 액션바 */
.action-bar {
    display: flex; justify-content: flex-end; gap: 6px;
    padding: 14px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--line-1);
    border-radius: 12px;
    position: sticky; bottom: 0;
}

/* 연도 선택 팝업 (커스텀) */
.year-pop {
    position: absolute; z-index: 200; display: none;
    width: 232px; padding: 10px;
    background: var(--bg-modal); border: 1px solid var(--line-1);
    border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.3);
}
.year-pop.show { display: block; }
.year-pop .yp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.year-pop .yp-head b { font-size: 13px; }
.year-pop .yp-head button {
    width: 26px; height: 26px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-2); cursor: pointer;
}
.year-pop .yp-head button:hover { background: var(--btn-ghost-hover); }
.year-pop .yp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.year-pop .yp-grid button {
    padding: 8px 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-1);
    font-size: 12.5px; cursor: pointer;
}
.year-pop .yp-grid button:hover { background: var(--accent-soft); color: var(--accent); }
.year-pop .yp-grid button.sel { background: var(--accent); color: var(--accent-text); font-weight: 700; }

/* flatpickr 캘린더 테마 오버라이드 */
.flatpickr-calendar {
    background: var(--bg-modal); border: 1px solid var(--line-1);
    border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.3);
    color: var(--text-1);
    z-index: 23000 !important;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months, .flatpickr-weekdays { background: transparent; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month,
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-1); fill: var(--text-1); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bg-modal); color: var(--text-1); }
/* 월 드롭다운 옵션 : 네이티브 흰 배경에 흰 글씨가 되지 않도록 테마 색 강제 */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--bg-modal); color: var(--text-1);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--accent-soft); }
/* 년도 숫자 입력 : 기본 검은색이라 다크 테마에서 보이지 않음 */
.flatpickr-current-month input.cur-year { color: var(--text-1) !important; }
.flatpickr-current-month .numInputWrapper:hover { background: var(--accent-soft); }
/* 년도 증감 화살표(위/아래 삼각형) : 테마 글자색으로 */
.flatpickr-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-1); }
.flatpickr-calendar .numInputWrapper span.arrowDown::after { border-top-color: var(--text-1); }
.flatpickr-calendar .numInputWrapper span:hover { background: var(--accent-soft); }
.flatpickr-calendar .numInputWrapper span.arrowUp:hover::after { border-bottom-color: var(--accent); }
.flatpickr-calendar .numInputWrapper span.arrowDown:hover::after { border-top-color: var(--accent); }
span.flatpickr-weekday { color: var(--text-3); background: transparent; }
/* 주 시작=일요일 기준: 첫열=일(빨강), 끝열=토(파랑) */
.flatpickr-weekdays .flatpickr-weekdaycontainer span.flatpickr-weekday:first-child,
span.flatpickr-weekday:nth-child(7n+1) { color: #d32f2f; }
.flatpickr-weekdays .flatpickr-weekdaycontainer span.flatpickr-weekday:last-child,
span.flatpickr-weekday:nth-child(7n) { color: #0b5cff; }
.flatpickr-day { color: var(--text-1); }
.flatpickr-day.fp-sat { color: #0b5cff; }
.flatpickr-day.fp-sun { color: #d32f2f; }
.flatpickr-day:hover { background: var(--accent-soft); border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.fp-holi {
    color: #c62828 !important;
    font-weight: 700;
    background: color-mix(in srgb, #c62828 12%, transparent);
}
.flatpickr-day.fp-holi:hover {
    background: color-mix(in srgb, #c62828 22%, transparent);
}
.flatpickr-day.fp-sat.selected, .flatpickr-day.fp-sun.selected, .flatpickr-day.fp-holi.selected,
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--accent); border-color: var(--accent); color: var(--accent-text) !important;
}
.flatpickr-day.inRange {
    background: var(--accent-soft); border-color: var(--accent-soft);
    box-shadow: -5px 0 0 var(--accent-soft), 5px 0 0 var(--accent-soft);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-3); }
.flatpickr-time { border-top: 1px solid var(--line-1) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--text-1); background: transparent; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--accent-soft); }
.flatpickr-monthSelect-month { color: var(--text-1); }
.flatpickr-monthSelect-month:hover { background: var(--accent-soft); }
.flatpickr-monthSelect-month.selected { background: var(--accent); color: var(--accent-text); }

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .form-row { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr 1fr; }
    .field-grid .span-2 { grid-column: span 1; }
    .date-range-row { grid-template-columns: 1fr auto 1fr; }
    .date-range-row .range-limit-label { grid-column: 1 / 3; }
    .date-range-row .range-limit { grid-column: 3; grid-row: 2; width: 100%; }
}

@media (max-width: 640px) {
    .field-grid { grid-template-columns: 1fr; }
    .field-grid .span-2 { grid-column: 1 / -1; }
    .field-item.field-side {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .field-item.field-side .form-label { margin-bottom: 6px; text-align: left; }
    .date-range-row { grid-template-columns: 1fr; }
    .date-range-row .range-separator { display: none; }
    .date-range-row .range-limit-label,
    .date-range-row .range-limit { grid-column: auto; grid-row: auto; width: 100%; }
}

/* 모바일 : 아이콘 레일까지 숨기고, 햄버거 클릭 시에만 사이드바 오버레이 표시 */
@media (max-width: 768px) {
    .layout { padding-left: 0; }
    .layout:not(.side-open) .sidebar { transform: translateX(-100%); }
}

@media (max-width: 640px) {
    .top-clock .date { display: none; }
    .top-user .uinfo { display: none; }
    .search-actions { width: 100%; margin-left: 0; }
    .search-field { flex: 1 1 45%; }
    .search-field .form-control, .search-field .form-select { width: 100% !important; }
    /* 차수 컴포넌트는 공통 고정폭 유지 (날짜/순번 축소 사이즈) */
    .search-field .seq-picker { width: 210px !important; max-width: 100%; }
    .search-field .seq-picker > .input-affix { width: 118px !important; max-width: 118px !important; flex: 0 0 118px !important; }
    .search-field .seq-picker > .input-affix > .form-control { width: 100% !important; }
    .search-field .seq-picker > .seq-input { width: 44px !important; min-width: 44px !important; max-width: 44px !important; }
    .btn .btn-label { display: none; }        /* 모바일에서는 아이콘만 표시 */
    .btn { padding: 0 10px; }
    .footer span:last-child { display: none; }
}

/* ============================================================
   이메일 수신함 (Gmail형 마스터-디테일)
   ============================================================ */
.mail-recv-page { gap: 10px; }
.mail-recv-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mail-recv-top .search-actions { margin-left: auto; }
.mail-recv-search { flex-wrap: wrap; }
.mail-recv-search .date-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-template-columns: none;
}
.mail-recv-search .date-range-row .form-control { width: 130px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    border: 1px solid var(--line-1);
    background: var(--bg-panel);
    color: var(--text-2);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.chip.chip-need.is-active { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.chip.chip-done.is-active { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip.chip-none.is-active { border-color: var(--text-3); color: var(--text-2); background: color-mix(in srgb, var(--text-3) 12%, transparent); }

.mail-recv-split {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 34%) 1fr;
    gap: 12px;
}
.mail-list-pane,
.mail-read-pane {
    min-height: 0; min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--bg-panel);
    overflow: hidden;
}
.mail-list-head {
    display: flex; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-1);
}
.mail-list {
    flex: 1; min-height: 0;
    overflow: auto;
}
.mail-list-empty {
    padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 13px;
}
.mail-item {
    display: block; width: 100%; text-align: left;
    border: 0; border-bottom: 1px solid var(--line-1);
    background: transparent; color: inherit;
    padding: 11px 12px; cursor: pointer;
}
.mail-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mail-item.is-selected {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.mail-item-top {
    display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;
}
.mail-item-title {
    font-size: 13px; font-weight: 700; color: var(--text-1);
    line-height: 1.35; word-break: break-word;
}
.mail-item-date { flex: none; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.mail-item-sub {
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    margin-top: 6px; font-size: 12px; color: var(--text-3);
}
.mail-item-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-counts {
    display: flex; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--text-3);
}
.mail-item-counts .ok { color: var(--ok); }
.mail-item-counts .err { color: var(--danger); }
.mail-list-pager {
    display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
    padding: 8px; border-top: 1px solid var(--line-1);
}
.mail-list-pager .is-page-active {
    color: var(--accent);
    border-color: var(--accent);
}

.mail-status-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    color: var(--text-2);
    background: color-mix(in srgb, var(--text-3) 14%, transparent);
}
.mail-status-badge.is-need { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.mail-status-badge.is-done { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.mail-status-badge.is-none { color: var(--text-3); }
.mail-status-badge.is-wait { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* 재고현황·재고내역 수량/유통기한·보정 모달 */
.stock-qty-zero { color: var(--text-3); }
.stock-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    background: color-mix(in srgb, var(--text-3) 12%, transparent);
    color: var(--text-1);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.stock-qty-btn:hover {
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}
.stock-qty-btn:active { transform: translateY(0); }
.stock-qty-btn.is-in {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, #fff);
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.stock-qty-btn.is-out {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.stock-qty-btn.is-cancel {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, #fff);
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}
.stock-qty-btn.is-adj-up {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 14%, #fff);
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.stock-qty-btn.is-adj-down {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, #fff);
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}
/* 재고현황 보정수량: 아이콘 + 수량 */
.stock-ad-cnt-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.stock-ad-cnt-btn {
    padding: 2px 4px !important;
    min-width: 0;
    line-height: 1;
}
.stock-ad-cnt-num {
    font-variant-numeric: tabular-nums;
}
.stock-chg { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.stock-chg.is-up { color: var(--ok); }
.stock-chg.is-down { color: var(--danger); }
.stock-chg i { font-size: 11px; }
.adj-product-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
    font-size: 13px;
}
.adj-product-card .adj-k { color: var(--text-3); font-size: 11.5px; margin-bottom: 2px; }
.adj-product-card .adj-v { color: var(--text-1); font-weight: 700; word-break: break-all; }
.adj-product-card .adj-span { grid-column: 1 / -1; }
.adj-help {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-2);
    background: color-mix(in srgb, var(--text-3) 8%, transparent);
    line-height: 1.45;
}
.adj-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-panel);
}
.adj-sum-item {
    display: flex; flex-direction: column; gap: 2px; min-width: 88px;
}
.adj-sum-k { font-size: 11px; color: var(--text-3); font-weight: 600; }
.adj-sum-item b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.adj-sum-op { font-weight: 800; color: var(--text-3); font-size: 15px; padding: 0 2px; margin-top: 12px; }
.adj-sum-after { padding-left: 6px; border-left: 1px dashed var(--line-1); }
.adj-sum-changed { margin-left: auto; text-align: right; }
.adj-sum-item b.is-up, .adj-after.is-up { color: var(--ok); }
.adj-sum-item b.is-down, .adj-after.is-down { color: var(--danger); }
.adj-sum-item b.is-same, .adj-after.is-same { color: var(--text-2); }
.adj-sum-item b.is-bad, .adj-after.is-bad { color: var(--danger); text-decoration: underline; }
.adj-table-wrap {
    max-height: min(360px, 48vh);
    overflow: auto;
    border: 1px solid var(--line-1);
    border-radius: 10px;
}
.adj-table { width: 100%; margin: 0; border-collapse: collapse; }
.adj-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    border-bottom: 1px solid var(--line-1);
    font-size: 12px; font-weight: 700; color: var(--text-2);
    padding: 8px 10px;
}
.adj-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.adj-table .adj-seq { width: 48px; text-align: center; color: var(--text-3); }
.adj-table .adj-loc { min-width: 120px; font-weight: 600; }
.adj-eq-h {
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.adj-h-op { color: var(--text-3); font-weight: 800; }
.adj-eq-cell { min-width: 340px; }
.adj-eq {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.adj-cur {
    min-width: 64px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 4px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--text-3) 10%, transparent);
}
.adj-op {
    font-weight: 800; font-size: 15px; color: var(--text-3); width: 14px; text-align: center;
}
.adj-op.is-plus { color: var(--ok); }
.adj-op.is-minus { color: var(--danger); }
.adj-input-wrap { display: inline-flex; align-items: center; gap: 4px; }
.adj-ad-input {
    width: 88px !important; text-align: right; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.adj-eq-sign { font-weight: 800; color: var(--text-3); }
.adj-after {
    min-width: 72px; text-align: right; font-weight: 800; font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding: 4px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.adj-row-changed { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.adj-row-bad { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.adj-step-btns { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.adj-step-btns .btn, .adj-input-wrap .adj-step { padding: 2px 8px; min-width: 32px; }
.stock-safe-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--text-3); padding: 24px; text-align: center;
}
.mail-empty[hidden],
.mail-read[hidden],
.mail-read-body[hidden] { display: none !important; }
.mail-empty i { font-size: 36px; opacity: .55; }
.mail-empty p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 280px; }

.mail-read {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mail-read-head {
    flex: none;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--line-1);
}
.mail-read-title {
    font-size: 16px; font-weight: 700; color: var(--text-1);
    line-height: 1.4; word-break: break-word;
}
.mail-read-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
    margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.mail-read-meta em { font-style: normal; margin-right: 4px; }
.mail-read-meta b { font-weight: 600; color: var(--text-2); }
.mail-read-tabs {
    flex: none;
    display: flex; gap: 0; padding: 0 12px;
    border-bottom: 1px solid var(--line-1);
}
.mail-tab {
    border: 0; background: transparent; color: var(--text-3);
    padding: 10px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mail-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.mail-read-body {
    flex: 0 0 auto;
    height: min(28vh, 220px);
    overflow: auto;
    padding: 10px 14px;
    background: var(--bg-modal);
}
.mail-pre {
    margin: 0; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.55; color: var(--text-1);
}
.mail-pre-sm { max-height: 160px; overflow: auto; padding: 10px 12px;
    border: 1px solid var(--line-1); border-radius: 8px; background: var(--bg-modal); }
.mail-kv {
    min-height: 36px; padding: 8px 10px;
    border: 1px solid var(--line-1); border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-modal));
    font-size: 13px; color: var(--text-1); word-break: break-word;
}
.mail-jobs {
    flex: 1 1 0;
    min-height: 160px;
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line-1);
    overflow: hidden;
}
.mail-jobs-head {
    flex: none;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text-1);
}
.mail-jobs-head > i { color: var(--accent); }
.mail-jobs-grid { flex: 1; min-height: 0; padding: 0 10px 10px; overflow: hidden; }
.mail-jobs-grid #jobGrid {
    height: 100%; border: 1px solid var(--line-1); border-radius: 8px;
    overflow: auto; background: var(--bg-panel);
}
.mail-job-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; color: var(--text-3); font-size: 13px;
}
.mail-job-table {
    width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px;
}
.mail-job-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    color: var(--text-2); font-weight: 700; text-align: left;
    padding: 8px 10px; border: 1px solid var(--line-1);
    white-space: nowrap;
}
.mail-job-table tbody td {
    padding: 8px 10px; border: 1px solid var(--line-1);
    color: var(--text-1); vertical-align: top;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-job-table tbody tr { cursor: pointer; }
.mail-job-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mail-job-table th:nth-child(1), .mail-job-table td:nth-child(1) { width: 72px; }
.mail-job-table th:nth-child(2), .mail-job-table td:nth-child(2) { width: 84px; }
.mail-job-table th:nth-child(3), .mail-job-table td:nth-child(3) { width: 100px; }
.mail-job-table th:nth-child(4), .mail-job-table td:nth-child(4) { width: 100px; }
.mail-job-table th:nth-child(5), .mail-job-table td:nth-child(5) { width: 90px; }
.mail-job-st { font-weight: 700; }
.mail-job-st.is-ok { color: var(--ok); }
.mail-job-st.is-err { color: var(--danger); }
.mail-job-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 10px;
}
.mail-setting-notes {
    margin: 0 0 14px; padding: 10px 14px 10px 28px;
    border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-1));
    color: var(--text-2); font-size: 12.5px; line-height: 1.55;
}
.mail-setting-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
}
.mail-sender-block { margin-top: 16px; }
.mail-sender-list { display: flex; flex-direction: column; gap: 8px; }
.mail-sender-row { display: flex; gap: 8px; align-items: center; }
.mail-sender-row .form-control { flex: 1; }

@media (max-width: 980px) {
    .mail-recv-split { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 38%) 1fr; }
    .mail-setting-grid { grid-template-columns: 1fr; }
    .mail-job-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   회원가입승인 (리스트-상세 분할)
   ============================================================ */
.join-appr-page { gap: 10px; }
.join-appr-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.join-appr-top .search-actions { margin-left: auto; }
.join-appr-search { flex-wrap: wrap; }
.join-appr-search .date-range-row {
    display: flex; align-items: center; gap: 8px; grid-template-columns: none;
}
.join-appr-search .date-range-row .form-control { width: 130px; }
.join-appr-split {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 34%) 1fr;
    gap: 12px;
}
.join-list-pane,
.join-detail-pane {
    min-height: 0; min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--bg-panel);
    overflow: hidden;
}
.join-list-head {
    display: flex; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-1);
    flex: none;
}
.join-list { flex: 1; min-height: 0; overflow: auto; }
.join-list-empty {
    color: var(--text-3); padding: 24px; text-align: center; font-size: 13px;
}
.join-item {
    display: block; width: 100%; text-align: left;
    border: 0; border-bottom: 1px solid var(--line-1);
    background: transparent; color: inherit;
    padding: 12px 14px; cursor: pointer;
}
.join-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.join-item.is-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.join-item-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 4px;
}
.join-item-top strong { font-size: 13.5px; color: var(--text-1); }
.join-item-sub {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--text-3); margin-bottom: 4px;
}
.join-item-addr {
    font-size: 12px; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.join-list-pager {
    flex: none; display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center;
    padding: 8px 10px; border-top: 1px solid var(--line-1);
}
.join-list-pager .page-btn {
    min-width: 30px; height: 28px; border-radius: 6px;
    border: 1px solid var(--line-1); background: var(--bg-panel);
    color: var(--text-2); font-size: 12px; cursor: pointer;
}
.join-list-pager .page-btn.is-active {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.join-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--text-3); padding: 24px; text-align: center;
}
.join-empty[hidden], .join-detail[hidden] { display: none !important; }
.join-empty i { font-size: 36px; opacity: .55; }
.join-empty p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 280px; }
.join-detail {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
}
.join-detail-head {
    flex: none; padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line-1);
}
.join-detail-title {
    font-size: 16px; font-weight: 700; color: var(--text-1);
    line-height: 1.4; word-break: break-word;
}
.join-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
    margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.join-detail-meta em { font-style: normal; margin-right: 4px; }
.join-detail-meta b { font-weight: 600; color: var(--text-2); }
.join-detail-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.join-detail-body {
    flex: 1; min-height: 0; overflow: auto; padding: 12px;
}
.join-addr-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.join-term-wrap {
    border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;
    background: var(--bg-modal);
}
.join-term-empty { padding: 14px; color: var(--text-3); font-size: 13px; text-align: center; }
.join-term-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.join-term-table th, .join-term-table td {
    padding: 8px 10px; border: 1px solid var(--line-1);
    text-align: left; color: var(--text-1);
}
.join-term-table th {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    color: var(--text-2); font-weight: 700;
}

@media (max-width: 980px) {
    .join-appr-split { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 38%) 1fr; }
    .join-addr-row { grid-template-columns: 1fr; }
}

/* ============================================================
   고객사 정보관리 (리스트-상세 분할)
   ============================================================ */
.cust-mngr-page { gap: 10px; }
.cust-mngr-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cust-mngr-top .search-actions { margin-left: auto; }
.cust-mngr-search { flex-wrap: wrap; }
.cust-mngr-split {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 34%) 1fr;
    gap: 12px;
}
.cust-list-pane,
.cust-detail-pane {
    min-height: 0; min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--bg-panel);
    overflow: hidden;
}
.cust-list-head {
    display: flex; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-1);
    flex: none;
}
.total-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-2);
}
.page-size-sel {
    width: auto; min-width: 68px; height: 28px;
    padding: 0 6px; font-size: 12px;
}
.cust-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cust-list-empty {
    color: var(--text-3); padding: 24px; text-align: center; font-size: 13px;
}
.cust-item {
    display: block; width: 100%; text-align: left;
    border: 0; border-bottom: 1px solid var(--line-1);
    background: transparent; color: inherit;
    padding: 12px 14px; cursor: pointer;
}
.cust-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cust-item.is-selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* 카드형 리스트 좌상단 순번 (#전체건수 기준 역순) */
.cust-item-seq,
.join-item-seq,
.mail-item-seq,
.grp-seq {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.cust-item-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 4px;
}
.cust-item-top strong { font-size: 13.5px; color: var(--text-1); }
.cust-item-sub {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--text-3); margin-bottom: 4px;
}
.cust-item-addr {
    font-size: 12px; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 카드형 리스트 페이징 — 가운데 정렬 (모든 카드 리스트 공통) */
.cust-list-pager,
.join-list-pager,
.mail-list-pager,
.com-lookup-pager {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}
.cust-list-pager,
.join-list-pager,
.mail-list-pager {
    padding: 8px 10px;
    border-top: 1px solid var(--line-1);
}
.cust-list-pager .page-btn,
.join-list-pager .page-btn,
.com-lookup-pager .page-btn,
.mail-list-pager .page-btn {
    min-width: 30px; height: 28px; border-radius: 6px;
    border: 1px solid var(--line-1); background: var(--bg-panel);
    color: var(--text-2); font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.cust-list-pager .page-btn.is-active,
.join-list-pager .page-btn.is-active,
.com-lookup-pager .page-btn.is-active,
.mail-list-pager .page-btn.is-active {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cust-list-pager .page-btn:disabled,
.join-list-pager .page-btn:disabled,
.com-lookup-pager .page-btn:disabled,
.mail-list-pager .page-btn:disabled {
    opacity: .4; cursor: not-allowed;
}
.cust-list-pager .page-btn.page-nav,
.join-list-pager .page-btn.page-nav,
.com-lookup-pager .page-btn.page-nav,
.mail-list-pager .page-btn.page-nav {
    min-width: 28px; color: var(--text-3);
}
.cust-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--text-3); padding: 24px; text-align: center;
}
.cust-empty[hidden], .cust-detail[hidden] { display: none !important; }
.cust-empty i { font-size: 36px; opacity: .55; }
.cust-empty p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 280px; }
.cust-detail {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
}
.cust-detail-head {
    flex: none; padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line-1);
}
.cust-detail-title {
    font-size: 16px; font-weight: 700; color: var(--text-1);
    line-height: 1.4; word-break: break-word;
}
.cust-detail-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
    margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.cust-detail-meta[hidden] { display: none !important; }
.cust-detail-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.cust-detail-body {
    flex: 1; min-height: 0; overflow: auto; padding: 12px;
    overscroll-behavior: contain;
}
.cust-addr-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.cust-api-row {
    display: flex; align-items: center; gap: 8px;
}
.cust-api-row .form-control { flex: 1; min-width: 0; }
.cust-file-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.cust-file-row .form-control { max-width: 320px; }
.cust-file-name {
    font-size: 12.5px; color: var(--text-2);
    word-break: break-all;
}
.cust-svc-wrap {
    border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;
    background: var(--bg-modal);
}
.cust-svc-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.cust-svc-table th, .cust-svc-table td {
    padding: 8px 10px; border: 1px solid var(--line-1);
    text-align: left; color: var(--text-1);
}
.cust-svc-table th {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    color: var(--text-2); font-weight: 700;
}
.cust-svc-empty { color: var(--text-3); text-align: center !important; }
/* 행 편집 테이블: 텍스트 입력은 셀 폭 100% (날짜 .date-input-sm 제외) */
.cust-svc-table td > .form-control,
.cust-svc-table td > .input-affix:not(.date-input-sm) {
    width: 100%;
    box-sizing: border-box;
}
.cust-svc-table td > .input-affix:not(.date-input-sm) > .form-control {
    width: 100%;
    box-sizing: border-box;
}

/*
 * 일반 HTML 리스트 테이블 (카드형·게시판/XGrid 제외)
 * — 셀마다 border 로 항목 구분
 */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--bg-panel);
}
.table th,
.table td {
    padding: 8px 10px;
    border: 1px solid var(--line-1);
    vertical-align: middle;
    color: var(--text-1);
}
.table thead th {
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--line-1));
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}
.table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* 넓은 편집형 테이블(사은품 조건 등) 좌우 스크롤 래퍼 */
.table-scroll { overflow-x: auto; border: 1px solid var(--line-1); border-radius: 8px; }
.table-scroll table { min-width: 100%; border: 0; }
.table-scroll .table { border: 0; }
.table-scroll td .form-control, .table-scroll td .form-select { min-width: 90px; }
/* 체크박스 칩 가로 배치 (chip-group 과 동일, 상세영역 별칭) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cust-menu-tree {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 420px; overflow: auto;
    border: 1px solid var(--line-1); border-radius: 8px;
    padding: 8px; background: var(--bg-modal);
}
.cust-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    font-size: 13px; color: var(--text-1); cursor: pointer;
}
.cust-menu-item:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cust-menu-item input { flex: none; }
.cust-menu-empty {
    padding: 18px; text-align: center; color: var(--text-3); font-size: 13px;
}

@media (max-width: 980px) {
    .cust-mngr-split { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 38%) 1fr; }
    .cust-addr-row { grid-template-columns: 1fr; }
    .cust-api-row { flex-wrap: wrap; }
}