/* JSR 업무 시스템 공통 스타일.
   로그인/대시보드/목록/팝업이 모두 이 파일 하나를 쓴다. */

:root {
    /* 2026-10-08 시안 A("단계가 보이는 업무형")로 바꿈 — 어두운 메뉴에 보라 포인트.
       사용자가 세 시안 중 고른 방향이다(디자인시안/시안-A.html).
       이름(--navy-*)은 화면 곳곳이 쓰고 있어 그대로 두고 값만 옮겼다. 이제 남색이 아니라
       보라 계열이지만, 이름을 바꾸면 고칠 곳이 수백 군데라 뜻만 기억해 둔다.
         navy-900     : 가장 어두운 바탕 — 왼쪽 메뉴, 설명 풍선
         navy-600~800 : 주 색(보라) — 주 단추, 골라진 메뉴. 700·800 은 올림·누름
         navy-500     : 포커스·강조 선
         navy-50/100  : 보라의 옅은 바탕 — 골라진 줄, 마우스 올림
       그 전(2026-09-22)은 피그마 "ERP B2B Design Kit" 의 파랑이었다. */
    --navy-900: #1c1b29;
    --navy-800: #3b25b8;
    --navy-700: #4a32c9;
    --navy-600: #5b3df5;   /* 주 단추 */
    --navy-500: #7c66f7;   /* 포커스·강조 선 */
    --navy-100: #d9d1ff;
    --navy-50:  #f1eeff;
    --focus-ring: rgba(91, 61, 245, .16);   /* 입력칸 포커스의 번짐 */

    /* 로고의 빨강. 여기와 정말 급한 것에만 쓴다. */
    --brand-red: #c8102e;

    /* 템플릿 Neutral · Text */
    --ink:      #1c1b29;
    --ink-mid:  #4b4a5e;
    --ink-dim:  #8b8aa0;
    --line:     #e4e3ee;
    --line-soft:#f0eff6;
    --surface:  #ffffff;
    --ground:   #f6f5fb;
    --sunken:   #faf9fd;   /* 표 머리글, 읽기전용 칸처럼 한 겹 들어간 자리 */
    --side:     #1c1b29;   /* 왼쪽 메뉴 — 어두운 바탕 */

    /* 템플릿 Success · Warning · Danger */
    --ok:    #08875d;
    --ok-bg: #edfdf8;
    --warn:  #b25e09;
    --warn-bg:#fff8eb;
    --danger:#e02d3c;
    --danger-bg:#fef1f2;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 1px rgba(0,0,0,.06);
    --shadow-md: 0 1px 3px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.04);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.18);

    --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
            "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

    /* 금액·번호·날짜용. 폭이 일정해야 표에서 자릿수가 세로로 맞는다. */
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--ground);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

:focus-visible {
    outline: 2px solid var(--navy-500);
    outline-offset: 2px;
}

/* ============ 상단 바 ============ */
.topbar {
    background: var(--navy-900);
    color: #fff;
    padding: 0 16px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-logo {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-logo .mark { color: #ff5d6e; }
/* 회사 로고(img/logo.png, 200×75 투명 PNG). 높이만 맞추고 비율은 그대로 둔다. */
.topbar-logo img { height: 26px; width: auto; display: block; }
.auth-brand .logo img { height: 44px; width: auto; display: block; margin: 0 auto; }
.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid rgba(255,255,255,.18);
}
.topbar-spacer { flex: 1; }
.topbar-user {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
}
.topbar-link {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.topbar-link:hover { background: rgba(255,255,255,.12); color: #fff; }

@media (max-width: 560px) {
    .topbar-title { display: none; }
    .topbar-user { display: none; }
}

.topbar-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    margin-left: -4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 0;
}
.topbar-menu-btn:hover { background: rgba(255,255,255,.12); }
.topbar-menu-btn svg { width: 22px; height: 22px; }

/* ============ 앱 셸 (좌측 메뉴 + 본문) ============ */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - 58px); }

.sidebar {
    width: 226px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: 16px 12px 40px;
    overflow-y: auto;
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
}
.nav-group { margin-bottom: 20px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink-mid);
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-dim); }
.nav-item span { flex: 1; }
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item.active {
    background: var(--navy-50);
    color: var(--navy-700);
    font-weight: 700;
}
.nav-item.active svg { color: var(--navy-600); }
.nav-item.soon { color: var(--ink-dim); cursor: default; }
.nav-item.soon:hover { background: transparent; color: var(--ink-dim); }
.nav-item .soon-dot {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-dim);
    background: var(--line-soft);
    padding: 1px 6px;
    border-radius: 20px;
    flex: none;
}

.content { flex: 1; min-width: 0; padding: 26px 26px 60px; }
.content-inner { max-width: 1000px; }

/* 목록/상세를 나란히 쓰는 화면은 여백 없이 꽉 채운다 */
.content.flush { padding: 0; display: flex; }
.content.flush .content-inner { max-width: none; flex: 1; min-width: 0; display: flex; }

/* ============ 목록 + 상세 (마스터-디테일) ============ */
.workspace { display: flex; flex: 1; min-width: 0; height: calc(100vh - 58px); }

.list-panel {
    width: 336px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.list-panel-head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.list-panel-head .search input { padding-left: 36px; min-height: 40px; }
.list-panel-head .search svg { width: 16px; height: 16px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row .search { flex: 1; position: relative; }
.icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--navy-600);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.icon-btn:hover { background: var(--navy-700); }
.icon-btn svg { width: 19px; height: 19px; }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink-mid);
    cursor: pointer;
    line-height: 1.7;
}
.chip:hover { border-color: var(--navy-100); background: var(--navy-50); }
.chip.active { background: var(--navy-600); border-color: var(--navy-600); color: #fff; font-weight: 600; }

/* 휴지통 — 줄을 눌러 여는 게 아니라 버튼으로만 다루므로 손가락 모양을 없앤다 */

/* 입력칸 아래 붙는 짧은 안내문 */
/* hidden 을 붙였는데도 보이는 일을 막는다. .pager 나 .fgrid 처럼
   display 를 지정한 클래스가 브라우저 기본 [hidden] 을 이기기 때문이다. */
[hidden] { display: none !important; }

.field-hint { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }

.list-count { font-size: 12.5px; color: var(--ink-dim); padding: 2px 16px 8px; }
.list-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.list-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.list-item:hover { background: var(--ground); }
.list-item.selected { background: var(--navy-50); box-shadow: inset 3px 0 0 var(--navy-600); }
.list-item.dealer.selected  { box-shadow: inset 3px 0 0 var(--brand-red); }
.list-item.partner.selected { box-shadow: inset 3px 0 0 #c08421; }
.list-item.inactive .list-item-name { color: var(--ink-dim); text-decoration: line-through; }
.list-item.inactive .list-item-sub  { opacity: .7; }
.list-item-top { display: flex; align-items: center; gap: 7px; }
.list-item-name {
    font-size: 14.5px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-item-sub {
    font-size: 12.5px;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 상세 ---- */
.detail-panel { flex: 1; min-width: 0; overflow-y: auto; background: var(--ground); }

.detail-head {
    background: var(--surface);
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.detail-head-text { flex: 1; min-width: 180px; }
.detail-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 13px;
    color: var(--ink-mid);
}
.detail-back { display: none; }

.detail-body { padding: 20px 26px 48px; display: flex; flex-direction: column; gap: 22px; }
.detail-block { display: flex; flex-direction: column; gap: 11px; }
.detail-band {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-mid);
    letter-spacing: .02em;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 10px;
}
.detail-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.detail-card .k {
    font-size: 12.5px;
    color: var(--ink-dim);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.detail-card .k svg { width: 14px; height: 14px; }
.detail-card .v { font-size: 15px; font-weight: 600; word-break: break-all; }
.detail-card .v.none { color: var(--ink-dim); font-weight: 400; }

.detail-note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.detail-note.bad { border-color: #f0c9c5; background: var(--danger-bg); }
.detail-note-text { flex: 1; min-width: 180px; font-size: 13.5px; line-height: 1.6; }
.detail-note.bad .detail-note-text { color: var(--danger); }
.detail-note-text b { display: block; margin-bottom: 2px; }

/* 되돌릴 수 없는 동작은 아래쪽에 따로 떼어 둔다 */
.danger-zone { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.danger-zone .detail-band { color: var(--danger); }

.detail-blank {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-dim);
    padding: 40px 20px;
    text-align: center;
}
.detail-blank svg { width: 42px; height: 42px; opacity: .4; }
.detail-blank strong { color: var(--ink-mid); font-size: 15px; font-weight: 600; }
.detail-blank span { font-size: 13.5px; }

@media (max-width: 900px) {
    .workspace { flex-direction: column; height: auto; }
    .list-panel { width: auto; border-right: none; }
    .list-scroll { overflow: visible; }
    .detail-panel { display: none; }
    .workspace.detail-open .list-panel { display: none; }
    .workspace.detail-open .detail-panel { display: block; }
    .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: var(--navy-600);
        font-family: inherit;
        font-size: 14px;
        cursor: pointer;
        padding: 0 0 8px;
        width: 100%;
    }
    .detail-back svg { width: 16px; height: 16px; }
    .detail-head { flex-wrap: wrap; }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 58px 0 0;
    background: rgba(10,37,64,.45);
    z-index: 39;
}

@media (max-width: 860px) {
    .topbar-menu-btn { display: block; }
    .sidebar {
        position: fixed;
        top: 58px;
        left: 0;
        bottom: 0;
        height: auto;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-md);
        width: 264px;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.open { display: block; }
    .content { padding: 20px 15px 48px; }
}

/* ============ 페이지 틀 ============ */
.page { max-width: 1080px; margin: 0 auto; padding: 26px 16px 60px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 23px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--ink-mid); font-size: 14px; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 30px 0 12px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: .01em; }
.section-head .count { font-size: 13px; color: var(--ink-dim); }
.section-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ============ 버튼 ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--navy-600);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--navy-700); }
.btn:active { background: var(--navy-800); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn.secondary { background: var(--surface); color: var(--navy-600); border-color: var(--line); }
.btn.secondary:hover { background: var(--navy-50); border-color: var(--navy-100); }

.btn.ghost { background: transparent; color: var(--ink-mid); border-color: transparent; }
.btn.ghost:hover { background: var(--line-soft); color: var(--ink); }

.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #a33024; }

.btn.quiet-danger { background: var(--surface); color: var(--danger); border-color: var(--line); }
.btn.quiet-danger:hover { background: var(--danger-bg); border-color: #f0c9c5; }

.btn.small { padding: 5px 11px; min-height: 30px; font-size: 12.5px; font-weight: 500; }
.btn.block { width: 100%; }

/* ============ 카테고리 대시보드 ============ */

/* ============ 도구 모음 ============ */
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 190px; position: relative; }
.toolbar .search input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
}
.toolbar .search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--ink-dim);
    pointer-events: none;
}
.toolbar select {
    padding: 11px 14px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
}
.toolbar input:focus, .toolbar select:focus { border-color: var(--navy-500); outline: none; }

/* ============ 목록 ============ */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px 17px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .12s, box-shadow .12s;
    position: relative;
    overflow: hidden;
}
.row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--navy-500);
}
.row.dealer::before { background: var(--brand-red); }
.row.partner::before { background: #c08421; }
.row.etc::before { background: var(--ink-dim); }
.row:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); }

.row-sub { font-size: 13.5px; color: var(--ink-mid); }

/* ============ 배지 ============ */
.badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.7;
}
.badge.consumer { background: var(--navy-50); color: var(--navy-700); }
.badge.dealer   { background: #fdecef; color: var(--brand-red); }
.badge.partner  { background: #fbf0e2; color: #8a5209; }
.badge.etc      { background: var(--line-soft); color: var(--ink-mid); }
.badge.sent     { background: var(--ok-bg); color: var(--ok); }
.badge.failed   { background: var(--danger-bg); color: var(--danger); }
.badge.draft    { background: var(--line-soft); color: var(--ink-dim); }

/* ============ 빈 상태 ============ */
.empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--ink-dim);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty strong { display: block; color: var(--ink-mid); font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.empty span { font-size: 13.5px; }

/* ============ 팝업 ============ */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 37, 64, .5);
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
    overflow-y: auto;
    z-index: 200;
}
.overlay.open { display: flex; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 창은 세로로 머리·몸·발 세 칸이다. 크기를 줄여도 머리와 발은 남고
   몸만 접히면서 안에서 스크롤이 생긴다. 그래야 닫기 버튼을 잃지 않는다. */
.modal {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    margin: auto;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal.lg { max-width: 920px; }
/* 높이를 화면에 못박지 않는다. 품목이 세 줄뿐인데 창만 화면 끝까지 내려오면
   아래가 통째로 빈다. 내용만큼만 크고, 넘치면 그때 스크롤이 생긴다. */
.modal.xl { max-width: 1400px; }

.modal-head, .modal-foot { flex: none; }
.modal-head { cursor: move; user-select: none; -webkit-user-select: none; }
.modal-head h2 { cursor: inherit; }
body.modal-dragging { cursor: move; user-select: none; -webkit-user-select: none; }

/* 오른쪽 아래 모서리를 끌면 창이 커진다. 두 번 누르면 처음 크기로. */
.modal-resizer {
    position: absolute;
    right: 0; bottom: 0;
    width: 18px; height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
}
.modal-resizer::after {
    content: '';
    position: absolute;
    right: 3px; bottom: 3px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--ink-dim);
    border-bottom: 2px solid var(--ink-dim);
    opacity: .45;
}
.modal-resizer:hover::after { border-color: var(--navy-500); opacity: 1; }
body.modal-resizing { cursor: nwse-resize; user-select: none; -webkit-user-select: none; }

/* 창이 떠 있는 동안 뒤 화면이 같이 굴러가지 않게 한다. */
body.modal-open { overflow: hidden; }
.modal-head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-head h2 { font-size: 15px; font-weight: 700; margin: 0; flex: 1; letter-spacing: -.01em; }
.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-dim);
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    line-height: 0;
}
.modal-close:hover { background: var(--line-soft); color: var(--ink); }
/* 전표 창 머리의 「메모」 — 떠 있는 메모 창을 전표 위로(2026-10-30) */
.modal-memo { flex: none; margin-right: 4px; min-height: 30px; padding: 0 12px; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--navy-50); color: var(--navy-700); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.modal-memo::before { content: "📝 "; }
.modal-memo:hover { border-color: var(--navy-600); }
@media print { .modal-memo { display: none; } }
.modal-close svg { width: 20px; height: 20px; }
.modal-body { padding: 22px; flex: 1; overflow: auto; min-height: 0; }
/* 견적서 창은 칸이 스물이 넘는다. 다른 창과 같은 여백을 두면 그것만으로 한 화면이 찬다. */
.modal.xl .modal-body { padding: 14px 18px; }
.modal.xl .modal-foot { padding: 10px 18px; }
.modal.xl .modal-foot .btn { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.modal.xl .modal-foot .btn kbd { font-size: 9.5px; padding: 0 3px; }
.modal-foot {
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    background: #fafbfc;
}
.modal-foot .btn { flex: 1; }
/* 큰 창에서는 단추가 가로로 늘어나면 우스워진다. 오른쪽에 붙여 원래 크기로 둔다. */
.modal.lg .modal-foot .btn, .modal.xl .modal-foot .btn { flex: none; min-width: 5.4rem; }
.modal.xl .modal-foot { gap: 6px; }

/* 팝업 안 오류 배너 */
.form-alert {
    display: none;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
    border-left: 3px solid var(--danger);
}
.form-alert.show { display: block; }
.form-alert strong { display: block; margin-bottom: 2px; }

/* ============ 폼 ============ */
.field { margin-bottom: 13px; }
.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-mid);
    margin-bottom: 6px;
}
.field label .req { color: var(--danger); margin-left: 2px; }
.field input, .field select {
    width: 100%;
    padding: 8px 11px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
}
.field textarea {
    width: 100%;
    padding: 8px 11px;
    min-height: 5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    resize: vertical;
}
.field textarea:focus { border-color: var(--navy-500); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus, .field select:focus { border-color: var(--navy-500); outline: none; }
.field input:disabled { background: var(--line-soft); color: var(--ink-mid); }
.field .hint { font-size: 12.5px; color: var(--ink-dim); margin-top: 5px; }
.field .hint a { color: var(--navy-600); cursor: pointer; }

.field-row { display: flex; gap: 8px; align-items: flex-start; }
.field-row .field { flex: 1; margin-bottom: 0; }
.field-row .btn { margin-top: 25px; }

.grid2 { display: flex; gap: 12px; }
.grid2 > .field { flex: 1; }

.form-section {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy-600);
    letter-spacing: .02em;
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.form-section:first-child { margin-top: 0; }
.form-section .note { font-weight: 400; color: var(--ink-dim); font-size: 12px; }

/* ============ 토스트 ============ */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: calc(100% - 32px);
    max-width: 440px;
    pointer-events: none;
}
.toast {
    width: 100%;
    background: var(--navy-900);
    color: #fff;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    pointer-events: auto;
    animation: toast-in .18s ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast.leaving { opacity: 0; transform: translateY(10px); transition: opacity .18s, transform .18s; }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-icon svg { width: 17px; height: 17px; display: block; }
.toast-text { flex: 1; }
.toast-text b { display: block; font-weight: 600; }
.toast-text small { display: block; font-size: 13px; opacity: .82; margin-top: 2px; line-height: 1.5; }
.toast.success { background: #10502f; }
.toast.error   { background: #8f2019; }
.toast.warn    { background: #7a4c05; }
.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.65);
    cursor: pointer;
    padding: 0 0 0 4px;
    line-height: 0;
    flex-shrink: 0;
}
.toast-close:hover { color: #fff; }
.toast-close svg { width: 15px; height: 15px; display: block; }

/* ============ 로그인 ============ */
.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(1100px 520px at 50% -12%, #143a63 0%, transparent 62%),
        var(--navy-900);
}
.auth-card {
    width: 100%;
    max-width: 384px;
    background: var(--surface);
    border-radius: 14px;
    padding: 34px 30px 30px;
    box-shadow: 0 24px 64px rgba(0,0,0,.34);
}
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand .logo {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--navy-900);
    line-height: 1.1;
}
.auth-brand .logo .mark { color: var(--brand-red); }
.auth-brand .sub {
    font-size: 13px;
    color: var(--ink-dim);
    margin-top: 5px;
    letter-spacing: .01em;
}
.auth-card .field:last-of-type { margin-bottom: 18px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--ink-dim);
    font-size: 12.5px;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.auth-foot {
    text-align: center;
    margin-top: 24px;
    font-size: 12.5px;
    color: rgba(255,255,255,.45);
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink-mid);
    cursor: pointer;
    margin-bottom: 18px;
    user-select: none;
}
.check input {
    width: 19px;
    height: 19px;
    min-height: 0;
    margin: 0;
    accent-color: var(--navy-600);
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .grid2 { flex-direction: column; gap: 0; }
    .overlay { padding: 0; }
    /* 칸이 많은 입력 창(전표·이력)만 화면을 꽉 채운다. 단가표처럼 세 줄짜리 창까지
       전체화면으로 열면 아래가 통째로 비어 허전하다(2026-09-30). */
    .modal.lg, .modal.xl { max-width: none; border-radius: 0; min-height: 100vh; }
    .modal.lg .modal-body, .modal.xl .modal-body { flex: 1; }
    .modal:not(.lg):not(.xl) {
        max-width: none; margin: auto 12px;
        border-radius: 14px; max-height: calc(100vh - 32px);
    }
    .modal-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
    .toast-stack { bottom: 16px; }
    .page { padding: 20px 14px 48px; }
}

/* 화면 전환 시 살짝 떠오르게 */
.view-enter { animation: view-in .16s ease; }
@keyframes view-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .view-enter, .toast, .overlay.open { animation: none; }
    .sidebar { transition: none; }
}

/* ============ 단가표 ============ */
.price-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    position: sticky;
    top: 58px;
    z-index: 10;
}
.price-bar.active { border-color: var(--navy-500); background: var(--navy-50); }
.price-bar-text { flex: 1; font-size: 13.5px; color: var(--ink-mid); min-width: 150px; }
.price-bar.active .price-bar-text { color: var(--navy-700); font-weight: 600; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
/* 칸 너비를 끌어서 바꾸므로 표 전체 너비는 js/views/prices.js 가 직접 정한다.
   table-layout: fixed 라야 <colgroup> 에 준 너비가 그대로 지켜진다. */
.price-table { border-collapse: collapse; table-layout: fixed; }
.price-table th, .price-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}
.price-table thead th {
    position: sticky;
    top: 0;
    /* 너비 조절 손잡이를 오른쪽 경계선에 겹쳐 놓기 위한 기준점 */
    overflow: visible;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-mid);
    white-space: nowrap;
    z-index: 1;
}
.price-table thead th small {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--ink-dim);
    margin-top: 1px;
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover td { background: var(--ground); }
.price-table tr.row-changed td { background: #fffbf0; }
.price-table tr.row-changed:hover td { background: #fff6e3; }

.price-table .col-code {
    font-size: 13px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 칸 너비 조절 손잡이 — 머리글 오른쪽 경계선 위에 겹쳐 둔다.
   평소에는 보이지 않다가 마우스를 올리면 선이 드러난다. */
thead th { position: relative; }
/* 손잡이는 칸 안쪽 오른쪽 끝에 둔다. 예전에는 경계선에 걸쳐(-5px) 두었는데, 머리글이 sticky 라
   오른쪽 절반을 옆 칸이 덮어 경계선을 잡아도 안 끌렸다(2026-10-19). */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;   /* 휴대폰에서 끌 때 화면이 같이 스크롤되지 않게 */
    z-index: 2;
}
.col-resizer::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 7px;
    width: 2px;
    height: 60%;
    background: transparent;
    border-radius: 1px;
}
.col-resizer:hover::after { background: var(--navy-500); }

/* 끄는 동안에는 글자가 선택되지 않도록 */
body.col-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
.price-table .col-name { min-width: 260px; }
.price-table .col-name input {
    display: block;
    width: 100%;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    color: var(--ink);
}
/* 평소에는 글자처럼 보이다가, 마우스를 올리거나 고칠 때만 입력칸 테두리가 드러난다.
   표 전체가 입력칸 격자로 보이면 눈이 피로해서다. */
.price-table .col-name input:hover { border-color: var(--line); background: var(--surface); }
.price-table .col-name input:focus { border-color: var(--navy-500); background: var(--surface); outline: none; }
.price-table .col-name .name-input { font-size: 14px; font-weight: 600; }
.price-table .col-name .size-input { font-size: 12.5px; color: var(--ink-dim); margin-top: 1px; }
.price-table .col-name input.changed {
    border-color: #c08421;
    background: #fff8ea;
    color: #8a5209;
}
.price-table .col-price { width: 150px; }
.price-table .col-price input {
    width: 100%;
    padding: 7px 10px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 14px;
    text-align: right;
    color: var(--ink);
}
.price-table .col-price input:focus { border-color: var(--navy-500); outline: none; }
.price-table .col-price input.changed {
    border-color: #c08421;
    background: #fff8ea;
    font-weight: 700;
    color: #8a5209;
}
.price-table .table-msg { text-align: center; color: var(--ink-dim); padding: 40px 20px; }

/* 쪽 나누기 */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.pager-count { font-size: 13px; color: var(--ink-dim); }
.pager-buttons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink-mid);
    cursor: pointer;
}
.pager-btn:hover:not(:disabled) { border-color: var(--navy-500); color: var(--navy-700); }
.pager-btn.current {
    border-color: var(--navy-700);
    background: var(--navy-700);
    color: #fff;
    font-weight: 700;
}
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-gap { padding: 0 2px; color: var(--ink-dim); }

/* 거래처 목록처럼 좁은 칸에 들어가는 쪽 번호 */
.pager.compact {
    margin: 0;
    padding: 8px 10px;
    justify-content: center;
    border-top: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
}
.pager.compact .pager-btn { min-width: 32px; min-height: 32px; padding: 0 7px; font-size: 12.5px; }

/* ─────────────────────────────────────────────────────────────
   견적서
   너비는 고정 픽셀 대신 fr 과 ch(글자 폭)를 쓴다. 화면이 넓어지면 같이 늘어나고,
   좁아지면 격자를 버리고 줄마다 카드로 쌓인다.
   ───────────────────────────────────────────────────────────── */

/* 견적서처럼 넓은 화면이 필요한 곳은 1000px 제한을 풀어준다 */
.content-inner.wide { max-width: none; }

.check.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap; }
.check.inline input { width: 16px; height: 16px; }

kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--ground);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ink-mid);
    line-height: 1.5;
}
.btn:not(.secondary):not(.quiet-danger) kbd {
    border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.15); color: #fff;
}

.link-btn {
    border: none; background: none; padding: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--navy-600); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ── 견적서 목록: 조회 상자 + 표 ────────────────────────────────────
   위에서부터 조회 상자 → 건수 → 표 순서로 눈이 내려간다.
   이카운트 조회 화면과 같은 흐름이라 손에 익은 순서다. */

.crumb { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 4px; }
.head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.head-row h1 { margin: 0; }
.head-row .spacer { flex: 1; }

.filterbox {
    /* 조회 상자는 표만큼 넓힐 필요가 없다(2026-09-23) — 표 너비의 절반쯤에서 멈춘다.
       떠 있는 상세 판도 이 상자에 맞춰 같이 좁아진다. */
    max-width: min(100%, 46rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.filter-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; flex-wrap: wrap;
}
.filter-row + .filter-row { border-top: 1px solid var(--line-soft); }
.filter-label {
    width: 5.5rem; flex: none;
    font-size: 13px; font-weight: 600; color: var(--ink-mid);
}
.filter-row input[type="date"],
.filter-row input[type="text"],
.filter-row select {
    min-height: 30px; padding: 4px 9px;
    border: 1px solid #dfe4ec; border-radius: 8px;
    background: var(--surface); font-family: inherit; font-size: 13.5px;
    color: var(--ink); width: auto;
}
.filter-row .grow { flex: 1; min-width: 14rem; }
.filter-row .tilde { color: var(--ink-dim); }
/* 기간 단추는 한 덩이로 붙여 둔다. 하나하나 떨어져 있으면 날짜칸과 섞여 보인다. */
.range-btns { display: inline-flex; gap: 4px; margin-left: 4px; }
.range-btns .btn { min-height: 30px; padding: 3px 9px; font-size: 12px; }

.checks { display: flex; gap: 15px; flex-wrap: wrap; }
.checks label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--ink-mid); cursor: pointer; white-space: nowrap;
}
.checks input { width: 15px; height: 15px; accent-color: var(--navy-700); margin: 0; }
.checks .sep { padding-left: 15px; border-left: 1px solid var(--line); font-weight: 600; color: var(--warn); }

.count-line { display: flex; align-items: baseline; gap: 8px; }
.count-line b { font-size: 14px; }
.count-line span { font-size: 12.5px; color: var(--ink-dim); }

/* 표 */
.q-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.q-table thead th {
    text-align: left; padding: 9px 12px;
    background: var(--sunken); border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; color: var(--ink-mid); white-space: nowrap;
}
.q-table thead th.ta-r { text-align: right; }
.q-table tbody td {
    padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
    font-size: 13px; vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-table tbody tr:last-child td { border-bottom: none; }
.q-table tbody tr[data-id] { cursor: pointer; }
.q-table tbody tr[data-id]:hover td { background: var(--navy-50); }

/* 연락이 밀린 줄만 바탕색이 들어온다. 챙긴 건은 조용해야 눈에 띄는 게 의미가 있다. */
.q-table tbody tr.followup td { background: #fffcf4; }
.q-table tbody tr.followup:hover td { background: var(--warn-bg); }
.q-table tbody tr.overdue td { background: #fdf5f6; }
.q-table tbody tr.overdue:hover td { background: var(--danger-bg); }

/* 순번. 자료가 아니라 위치 표시라 회색으로 눌러두고, 가운데로 모아
   숫자가 한 자리에서 두 자리로 늘어도 줄이 흔들리지 않게 한다. */
.q-table .rowno {
    padding-left: 0; padding-right: 0;
    text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--ink-dim); background: var(--sunken);
}
.q-table tbody tr[data-id]:hover .rowno { background: var(--navy-50); }

.q-table .qno { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.q-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* 날짜 칸. 숫자지만 오른쪽으로 붙이지 않는다(2026-09-23) — 머리글은 왼쪽인데 값만 오른쪽이라
   칸을 넓히면 제목과 값이 서로 멀어져 다른 칸처럼 보였다. */
.q-table .date { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-table .date.dim { color: var(--ink-dim); font-size: 12.5px; }
.q-table .num.strong { color: var(--ink); font-weight: 600; }
.q-table .num.dim { color: var(--ink-dim); font-size: 12.5px; }
/* 구분 칸. 대부분이 제품이므로 A/S 만 진하게 두어 훑을 때 걸리게 한다. */
.q-table .qtype { color: var(--ink-dim); font-size: 12.5px; white-space: nowrap; }
.q-table .qtype b { color: var(--navy-700); font-weight: 700; }
.q-table .items { color: var(--ink-mid); }
.q-table .table-msg { text-align: center; color: var(--ink-dim); padding: 40px 20px; }

/* 표 안에서만 쓰는 이름이다. 입력 화면의 거래처 칸도 .party 를 쓰고 있어서
   가두지 않으면 그쪽 라벨과 안내문이 한 줄로 밀려 글자가 세로로 쌓인다. */
.q-table .party { display: flex; align-items: center; gap: 6px; min-width: 0; }
.q-table .party .b, .q-table .party .c { overflow: hidden; text-overflow: ellipsis; }
.q-table .party .to { flex: none; color: var(--ink-dim); }
.q-table .party .b { font-weight: 600; color: var(--ink); }
.q-table .party .c { font-weight: 600; color: var(--navy-700); }

/* 상태 알약. 거래처 화면의 .chip 은 눌러서 거르는 버튼이라 이름을 나눴다. */
.tag {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    border: 1px solid transparent; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.tag.on   { background: var(--navy-50);  color: var(--navy-700); border-color: var(--navy-100); }
.tag.win  { background: var(--ok-bg);    color: var(--ok); }
.tag.lose { background: var(--danger-bg);color: var(--danger); }
.tag.wait { background: var(--warn-bg);  color: var(--warn); }
.tag.mute { background: var(--line-soft);color: var(--ink-mid); }
/* 완료만 속이 찬 색이다. 끝난 건이라는 뜻이고, 훑을 때 한눈에 갈린다. */
.tag.done { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

/* 목록에서 눌러 바꾸는 상태 알약. 단추처럼 보이되 알약 모양은 그대로 둔다. */
.tag.pick {
    font-family: inherit; cursor: pointer;
    padding-top: 3px; padding-bottom: 3px;
}
.tag.pick:hover { filter: brightness(.96); box-shadow: 0 0 0 2px var(--navy-100); }

/* 그 자리에 뜨는 작은 메뉴. 팝업을 띄우기엔 고르는 것이 넷뿐이다. */
.popmenu {
    position: fixed; z-index: 400;
    min-width: 8.5rem; padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 1px;
}
.popmenu button {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 7px;
    border: none; border-radius: var(--radius-sm);
    background: none; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 12.5px;
}
.popmenu button:hover { background: var(--navy-50); }
.popmenu button.on { background: var(--line-soft); }
.popmenu button.on::after { content: '✓'; margin-left: auto; color: var(--navy-700); font-weight: 700; }

/* 줄 안의 인쇄 단추. 줄을 여는 것과 헷갈리지 않게 조용히 둔다. */
.q-table .row-print { min-height: 24px; padding: 2px 9px; font-size: 11.5px; }

@media (max-width: 700px) {
    .filter-label { width: 100%; }
    .filter-row .grow { min-width: 100%; }
}

/* ── 입력 ── */
.q-form { display: flex; flex-direction: column; gap: 10px; }
/* 팝업 안에 들어가므로 창 여백을 두 번 주지 않는다. */
.modal-body > .q-form { margin: -4px 0; }

.q-form-body { display: flex; gap: 14px; align-items: flex-start; }
.q-form-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ── 입력 줄 ──────────────────────────────────────────────────────────
   이카운트 견적서와 같은 모양이다. 라벨은 왼쪽 고정 폭, 입력칸 너비도 통일.
   상자도 배경도 두지 않는다 — 나누려고 그은 선이 곧 눈에 걸리는 것이 된다. */

/* dense: 넓은 줄(.frow.wide) 뒤에 생기던 빈 칸을 뒤 줄이 올라와 메운다(2026-09-29).
   빈 자리를 그대로 두면 화면 한가운데가 뚫린 것처럼 보인다. */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 18.6rem)); gap: 0 22px; grid-auto-flow: row dense; }
/* 칸이 좁아지도록 칸 수를 늘린다. 거래처·납품처를 좌우 반씩 나누면 반쪽이
   화면의 절반을 통째로 먹어 칸 하나가 다시 넓어진다. 제목으로만 나눈다. */

.frow {
    display: grid;
    /* 이름표 칸을 넓혔다(2026-09-29) — "거래명세서일자" 처럼 긴 이름에 (?)·● 가 붙으면
       5.2rem 에서는 표시가 다음 줄로 떨어져 줄이 서로 어긋나 보였다. */
    grid-template-columns: 6.8rem minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 30px;
}
/* 넓은 줄은 이름표가 길다 — "최종판매처 및 기타" 에 (!) 까지 붙으면 6.8rem 안에서
   표시만 아래로 떨어진다. 넓은 줄에서만 이름표 칸을 글자만큼 늘린다(2026-09-30). */
.frow.wide {
    grid-column: 1 / -1; align-items: start;
    grid-template-columns: minmax(6.8rem, max-content) minmax(0, 1fr);
}
/* 너비는 격자 칸이 정한다. 여기서 또 제한하면 두 값이 어긋나 오른쪽 끝이 안 맞는다. */
.frow > label {
    font-size: 12.5px; font-weight: 500; color: var(--ink-mid);
    line-height: 1.35; padding-top: 1px;
    /* 이름과 표시(?·●·*)를 한 덩이로 둔다. 표시만 아래로 떨어지지 않는다. */
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px;
}
.frow.wide > label { padding-top: 7px; }
.frow > label .req { color: var(--danger); margin-left: 2px; }
.fbox { min-width: 0; }

.q-form .frow input,
.q-form .frow select,
.q-form .frow textarea {
    width: 100%;
    min-height: 27px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
}
.q-form .frow textarea { line-height: 1.6; resize: vertical; }
.q-form .frow input:focus,
.q-form .frow select:focus,
.q-form .frow textarea:focus { border-color: var(--navy-500); outline: none; }
.q-form .frow input::placeholder, .q-form .frow textarea::placeholder { color: var(--line); }

/* 구분 제목. 테두리 없이 가는 글씨 한 줄이면 충분하다.
   다만 거래처(돈 받는 곳)와 납품처(물건 받는 곳)를 바꿔 적으면 견적서가 통째로
   틀리므로, 제목 자체를 없애지는 않는다. */
.fsec {
    margin: 13px 0 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px; font-weight: 700; color: var(--ink-mid);
}
.fsec small { font-weight: 500; color: var(--ink-dim); margin-left: 5px; }

/* 거래처 — 코드칸과 이름칸을 나란히 */
/* 코드칸 · 이름칸. 돋보기는 이름칸 안 오른쪽에 얹는다(2026-10-07).
   칸을 따로 내주면 그만큼 코드칸이 좁아져 사업자번호 열 자리가 잘린다 —
   이 줄은 원래도 빠듯하다. 단가칸의 Fn 단추와 같은 방식이다. */
.party-box { position: relative; display: grid; grid-template-columns: minmax(5.8rem, .9fr) minmax(6rem, 1.3fr); gap: 5px; }
.q-form .party-box > input[id$="Name"] { padding-right: 27px; }
.party-find {
    position: absolute; right: 3px; bottom: 3px;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 21px; padding: 0;
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface); color: var(--ink-dim); cursor: pointer;
}
.party-find svg { width: 12px; height: 12px; }
.party-find:hover { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-600); }
.party-find:focus-visible { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }

/* 거래처 찾는 창의 검색칸. 조회 상자의 검색칸과 같은 모양이다. */
.pick-search { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.pick-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ink-dim); pointer-events: none; }
.pick-search input {
    width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 11px 6px 34px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 14px; color: var(--ink);
}
.pick-search input:focus { border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.party-code { font-family: var(--mono); font-size: 12.5px; }
/* 작업보호 — 날짜와 본사 번호를 한 칸처럼 붙여 둔다.
   이카운트로는 260908-01 로 합쳐 나가므로 화면에서도 그렇게 보이는 편이 낫다. */
.protect-box { display: flex; align-items: center; gap: 4px; }
.protect-box .dash { color: var(--ink-dim); }
/* 차수는 01·02 두 자리다. 칸을 글자에 맞춰 붙인다 — 넓게 두면 빈 칸처럼 보여
   무엇을 더 적어야 하나 망설이게 된다(2026-09-30). */
.q-form .protect-box input.seq { width: 2.6rem; flex: none; text-align: center; padding: 3px 2px; }
/* 날짜칸도 글자만큼만. 남는 폭은 오른쪽 여백으로 둔다. */
.q-form .protect-box input[type="date"] { flex: 0 1 8.8rem; min-width: 7.6rem; }

/* 유효기간 — 앞뒤 말은 붙박이, 숫자만 받는다. */
.term-box { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.term-box span { font-size: 12.5px; color: var(--ink-mid); }
.q-form .term-box input { width: 4rem; flex: none; text-align: center; }

/* ── 품목 격자 ── */
.q-items-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-items-head > span:first-child { font-size: 13.5px; font-weight: 700; }
/* 품목표 위 "단축키 ?" — 단축키 목록은 ? 안에(2026-10-26 문구 정리) */
.kbd-help { margin-left: auto; display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-dim); }
.q-hint {
    flex: 1;
    font-size: 12px; color: var(--ink-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-hint kbd {
    border: none;
    padding: 1px 4px;
    background: var(--line-soft);
    font-size: 10.5px;
    color: var(--ink-mid);
}

.q-grid-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }

/* 금액은 4,190,000 처럼 아홉 자리가 들어간다. 칸이 좁으면 숫자가 잘려
   4,190,00 처럼 보이는데, 이건 잘린 게 아니라 다른 금액으로 읽힌다.

   id 가 아니라 클래스로 건다. 견적서·주문서·판매가 같은 표를 쓰는데 id 로
   걸어두면 전표를 하나 만들 때마다 여기를 또 고쳐야 하고, 잊으면 표가
   한 칸짜리로 무너진다(실제로 주문서에서 그랬다). */
.cols-money {
    --qcols:
        1.5rem                  /* 고르기 */
        1.4rem                  /* 끼워넣기 */
        minmax(9ch, .95fr)      /* 품목코드 */
        minmax(12ch, 2.6fr)     /* 품목명 */
        minmax(7ch, .9fr)       /* 규격 */
        minmax(4ch, .4fr)       /* 수량 */
        minmax(9ch, .92fr)      /* 단가 */
        minmax(9ch, .92fr)      /* 공급가액 */
        minmax(8ch, .8fr)       /* 부가세 */
        minmax(9ch, .92fr)      /* 소비자 */
        minmax(8ch, 1.3fr);     /* 적요 */
}
.cols-goods {
    --qcols:
        1.5rem                  /* 고르기 */
        1.4rem                  /* 끼워넣기 */
        minmax(10ch, 1fr)       /* 품목코드 */
        minmax(13ch, 1.7fr)     /* 품목명 */
        minmax(8ch, 1fr)        /* 규격 */
        minmax(4ch, .45fr)      /* 수량 */
        minmax(9ch, 1.4fr);     /* 적요 */
}
/* 발주서·구매. 소비자가 칸 대신 단위 칸이 있다. */
.cols-buy {
    --qcols:
        1.5rem                  /* 고르기 */
        1.4rem                  /* 끼워넣기 */
        minmax(9ch, .95fr)      /* 품목코드 */
        minmax(12ch, 2.6fr)     /* 품목명 */
        minmax(7ch, .9fr)       /* 규격 */
        minmax(4ch, .4fr)       /* 단위 */
        minmax(4ch, .4fr)       /* 수량 */
        minmax(9ch, .92fr)      /* 단가 */
        minmax(9ch, .92fr)      /* 공급가액 */
        minmax(8ch, .8fr)       /* 부가세 */
        minmax(8ch, 1.3fr);     /* 적요 */
}
/* 견적의뢰서. 값을 묻는 종이라 단가·금액 칸이 없다. */
.cols-rfq {
    --qcols:
        1.5rem                  /* 고르기 */
        1.4rem                  /* 끼워넣기 */
        minmax(9ch, 1fr)        /* 품목코드 */
        minmax(14ch, 2.8fr)     /* 품목명 */
        minmax(8ch, 1.2fr)      /* 규격 */
        minmax(4ch, .5fr)       /* 단위 */
        minmax(4ch, .5fr)       /* 수량 */
        minmax(10ch, 1.8fr);    /* 적요 */
}
.q-items-title { font-size: 13px; color: var(--ink-mid); }
.q-grid-head, .qline-main, .q-agrid-head, .aline-main {
    display: grid;
    grid-template-columns: var(--qcols);
    gap: 4px;
    align-items: center;
}

/* 손으로 너비를 정한 뒤에는 표가 상자보다 넓어질 수 있다. 그때만 상자를 넘어
   자라게 두고 가로 스크롤을 붙인다. 늘 켜두면 fr 이 무너져 기본 상태에서도 넘친다. */
.q-grid-wrap.sized .q-grid-head,
.q-grid-wrap.sized .q-agrid-head,
.q-grid-wrap.sized .q-grid,
.q-grid-wrap.sized .qline,
.q-grid-wrap.sized .qline-main,
.q-grid-wrap.sized .aline-main { width: max-content; min-width: 100%; }
.q-grid-head > span, .q-agrid-head > span { position: relative; }
.qcol-grip {
    position: absolute; top: 0; right: 0;
    width: 9px; height: 100%;
    cursor: col-resize; touch-action: none; z-index: 2;
}
.qcol-grip::after {
    content: ''; position: absolute; top: 15%; right: 1px;
    width: 2px; height: 70%; background: var(--line); border-radius: 1px;
}
.qcol-grip:hover::after { background: var(--navy-500); }

.q-grid-head {
    padding: 5px 6px;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; color: var(--ink-mid);
}
/* 머리글은 모두 가운데. 이카운트가 그렇고, 값이 왼쪽·가운데·오른쪽으로 제각각인
   표에서는 머리를 한 줄로 세워두는 편이 오히려 덜 시끄럽다. */
.q-grid-head > span, .q-agrid-head > span {
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 칸마다 가는 세로선. 격자를 다 그으면 시끄럽지만, 선이 아예 없으면
   숫자가 어느 칸 것인지 눈으로 좇기 어렵다. */
.q-grid-head > span + span,
.qline-main .qc + .qc,
.q-agrid-head > span + span,
.aline-main .qc + .qc {
    border-left: 1px solid var(--line-soft);
    padding-left: 5px;
}
/* 고르기와 ＋ 는 한 덩이로 본다. 사이에 선이 있으면 도구가 둘로 보인다. */
.q-grid-head > span:nth-child(2), .q-agrid-head > span:nth-child(2),
.qline-main .qc.qadd, .aline-main .qc.qadd { border-left: none; padding-left: 0; }
.qline-main .qc + .qc .qcell,
.aline-main .qc + .qc .qcell { padding-left: 4px; }

/* 수량은 가운데. 한 자리 숫자가 대부분이라 오른쪽에 붙이면 칸이 빈 것처럼 보인다. */
.qcell.mid { text-align: center; }

.qline { border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.qline:last-child { border-bottom: none; }
.qline-main { padding: 2px 6px; }

.qc { min-width: 0; }
.qcell {
    width: 100%; min-width: 0;
    min-height: 25px; padding: 2px 6px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit; font-size: 12.5px; color: var(--ink);
}
input.qcell:hover { border-color: var(--line); background: var(--surface); }
input.qcell:focus { border-color: var(--navy-500); background: var(--surface); outline: none; }
.qcell.num { text-align: right; font-variant-numeric: tabular-nums; }
.qout {
    display: block; text-align: right;
    font-size: 12.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums;
    padding: 2px 6px;
}
.qout.strong { color: var(--ink); font-weight: 700; }

.qpick, .qadd { display: flex; justify-content: center; align-items: center; }
.qpick input { width: 14px; height: 14px; margin: 0; accent-color: var(--navy-700); cursor: pointer; }

/* ＋ 를 또렷하게 두면 표가 ＋ 로 도배되고, 아예 감추면 있는 줄을 모른다.
   평소에는 옅게, 마우스를 올린 줄에서만 또렷하게. */
.qadd button {
    width: 16px; height: 16px; padding: 0;
    border: none; border-radius: 50%;
    background: none; color: var(--navy-600);
    font-family: inherit; font-size: 13px; cursor: pointer; line-height: 1;
    opacity: .3; transition: opacity .1s;
}
.qline:hover .qadd button,
.qline:focus-within .qadd button { opacity: 1; }
.qadd button:hover { background: var(--navy-50); }

/* 아래에 한 줄 끼워넣기. 지우기와 색을 나눠 손이 헷갈리지 않게 한다. */

/* ── 실제 출고 내역 ──
   견적서 내역과 같은 자리에서 갈아 끼운다. 위아래로 쌓으면 화면만 길어진다.
   금액 칸이 없다 — 돈은 견적서 내역에서만 센다. 그래야 두 합계가 어긋나지 않는다. */
.q-agrid-head {
    padding: 5px 6px;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; color: var(--ink-mid);
}
.q-agrid-head span:nth-child(5) { text-align: right; }
.aline-main { padding: 2px 6px; }

/* 왜 여기에 적는지 한 줄로 알려준다. 대체 결제는 자주 있는 일이 아니라
   오랜만에 열면 이 칸이 무엇이었는지 잊는다. */
.q-actual-note {
    margin: 0;
    padding: 10px 12px;
    background: #fbf1e0; border-bottom: 1px solid #e8d5ae;
    font-size: 12.5px; line-height: 1.6; color: #6b4405;
}
.q-actual-note b { font-weight: 700; }

/* 접혀 있는 쪽에 몇 줄이 들어 있는지. 안 보이면 적어둔 것도 잊는다. */
.seg-count {
    display: inline-block; min-width: 15px; margin-left: 4px; padding: 0 4px;
    border-radius: 20px; background: var(--warn); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
.seg-count:empty { display: none; }
.segment .seg.on .seg-count { background: #fff; color: var(--navy-700); }

.q-totals {
    display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 13px; color: var(--ink-mid); font-variant-numeric: tabular-nums;
}
.q-totals b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.q-totals .grand { font-size: 14.5px; color: var(--ink); }
.q-totals .grand b { color: var(--navy-700); }

/* ── (!) 안내 ──
   늘 펼쳐두면 자리만 먹는 내용을, 볼 마음이 있을 때만 보여준다.
   키보드로도 닿아야 하므로 tabindex 를 주고 :focus 에서도 뜨게 한다. */
.info-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 4px;
    border-radius: 50%; background: none; color: var(--ink-dim);
    border: 1px solid #d3d9e3;
    font-size: 10px; font-weight: 600; line-height: 1;
    cursor: help; position: relative; vertical-align: middle;
}
.info-dot:hover, .info-dot:focus { background: var(--line-soft); color: var(--ink-mid); border-color: #b9c2d0; }
/* 이카운트로 보낼 때 꼭 필요한 칸 — 파란 점 하나로만 알린다(2026-09-28) */
.need-ec {
    color: var(--navy-600); font-size: 8px; line-height: 1;
    margin-left: 4px; vertical-align: 3px; cursor: help;
}
.info-pop {
    display: none;
    position: absolute; left: 0; bottom: calc(100% + 8px);
    z-index: 5;
    width: max-content; max-width: 26rem;
    padding: 10px 12px;
    background: var(--navy-900); color: #fff;
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: 12px; font-weight: 500; text-align: left;
    cursor: auto;
}
.info-dot:hover .info-pop, .info-dot:focus .info-pop { display: block; }
/* 도움말 ? (UI.help, 2026-10-26 문구 정리) — 설명 글을 늘 펼쳐 두지 않고 이 안에 넣는다. 말풍선은 body 에 떠서 잘리지 않는다 */
.help-dot {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; min-height: 0; margin-left: 6px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim);
    font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle;
}
.help-dot:hover, .help-dot:focus-visible { color: var(--navy-600); border-color: var(--navy-500); background: var(--navy-50); outline: none; }
.help-pop {
    position: fixed; z-index: 10000; max-width: min(340px, calc(100vw - 16px));
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg);
    font-size: 12.5px; font-weight: 500; line-height: 1.6; text-align: left; white-space: normal;
}
.help-pop[hidden] { display: none; }
html[data-theme="dark"] .help-pop { border: 1px solid #33405a; }
.info-pop pre {
    margin: 8px 0 0; white-space: pre-wrap;
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    color: #dbe6f2;
}
/* 몇 자인지 보여준다. 이카운트 칸의 길이 제한에 걸릴 수 있어서다. */
.ecount-len { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 오른쪽 패널 ── */
.q-side { width: min(34rem, 40%); flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; }
.side-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 12px 10px;
}
.side-block h3 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px; font-weight: 700; color: var(--ink-mid);
}
.side-empty { margin: 0; font-size: 12.5px; color: var(--ink-dim); }

.rev-row {
    display: grid; grid-template-columns: 3rem 1fr auto;
    align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums;
}
.rev-row:last-child { border-bottom: none; }
.rev-row.current { color: var(--navy-700); font-weight: 700; }

/* 남길 기록은 한 덩어리로 묶어 둔다. 낱개 칸이 흩어져 있으면
   무엇까지가 "새로 적는 곳"인지 알기 어렵다. */
.contact-form {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px; margin-bottom: 12px;
    background: var(--sunken); border-radius: var(--radius-sm);
}
.contact-row { display: flex; gap: 6px; }
.contact-row input, .contact-row select {
    min-height: 32px; padding: 5px 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 12.5px; color: var(--ink);
}
.contact-row input { flex: 1; min-width: 0; }
.contact-form textarea {
    min-height: 3.6rem; padding: 7px 9px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit; font-size: 12.5px; line-height: 1.6; color: var(--ink); resize: vertical;
}
.contact-form .btn { min-height: 32px; font-size: 12.5px; }

.contact-list { display: flex; flex-direction: column; gap: 10px; max-height: 22rem; overflow-y: auto; }
.contact-item { padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.contact-item:last-child { border-bottom: none; }
.contact-meta { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 2px; }
.contact-note { font-size: 12.5px; line-height: 1.6; white-space: pre-line; }

/* ── 찾기 팝업 ── */
.pick-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pick-empty { padding: 28px 16px; text-align: center; font-size: 13.5px; color: var(--ink-dim); }
.pick-row {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 10px 14px; border: none; border-bottom: 1px solid var(--line-soft);
    background: var(--surface); font-family: inherit; text-align: left; cursor: pointer;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--navy-50); }
.pick-name { font-size: 14px; font-weight: 600; }
.pick-sub { font-size: 12.5px; color: var(--ink-dim); }

.price-pick { display: flex; flex-direction: column; gap: 8px; }
.price-pick-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 14px; color: var(--ink-mid); cursor: pointer;
}
.price-pick-row:hover { border-color: var(--navy-500); background: var(--navy-50); }
.price-pick-row b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 좁은 화면 ──
   격자를 버리고 줄마다 카드로 쌓는다. 휴대폰에서 열두 칸 표는 어차피 못 쓴다. */
@media (max-width: 1200px) {
    /* 세로로 쌓을 때는 옆 칸이 없으니 폭을 다 쓴다. align-items: flex-start 가 남아 있으면
       입력 칸이 제 크기(좁게)로 쪼그라든다 — 휴대폰에서 반쪽만 쓰던 원인. */
    .q-form-body { flex-direction: column; align-items: stretch; }
    .q-side { width: 100%; }
}

@media (max-width: 980px) {
    /* 표를 그대로 두고 옆으로 밀어 본다. 칸이 찌그러지지 않게 최소 너비를 준다. */
    .q-grid-head, .q-agrid-head, .q-grid, .qline, .qline-main, .aline-main {
        width: max-content; min-width: 100%;
    }
    .q-grid-wrap { -webkit-overflow-scrolling: touch; }
    .q-grid-head > span, .qc, .qout { min-width: 5.5rem; }
    /* 품목명·적요는 글이 길어 조금 더 준다 */
    .qc[data-label="품목명"], .qc[data-label="적요"] { min-width: 11rem; }
}

@media (max-width: 700px) {
    .party-box { grid-template-columns: 1fr; }
}

/* ── 조회 상자 ──────────────────────────────────────────────────────
   윗줄에는 매일 쓰는 것만 둔다: 구분 단추, 검색어, 검색.
   나머지 조건은 [상세] 뒤에 접어둔다. 늘 펼쳐두면 표가 그만큼 아래로 밀린다. */

.filter-main {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; flex-wrap: wrap;
}
/* 상자 자체가 좁아졌으므로 검색칸은 그 안을 채운다. */
.filter-main .search.grow { flex: 1; min-width: 10rem; margin: 0; }
/* 돋보기는 칸 안 왼쪽에 앉힌다. 칸 밖에 두면 줄이 그만큼 길어진다. */
.filter-main .search { position: relative; display: flex; align-items: center; }
.filter-main .search svg {
    position: absolute; left: 11px;
    width: 16px; height: 16px; color: var(--ink-dim); pointer-events: none;
}
.filter-main .search input {
    width: 100%; padding: 6px 11px 6px 32px; min-height: 32px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.filter-main .search input:focus { border-color: var(--navy-500); outline: none; }
.filter-main .btn { flex: none; }

/* 상세 조건은 표 위에 떠 있는 판이다(이카운트와 같다). 펼쳐도 목록이 아래로 밀리지 않는다. */
.filterbox { position: relative; }
.filterbox.detail-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.filter-detail {
    position: absolute; left: -1px; right: -1px; top: 100%;
    z-index: 45;
    display: flex; flex-direction: column;
    max-height: min(32rem, calc(100vh - 13rem));
    background: var(--surface);
    border: 1px solid var(--line);
    border-top-color: var(--line-soft);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
}
.filter-detail-body { overflow: auto; }
/* 판 아래 줄 — 찾기·초기화·닫기. 이카운트도 여기에 검색(F8) 이 있다. */
.filter-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--ground);
    border-radius: 0 0 11px 11px;
}
.filter-foot .spacer { flex: 1; }

[data-role="detail"] .caret { display: inline-block; transition: transform .15s ease; font-size: 11px; }
[data-role="detail"].on { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-700); }
[data-role="detail"].on .caret { transform: rotate(180deg); }

/* 하나만 고르는 단추 묶음. 체크박스 여러 개보다 조용하고, 지금 무엇이 켜져
   있는지 한눈에 보인다. */
.segment {
    display: inline-flex; flex: none;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); overflow: hidden;
}
.segment .seg {
    border: none; background: none; cursor: pointer;
    padding: 4px 10px; min-height: 27px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--ink-mid); white-space: nowrap;
}
.segment .seg + .seg { border-left: 1px solid var(--line); }
.segment .seg:hover { background: var(--navy-50); color: var(--navy-700); }
.segment .seg.on { background: var(--navy-700); color: #fff; }
.segment .seg.on:hover { background: var(--navy-800, var(--navy-700)); color: #fff; }

@media (max-width: 700px) {
    .filter-main .search.grow { min-width: 100%; order: -1; }
}

/* ── 표 화면 공통 ────────────────────────────────────────────────────
   견적서에서 쓰던 표를 거래처도 같이 쓴다. 화면마다 표가 달라 보이면
   어느 화면인지에 따라 눈이 다시 적응해야 한다. */

.q-table .cell-name { font-weight: 600; color: var(--ink); }
.q-table td.dim { color: var(--ink-dim); font-size: 12.5px; }
.q-table td .btn.small + .btn.small { margin-left: 6px; }

/* 사용중단한 거래처는 흐리게. 지운 것이 아니라 쓰지 않는 것뿐이므로 남겨는 둔다. */
.q-table tbody tr.dimmed td { color: var(--ink-dim); }
.q-table tbody tr.dimmed .cell-name { font-weight: 500; color: var(--ink-mid); }

/* 거래처 구분 알약. 딱지(.badge)와 같은 색을 쓴다. */
.tag.consumer { background: var(--navy-50);   color: var(--navy-700); }
.tag.dealer   { background: #fdecef;          color: var(--brand-red); }
.tag.partner  { background: #fbf0e2;          color: #8a5209; }
.tag.etc      { background: var(--line-soft); color: var(--ink-mid); }

/* 휴지통을 볼 때는 조회 조건이 의미가 없다. 지운 것은 다 보여준다. */
.filterbox.locked .filter-main .search,
.filterbox.locked .filter-detail { opacity: .4; pointer-events: none; }

/* 팝업 맨 위 상태 줄 — 전송됐는지, 쓰고 있는지, 그리고 다시 보내기. */
.form-state {
    display: flex; align-items: center; gap: 8px;
    margin: -6px 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.form-state .spacer { flex: 1; }

/* 발단추 줄에서 삭제·사용중단은 왼쪽, 취소·저장은 오른쪽에 둔다.
   되돌리기 어려운 것과 늘 누르는 것을 갈라놓는다. */
.modal-foot .spacer { flex: 1; }

.head-row .btn.active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
@media (max-width: 700px) {
    /* 라벨을 옆에 두면 칸이 너무 좁아진다. 이때만 위로 올린다. */
    .frow { grid-template-columns: 1fr; gap: 3px; min-height: 0; margin-bottom: 10px; }
    .frow > label { padding-top: 0; }
}

/* ============ 표 아래 단추 줄 ============
   이카운트는 조회 표 아래에 그 표로 할 수 있는 일을 늘어놓는다. 위쪽 머리에
   두면 표를 다 읽고 눈을 다시 위로 올려야 한다 — 고르는 곳이 표이므로
   고른 다음 할 일도 표 바로 아래 있는 편이 손이 짧다.

   이름을 .toolbar 로 하면 안 된다. 단가관리 위쪽 검색줄이 이미 그 이름을 쓴다. */
.tablebar {
    width: max-content; max-width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--sunken);
}
.tablebar .btn { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.tablebar .btn kbd { margin-left: 5px; }
.tablebar .tb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.tablebar .tb-count { font-size: 12.5px; font-weight: 600; color: var(--navy-700); }

/* 고른 줄이 없을 때는 단추를 눌러도 할 일이 없다. 눌리는 것처럼 보이면
   눌러 보고서야 아무 일도 안 일어난다는 걸 알게 된다. */
.tablebar .btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.tablebar .btn:disabled:hover { background: var(--surface); }
.tablebar .btn.danger-text:not(:disabled) { color: var(--danger); }

/* 머리칸 상자와 골라진 줄 */
.q-table th.rowno-head { padding-left: 0; padding-right: 0; text-align: center; }
.q-table th.rowno-head input { margin: 0; cursor: pointer; }
.q-table tbody tr.picked td { background: var(--navy-50); }
.q-table tbody tr.picked .rowno {
    background: var(--navy-700); color: #fff; font-weight: 700;
}
.q-table .rowno:hover { background: var(--navy-100); }

/* ============ 이력조회 ============ */
.hist-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.hist-bar .search.grow { flex: 1; min-width: 12rem; position: relative; display: flex; align-items: center; }
.hist-bar .search svg {
    position: absolute; left: 11px; width: 16px; height: 16px;
    color: var(--ink-dim); pointer-events: none;
}
.hist-bar .search input { width: 100%; padding-left: 34px; }
.hist-bar .tilde { color: var(--ink-dim); }
.hist-wrap { max-height: 58vh; overflow-y: auto; }

.hist-title {
    margin: 18px 0 8px;
    font-size: 13px; font-weight: 700; color: var(--ink-mid);
}
.hist-title:first-child { margin-top: 0; }

/* 바뀐 내용은 한 줄에 여러 항목이 온다. 항목마다 묶어두지 않으면
   "금액 100 → 200 수량 1 → 2" 가 한 문장처럼 읽힌다. */
.q-table td.hist-what { white-space: normal; line-height: 1.7; }
.hist-one {
    display: inline-block;
    margin: 1px 8px 1px 0;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--sunken);
    font-size: 12px;
    color: var(--ink-mid);
}
.hist-one b { color: var(--ink); font-weight: 700; margin-right: 5px; }
.hist-one .to { color: var(--ink-dim); }

/* ============ 방문 일정 ============
   한 주문에 여러 번 간다. 다섯 대 중 세 대만 먼저 나가면 나머지를 들고 다시
   가야 하고, 그게 언제인지는 옆 패널에서 늘 보여야 한다. */
.side-hint { margin: 0 0 9px; font-size: 12px; color: var(--ink-dim); line-height: 1.6; }
.visit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 9px; }

.visit-row {
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
/* 다녀온 줄은 눌러둔다. 남은 일정이 눈에 먼저 들어와야 한다. */
.visit-row.done { background: var(--sunken); opacity: .7; }

.visit-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.visit-head b { font-size: 12.5px; color: var(--navy-700); }
.visit-head select { min-height: 26px; padding: 2px 6px; font-size: 12px; flex: none; width: auto; }
.visit-done { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-mid); }
.visit-done input { margin: 0; }

.visit-del {
    margin-left: auto;
    border: none; background: none; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--ink-dim); padding: 0 2px;
}
.visit-del:hover { color: var(--danger); }

.visit-row > input[type="text"] { min-height: 30px; font-size: 12.5px; }

/* ── 스케줄 캘린더 ──────────────────────────────────────────────────
   색은 "무슨 일인가" 로만 가른다. 방문은 남색 계열(종류마다 조금씩), 제품완료는
   노랑(기다리는 중), 납기는 빨강(약속), 입고예정은 회색(우리 손 밖의 일). */

.cal-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-filters select { height: 30px; }
.cal-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cal-layout { display: flex; gap: 14px; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }
.cal-side {
    width: 250px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px;
}
.cal-side h3 { margin: 0 0 2px; font-size: 13.5px; }

/* 한 줄짜리 일정. 칸이 좁으니 말줄임. */
.ev {
    display: block; width: 100%; text-align: left; cursor: pointer;
    font: inherit; font-size: 11.5px; line-height: 1.35;
    padding: 2px 6px; border-radius: 4px; border: none; border-left: 3px solid;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev:hover { filter: brightness(.95); }
/* 방문: 제품(납품·설치) 빨강 · A/S 파랑 · 미팅 초록 — 예전 Apps Script 와 같은 색 */
.ev.visit            { background: #fdecec; color: #b91c1c; border-color: #dc2626; }
.ev.visit.k-product  { background: #fdecec; color: #b91c1c; border-color: #dc2626; }
.ev.visit.k-as       { background: #e5edff; color: #1d4ed8; border-color: #2563eb; }
.ev.visit.k-meet     { background: #dcfce7; color: #15803d; border-color: #16a34a; }
.ev.visit.done       { opacity: .5; text-decoration: line-through; }
.ev.visit[draggable="true"] { cursor: grab; }
.ev.ready    { background: var(--warn-bg);   color: var(--warn);    border-color: var(--warn); }
.ev.due      { background: #fce7f3; color: #be185d; border-color: #db2777; }   /* 납기 — 빨강(제품 방문)과 겹치지 않게 분홍 */
.ev.incoming { background: var(--line-soft); color: var(--ink-mid); border-color: var(--ink-dim); }
.cal-chip.ev { width: auto; padding: 4px 10px; font-size: 12.5px; }
.ev.dot { display: inline-block; width: 10px; height: 10px; padding: 0; margin-right: 6px; border-left-width: 10px; vertical-align: -1px; }

.cal-pend {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
    text-align: left; font: inherit; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--line-soft);
    padding: 8px 2px;
}
.cal-pend:hover { background: var(--navy-50); }
.cal-pend b { font-size: 13px; }
.cal-pend span { font-size: 12px; color: var(--ink-mid); }

.cal-dl { display: flex; gap: 10px; margin: 0 0 6px; font-size: 13.5px; }
.cal-dl dt { width: 4.5em; flex-shrink: 0; color: var(--ink-dim); }
.cal-dl dd { margin: 0; }
.cal-edit {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.cal-edit label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* 휴대폰 — 날짜별 목록 */

@media (max-width: 1100px) {
    .cal-layout { flex-direction: column; }
    .cal-side { width: 100%; box-sizing: border-box; }
}

/* ── 재직증명서 화면 ── */
.cert-list td { vertical-align: middle; }
.cert-list tr.dim td { color: var(--ink-dim); }
.cert-acts { white-space: nowrap; text-align: right; }
.cert-acts .btn + .btn { margin-left: 4px; }
.cert-card {
    max-width: 520px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 18px 20px;
}
.cert-card .btn { margin-top: 12px; }
.cert-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cert-opt input[type="text"] { width: 16rem; }

.cert-missing { color: var(--warn); margin-top: 8px; }
/* 칸이 열 개라 좁은 화면에서는 옆으로 밀어 본다. 주소 칸은 넉넉히. */

.cert-auth-note { margin: 0 0 12px; font-size: 13px; color: var(--navy-700); font-weight: 600; }

/* ── 회사 서류 ── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.doc-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.doc-thumb {
    height: 130px; border-radius: 4px; background: var(--ground);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.doc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-ext { font-size: 20px; font-weight: 800; color: var(--ink-dim); letter-spacing: 1px; }
.doc-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 12px; color: var(--ink-dim); }
.doc-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.doc-acts a.btn { text-decoration: none; }
.doc-drop {
    margin-top: 14px; padding: 18px; text-align: center; font-size: 13px; color: var(--ink-dim);
    border: 2px dashed var(--line); border-radius: var(--radius-sm);
}
.doc-drop.on { border-color: var(--navy-500); background: var(--navy-50); color: var(--navy-700); }
.doc-view { text-align: center; }
.doc-view img { max-width: 100%; height: auto; }
.doc-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 4px; }

/* ── 작업보호 ── */
.pr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-bar input[type="date"] { height: 30px; }
.pr-layout { display: flex; gap: 14px; align-items: flex-start; }
.pr-list {
    width: 300px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px;
}
.pr-list h3 { margin: 0 0 8px; font-size: 13.5px; }
/* 견적서 한 줄 + 품목 줄마다 체크. 짧게 — 설명은 마우스를 올리면 나온다. */
.pr-q { padding: 6px 2px; border-bottom: 1px solid var(--line-soft); }
.pr-q.off { opacity: .45; }
.pr-qhead { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; min-width: 0; }
.pr-qhead b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pr-qhead small { font-size: 11.5px; color: var(--ink-dim); flex: none; }
.pr-line { display: flex; align-items: center; gap: 6px; padding: 1px 0 1px 22px; font-size: 12.5px; color: var(--ink-mid); cursor: pointer; }
.pr-line input:disabled + span { text-decoration: line-through; }
.pr-paper { flex: 1; min-width: 0; overflow-x: auto; }
.pr-paper .printsheet.preview { border: 1px solid var(--line); border-radius: 4px; }
.pr [contenteditable="true"]:hover { background: #fffbe6; }
.pr [contenteditable="true"]:focus { outline: 2px solid var(--navy-500); outline-offset: -2px; background: #fff; }
@media (max-width: 1100px) {
    .pr-layout { flex-direction: column; }
    .pr-list { width: 100%; box-sizing: border-box; }
}
.pr-alert {
    margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--warn-bg); color: var(--warn); font-size: 13px;
}
tr.pr-soon td { background: #fffaf0; }
/* 메뉴 옆 알림 숫자 (작업보호 만료임박) */
.nav-item .nav-badge {
    margin-left: auto; flex: none;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
/* 작업보호 안내 문구는 여러 줄로 다 보여준다(.q-hint 는 원래 한 줄로 자른다). */
.q-hint.pr-hint { white-space: normal; overflow: visible; display: block; line-height: 1.55; }

/* ── 전표 검색창 (불러오기) — 이카운트 검색창 모양 ── */
.pk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-bar .pk-search { flex: 1; min-width: 14rem; position: relative; display: flex; align-items: center; }
.pk-bar .pk-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-dim); pointer-events: none; }
.pk-bar .pk-search input { width: 100%; padding-left: 32px; height: 34px; box-sizing: border-box; }
.pk-sub input[type="date"] { height: 30px; }
.pk-pager { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pk-pager .dim { margin-left: 6px; font-size: 12px; }
.pk-wrap { max-height: 58vh; overflow: auto; }
.pk-table { min-width: 860px; }
.pk-table thead th { position: sticky; top: 0; background: var(--ground); z-index: 1; }
.pk-table td { vertical-align: middle; }
.pk-table .pk-n { width: 2.6rem; text-align: center; color: var(--ink-dim); font-size: 12px; }
.pk-table .pk-items { max-width: 22rem; white-space: normal; line-height: 1.4; }
.pk-table .pk-protect { color: var(--danger); }
.pk-table tr.pk-row { cursor: pointer; }
.pk-table tr.pk-row:hover td { background: var(--navy-50); }
.pk-table tr.pk-row.picked td { background: var(--navy-50); }

/* ── 업무 보드 ── */
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.db-kpi {
    display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
    border-left: 4px solid var(--navy-500);
}
.db-kpi:hover { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }
.db-kpi span { font-size: 12.5px; color: var(--ink-mid); font-weight: 600; }
.db-kpi b { font-size: 24px; letter-spacing: -.02em; color: var(--ink); line-height: 1.25; }
.db-kpi small { font-size: 11.5px; color: var(--ink-dim); }
.db-kpi.warn { border-left-color: var(--warn); }
.db-kpi.warn b { color: var(--warn); }
.db-kpi.bad { border-left-color: var(--danger); }

.db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.db-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.db-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.db-card h2 { flex: 1; margin: 0; font-size: 14.5px; }
.db-count {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
    background: var(--navy-50); color: var(--navy-700); font-size: 12px; text-align: center;
}
.db-list { list-style: none; margin: 0; padding: 0; }
.db-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main right" "sub right";
    width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: none; border: none; border-top: 1px solid var(--line-soft); padding: 7px 4px; column-gap: 10px;
}
.db-row:hover { background: var(--navy-50); }
.db-row.today .db-main { color: var(--navy-700); font-weight: 700; }
.db-row.bad .db-sub { color: var(--danger); }
.db-main { grid-area: main; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-sub { grid-area: sub; font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-right { grid-area: right; align-self: center; font-size: 13px; white-space: nowrap; }
.db-empty { margin: 8px 0 2px; font-size: 13px; color: var(--ink-dim); }
.db-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.db-status button {
    display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 8px 10px; cursor: pointer; font: inherit;
    background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.db-status span { font-size: 12px; color: var(--ink-mid); }
.db-status b { font-size: 18px; }
@media (max-width: 1024px) { .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
    .db-grid { grid-template-columns: 1fr; }
    .db-kpi { padding: 10px 12px; }
    .db-kpi b { font-size: 19px; }
}

/* ── 업무 보드 · 피그마 "Analytics Dashboard" 모양(2026-09-22 시험 적용) ──
   틀(칸 배치)은 그대로 두고 겉모양만 바꾼다: 흰 카드 + 아주 옅은 테두리 + 큰 둥근 모서리 +
   번지는 그림자, 회색 작은 제목, 크고 굵은 숫자, 파랑(#1b59f8) 한 가지 강조색.
   마음에 들면 이 값들을 :root 로 올려 다른 화면에도 넓힌다. */
.db-kpis, .db-grid {
    --fg-blue: #0085ff;
    --fg-blue-soft: rgba(0, 133, 255, .08);
    --fg-stroke: #e1e6ef;
    --fg-text: #000;
    --fg-text-70: rgba(0, 0, 0, .7);
    --fg-text-50: rgba(0, 0, 0, .5);
    --fg-radius: 12px;
    --fg-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.db-kpis { gap: 18px; margin-bottom: 18px; }
.db-kpi {
    border: 1px solid var(--fg-stroke); border-radius: var(--fg-radius); box-shadow: var(--fg-shadow);
    padding: 18px 20px 20px; gap: 10px; transition: box-shadow .15s, transform .15s;
}
.db-kpi:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.db-kpi span { font-size: 13px; font-weight: 500; color: var(--fg-text-70); letter-spacing: -.01em; }
.db-kpi b { font-size: 24px; font-weight: 700; color: var(--fg-text); letter-spacing: -.02em; line-height: 1.2; }
.db-kpi small { font-size: 12px; font-weight: 500; color: var(--fg-text-50); }
/* 경고는 왼쪽 띠 대신 숫자 색과 작은 점으로 */
.db-kpi.warn, .db-kpi.bad { border-left-color: var(--fg-stroke); }
.db-kpi.warn b { color: var(--warn); }
.db-kpi.bad b { color: var(--danger); }
.db-kpi.warn span::after, .db-kpi.bad span::after {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-left: 6px; vertical-align: 2px; background: var(--warn);
}
.db-kpi.bad span::after { background: var(--danger); }

.db-grid { gap: 18px; }
.db-card {
    border: 1px solid var(--fg-stroke); border-radius: var(--fg-radius); box-shadow: var(--fg-shadow);
    padding: 18px 20px 16px;
}
.db-card header { margin-bottom: 10px; }
.db-card h2 { font-size: 13px; font-weight: 600; color: var(--fg-text-50); letter-spacing: -.01em; }
.db-count { background: var(--fg-blue-soft); color: var(--fg-blue); border-radius: 10px; font-weight: 600; }
/* "전체 보기" — 템플릿의 파란 글자 + 꺾쇠 */
.db-card header .btn {
    background: none; border: none; box-shadow: none; padding: 2px 0; height: auto; min-height: 0;
    color: var(--fg-blue); font-size: 12.5px; font-weight: 600;
}
.db-card header .btn::after { content: '›'; margin-left: 4px; font-size: 15px; line-height: 1; }
.db-card header .btn:hover { background: none; text-decoration: underline; }
.db-row { border-top: 1px solid var(--fg-stroke); padding: 9px 8px; border-radius: 10px; }
.db-list li:first-child .db-row { border-top: none; }
.db-row:hover { background: var(--fg-blue-soft); border-top-color: transparent; }
.db-list li:hover + li .db-row { border-top-color: transparent; }
.db-row.today .db-main { color: var(--fg-blue); }
.db-main { font-size: 13.5px; font-weight: 600; color: var(--fg-text); }
.db-sub { font-size: 12px; color: var(--fg-text-50); }
.db-right { font-size: 13px; color: var(--fg-text-70); }
.db-empty { color: var(--fg-text-50); }
.db-status { gap: 10px; }
.db-status button {
    background: #f8f9fc; border: 1px solid var(--fg-stroke); border-radius: 12px; padding: 10px 12px;
    transition: background .15s;
}
.db-status button:hover { background: var(--fg-blue-soft); }
.db-status span { font-size: 12px; font-weight: 500; color: var(--fg-text-70); }
.db-status b { font-size: 19px; font-weight: 700; color: var(--fg-text); }
@media (max-width: 480px) {
    .db-kpis, .db-grid { gap: 12px; }
    .db-kpi { padding: 12px 14px 14px; gap: 6px; }
    .db-kpi b { font-size: 20px; }
    .db-card { padding: 14px 14px 12px; border-radius: 14px; }
}

/* ── 미수금 ── */
.rv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-bar input[type="date"] { height: 32px; }
/* 찾는 칸은 조회 상자(.filter-main .search)와 같은 모양이다. 화면마다 다르게
   생길 이유가 없다(2026-09-30). 한없이 늘어나지 않게 최대 너비도 둔다. */
.rv-search { flex: 1 1 22rem; min-width: 14rem; max-width: 34rem; position: relative; display: flex; align-items: center; }
.rv-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ink-dim); pointer-events: none; }
.rv-search input {
    width: 100%; box-sizing: border-box;
    padding: 6px 11px 6px 34px; height: 34px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.rv-search input:focus { border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.rv-search input::placeholder { color: var(--ink-dim); }
.rv-total { font-size: 13.5px; color: var(--ink-mid); }
.rv-table .rv-chk { width: 2.2rem; text-align: center; }
.rv-table tr.rv-group { cursor: pointer; background: var(--ground); }
.rv-table tr.rv-group:hover td { background: var(--navy-50); }
.rv-table tr.rv-line.picked td { background: var(--navy-50); }
.rv-caret { display: inline-block; width: 1em; color: var(--ink-dim); }
.rv-indent { padding-left: 2.2em !important; }
.rv-item { max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════════════
   표 크기 조절과 반응형 (사용자 요청 2026-09-22)

   틀(상단 바 · 왼쪽 메뉴 · 본문)은 그대로 두고 크기만 맞춘다.
     1024px 이하  패드 가로   — 여백을 줄인다
      768px 이하  패드 세로   — 줄이 넘치면 접는다
      480px 이하  휴대폰      — 아이폰 SE(375×667)에서 가로로 넘치지 않게
   ════════════════════════════════════════════════════════════════════ */

/* 칸 너비: 머리글 오른쪽 끝을 잡고 끈다(ui.js). 손잡이가 없는 표에도 끝에 커서를 준다. */
.q-table thead th::after {
    content: ''; position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize;
}
.q-table thead th:last-child::after { display: none; }

/* 표 높이: 마우스로 쓰는 넓은 화면에서는 목록 상자 오른쪽 아래 모서리를 끌어 높이를 바꾼다.
   높이를 줄이면 머리글은 위에 붙어 있고 안에서 스크롤된다. */
@media (min-width: 861px) and (pointer: fine) {
    .content .table-wrap { resize: vertical; overflow: auto; }
    .content .table-wrap thead th { position: sticky; top: 0; z-index: 1; }
}

@media (max-width: 1024px) {
    .content { padding: 20px 18px 56px; }
    .overlay { padding: 12px; }
    .modal.lg, .modal.xl { max-width: none; }
}

@media (max-width: 768px) {
    .page-head { margin-bottom: 14px; }
    .page-head h1 { font-size: 20px; }
    .tablebar .tb-sep { display: none; }
    .filter-row { flex-wrap: wrap; row-gap: 6px; }
    .pk-bar .pk-search, .rv-search { min-width: 100%; order: 5; }
    .modal-body { overflow-x: auto; }          /* 인쇄 미리보기(A4 너비)는 옆으로 밀어 본다 */
    .db-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media (max-width: 480px) {
    .content { padding: 12px 10px 40px; }
    .page-head h1 { font-size: 18.5px; }
    .page-head p { font-size: 12.5px; }
    .head-row { gap: 8px; }

    /* 단추 묶음(전체·진행중…)은 한 줄로 두고 옆으로 민다. 줄이 바뀌면 누를 곳을 잃는다. */
    .segment { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .segment .seg { flex: none; }
    .head-row .segment { width: 100%; }

    /* 입력 창: 한 줄에 칸 하나 */
    .fgrid { grid-template-columns: 1fr; }

    /* 표 아래 단추 줄: 두 줄로 나눠 손가락으로 누르기 쉽게 */
    .tablebar { gap: 5px; padding: 7px; }
    .tablebar .btn { flex: 1 1 calc(50% - 5px); min-height: 34px; }
    .tablebar .spacer, .tablebar .tb-count { flex-basis: 100%; }

    .modal-foot { flex-wrap: wrap; gap: 6px; }
    .modal-foot .spacer { flex-basis: 100%; height: 0; }
    .modal-foot .btn { flex: 1 1 auto; min-height: 36px; }

    .q-table tbody td { padding: 8px 9px; font-size: 12.5px; }
    .q-table thead th { padding: 8px 9px; }

    .pr-bar, .rv-bar, .pk-bar, .cal-filters { gap: 6px; }
    .pr-bar input[type="date"], .rv-bar input[type="date"], .pk-sub input[type="date"] { flex: 1 1 8rem; min-width: 0; }

    .db-status button { min-width: 64px; }

    /* 창은 화면 가득(위 1024px 규칙의 여백을 되돌린다). */
    .overlay { padding: 0; }
    /* 휴대폰에는 키보드가 없다. F2·F8 같은 단축키 표시는 자리만 먹는다. */
    kbd { display: none !important; }
    .q-items-head .q-hint, .q-items-head .kbd-help { display: none; }
}
.rv-table { min-width: 720px; }

/* ── 상세 검색 칸 (이카운트 조회 화면처럼) ── */
/* 칸은 한 줄에 하나씩. 입력칸은 화면 끝까지 늘이지 않는다 — 판이 통째로 커 보인다. */
.adv {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px;
    padding: 11px 13px; border-bottom: 1px solid var(--line-soft);
}
.adv-row { display: grid; grid-template-columns: 6.4rem minmax(0, 25rem); align-items: center; gap: 9px; margin: 0; }
.adv-label { font-size: 12.5px; font-weight: 600; color: var(--ink-mid); }
.adv select, .adv input {
    height: 30px; width: 100%; box-sizing: border-box;
    padding: 4px 9px;
    border: 1px solid #dfe4ec; border-radius: 8px;
    background: var(--surface);
    font: inherit; font-size: 13px; color: var(--ink);
    transition: border-color .12s, box-shadow .12s;
}
.adv select:hover, .adv input:hover { border-color: #c3ccdb; }
.adv select:focus, .adv input:focus {
    border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.adv input::placeholder { color: #b6bcc7; }
.adv-text { position: relative; display: flex; align-items: center; }
.adv-text svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--ink-dim); pointer-events: none; }
.adv-text input { padding-left: 28px; }
.adv-on { font-size: 12px; font-weight: 600; color: var(--navy-700); }
.range-btns .btn.on { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

@media (max-width: 480px) {
    .adv-row { grid-template-columns: 5.6rem minmax(0, 1fr); }
    .range-btns { display: flex; flex-wrap: wrap; gap: 4px; }
}

/* ── 진행상태 색 (ui.js 의 STATUS_COLOR 가 이름을 정한다) ── */
.tag.st-gray   { background: #eef2f6; color: #475569; border-color: #dfe5ec; }
.tag.st-sky    { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.tag.st-blue   { background: #e5edff; color: #1d4ed8; border-color: #c7d7fe; }
.tag.st-indigo { background: #e8e7ff; color: #4338ca; border-color: #d0cdfd; }
.tag.st-amber  { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.tag.st-orange { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.tag.st-yellow { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.tag.st-purple { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }
.tag.st-teal   { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.tag.st-green  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tag.st-red    { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
/* 업무 보드의 상태별 건수 단추도 같은 색 띠를 단다 */
.db-status button[class*="st-"] { border-left-width: 4px; }
.db-status button.st-sky { border-left-color: #0369a1; }   .db-status button.st-amber { border-left-color: #b45309; }
.db-status button.st-indigo { border-left-color: #4338ca; } .db-status button.st-orange { border-left-color: #c2410c; }
.db-status button.st-purple { border-left-color: #7e22ce; } .db-status button.st-teal { border-left-color: #0f766e; }
.db-status button.st-yellow { border-left-color: #a16207; } .db-status button.st-blue { border-left-color: #1d4ed8; }
.db-status button.st-gray { border-left-color: #475569; }

/* ════════════════════════════════════════════════════════════════════
   피그마 "ERP B2B Design Kit" 겉모양 (2026-09-22)
   흰 상단 바, 은은한 회청색 왼쪽 메뉴, 검정 주 단추, 파랑 강조, 파스텔 상태 딱지.
   크기와 배치는 위에서 정한 그대로 두고 색·선·모서리만 덮어쓴다.
   ════════════════════════════════════════════════════════════════════ */

/* 상단 바 — 남색 → 흰 바탕 + 아래 가는 선 */
.topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.topbar-logo { color: var(--ink); }
.topbar-title { color: var(--ink); border-left-color: var(--line); }
.topbar-user { color: var(--ink-mid); }
.topbar-link { color: var(--ink-mid); font-weight: 500; }
.topbar-link:hover { background: var(--line-soft); color: var(--ink); }
.topbar-menu-btn { color: var(--ink); }
.topbar-menu-btn:hover { background: var(--line-soft); }
.sidebar-backdrop { background: rgba(10, 13, 20, .35); }

/* 왼쪽 메뉴 — 본문(#f8f9fc)보다 한 톤 어두운 회청색. 고른 메뉴는 흰 칸 + 파란 띠 */
.sidebar { background: var(--side); border-right: 1px solid var(--line); }

.nav-item { position: relative; border-radius: 8px; color: #3f444d; font-weight: 500; }
.nav-item svg { color: #7a7e86; }
.nav-item:hover { background: rgba(17, 17, 17, .05); color: var(--ink); }
.nav-item.active {
    background: var(--surface); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line);
}
.nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--navy-500);
}
.nav-item.active svg { color: var(--navy-500); }
.nav-item .soon-dot { background: rgba(17, 17, 17, .06); }

/* 단추 — 주 단추는 검정, 보조는 흰 바탕 + 옅은 테두리 + 아주 얕은 그림자 */
.btn { border-radius: 8px; font-weight: 500; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: #f4f5f6; border-color: var(--line); }
.btn.ghost:hover { background: #f4f5f6; }
.btn.danger:hover { background: #981b25; }

/* 상태 딱지 — 템플릿처럼 모서리 4px, 테두리 없는 파스텔 */
.tag { border-radius: 4px; border-color: transparent; font-weight: 600; letter-spacing: .01em; }
.badge { border-radius: 4px; }
.tag.st-gray   { background: #eef0f3; color: #4b5563; border-color: transparent; }
.tag.st-sky    { background: #d0f4ff; color: #093e8c; border-color: transparent; }
.tag.st-blue   { background: #dde9ff; color: #1d4ed8; border-color: transparent; }
.tag.st-indigo { background: #e7e7ff; color: #1f1f5e; border-color: transparent; }
.tag.st-amber  { background: #fbf5c4; color: #8b5401; border-color: transparent; }
.tag.st-orange { background: #ffe7d0; color: #b6491a; border-color: transparent; }
.tag.st-yellow { background: #fff9d4; color: #8a6a10; border-color: transparent; }
.tag.st-purple { background: #f3e8ff; color: #6b21a8; border-color: transparent; }
.tag.st-teal   { background: #d5f5ef; color: #0f6b5c; border-color: transparent; }
.tag.st-green  { background: #d7ffd0; color: #0a7a08; border-color: transparent; }
.tag.st-red    { background: #ffdfdf; color: #8c0909; border-color: transparent; }

/* 입력칸에 들어가면 파란 테두리 + 옅은 파란 번짐 */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }

/* 로그인 — 짙은 남색 대신 밝은 바탕 위 흰 카드 */
.auth {
    background:
        radial-gradient(900px 480px at 50% -10%, #e6f2ff 0%, transparent 65%),
        var(--ground);
}
.auth-card { border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06); }
.auth-foot { color: var(--ink-dim); }

/* ════════════════════════════════════════════════════════════════════
   입력칸 · 큰 단추 · 설정 카드 (2026-09-23 사용자 요청)
   ════════════════════════════════════════════════════════════════════ */

/* 전표 상세·회사 정보의 입력칸 — 기본 네모에서 벗어나게 한 겹 다듬는다.
   .q-form 안에만 걸려 있던 규칙을 .frow 전체로 넓혔다(회사 정보도 같은 칸을 쓴다). */
.frow input, .frow select, .frow textarea {
    width: 100%;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    background: var(--surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.frow textarea { line-height: 1.6; resize: vertical; padding: 7px 9px; }
.frow input:hover:not(:disabled):not([readonly]),
.frow select:hover:not(:disabled),
.frow textarea:hover:not([readonly]) { border-color: #c3ccdb; }
.frow input:focus, .frow select:focus, .frow textarea:focus {
    border-color: var(--navy-500); outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.frow input::placeholder, .frow textarea::placeholder { color: #b6bcc7; }
.frow input:disabled, .frow input[readonly], .frow select:disabled, .frow textarea[readonly] {
    background: #f6f7fa; color: var(--ink-mid); border-color: var(--line-soft);
}

/* ── 날짜 칸 (2026-09-29) ──
   브라우저 기본 모양은 글자와 달력 그림의 색·크기가 제각각이라 줄이 들쑥날쑥해 보인다.
   숫자는 고정폭으로 세우고, 달력 그림은 평소 흐리게 두었다가 마우스를 올리면 진해진다. */
.frow input[type="date"], .filter-row input[type="date"], .adv input[type="date"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    padding-right: 6px;
}
.frow input[type="date"]::-webkit-calendar-picker-indicator,
.filter-row input[type="date"]::-webkit-calendar-picker-indicator,
.adv input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .45; cursor: pointer; padding: 2px; border-radius: 4px;
    transition: opacity .12s, background .12s;
}
.frow input[type="date"]:hover::-webkit-calendar-picker-indicator,
.filter-row input[type="date"]:hover::-webkit-calendar-picker-indicator,
.adv input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; background: var(--line-soft); }
.frow input[type="date"]:disabled::-webkit-calendar-picker-indicator,
.frow input[type="date"][readonly]::-webkit-calendar-picker-indicator { opacity: .25; cursor: default; }
/* 표 안의 입력칸(직원 목록 등)도 같은 모양으로 */
.q-table td > input[type="text"], .q-table td > input[type="date"] {
    min-height: 30px; padding: 4px 9px;
    border: 1px solid #dfe4ec; border-radius: 8px; background: var(--surface);
    font-family: inherit; font-size: 13px; color: var(--ink); width: 100%;
}
.q-table td > input:focus {
    border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* 새 전표를 만드는 단추는 화면에서 제일 먼저 눈에 들어와야 한다 — 다른 단추와 다르게 둔다. */
.btn.cta {
    padding: 9px 17px; min-height: 38px; border-radius: 10px;
    font-size: 14px; font-weight: 600; letter-spacing: -.01em;
    background: var(--navy-600);   /* 그라데이션은 뺐다(2026-10-12 사용자 요청) — 한 가지 색으로 */
    border-color: #1b46bd;
    box-shadow: 0 1px 2px rgba(29, 78, 216, .30), 0 4px 12px rgba(29, 78, 216, .18);
}
.btn.cta:hover { background: var(--navy-700); }
.btn.cta:active { background: var(--navy-800); transform: translateY(1px); box-shadow: 0 1px 2px rgba(29, 78, 216, .3); }
.btn.cta kbd {
    background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38);
    color: #fff; font-size: 10.5px;
}
.btn.cta.small { padding: 6px 13px; min-height: 32px; font-size: 13px; }

/* 상단 바의 담당자 — 로그아웃 옆에 이름을 또렷하게 */
.topbar-user {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.topbar-user .ava {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--navy-50); color: var(--navy-600);
    font-size: 12px; font-weight: 700;
}
.topbar-user .who small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-dim); line-height: 1.2; }
.topbar-user .who { line-height: 1.25; }

/* 설정 화면 — 한 덩어리로 늘어놓지 않고 주제별 카드로 나눈다 */
.set-card {
    max-width: 56rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 18px 20px 20px;
    margin-bottom: 16px;
}
.set-card > h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.set-card > p.desc { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-dim); }
.set-card > h2 + .fgrid, .set-card > p.desc + .fgrid, .set-card > p.desc + .table-wrap { margin-top: 14px; }
.set-card .fgrid { max-width: none; }
.set-card .fsec:first-child { margin-top: 0; }
.set-foot { max-width: 56rem; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
@media (max-width: 700px) {
    .set-card { padding: 14px 14px 16px; border-radius: 10px; }
}

/* 진행 상태는 상세 판 밖에 둔다(2026-09-23) — 이카운트도 목록 바로 위에 늘 보이게 둔다. */
.statusbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 0;
}
/* 건수 줄을 없앤 뒤로 표가 위 상자에 붙어 있었다(2026-09-23) — 한 줄 띄운다. */
.statusbar + .table-wrap, .filterbox + .table-wrap { margin-top: 12px; }
/* 목록 상자 너비는 묶어두지 않는다(2026-09-23 다시 정함) — 이카운트도 창을 넓히면 표가
   그만큼 늘어난다. 늘어난 자리는 거래처·품목 칸이 나눠 갖는다(js/grid.js 의 grow). */
.statusbar .filter-label { width: auto; flex: none; font-size: 12.5px; }
.statusbar .checks { gap: 6px; }
.statusbar .checks label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); font-size: 12.5px; color: var(--ink-mid); cursor: pointer;
}
.statusbar .checks label:hover { border-color: var(--navy-100); background: var(--navy-50); }
.statusbar .checks label:has(input:checked) {
    background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-700); font-weight: 600;
}
.statusbar .checks .sep { padding-left: 11px; border-left: 1px solid var(--line); border-radius: 999px; }
.statusbar .checks input { width: 14px; height: 14px; }
@media (max-width: 700px) {
    .statusbar { margin-top: 10px; }
    .statusbar + .table-wrap, .filterbox + .table-wrap { margin-top: 10px; }
    .statusbar .checks label { padding: 4px 9px; font-size: 12px; }
}

/* ── 설정 화면 덩어리 접기 (2026-09-23) ──
   회사 정보 + 담당자 연락처 / 직원 정보 두 덩어리. 제목 줄을 누르면 접힌다. */
.set-card { padding: 0; }
.set-head {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    padding: 15px 20px; border: none; background: none; cursor: pointer;
    font-family: inherit; text-align: left; border-radius: 12px;
}
.set-head:hover { background: var(--line-soft); }
.set-title { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.set-desc { flex: 1; font-size: 12.5px; color: var(--ink-dim); }

/* 켬/끔 스위치 — 덩어리를 펴고 접는다(사용자 요청 2026-09-28) */
.set-switch {
    flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px;
    background: var(--navy-600); transition: background .15s ease;
}
.set-switch::after {
    content: ''; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: left .15s ease;
}
.set-card:not([open]) .set-switch { background: #c9ced8; }
.set-card:not([open]) .set-switch::after { left: 3px; }
.set-head:focus-visible .set-switch { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.set-card:not([open]) .set-body { display: none; }
.set-body { padding: 16px 20px 20px; border-top: 1px solid var(--line-soft); }
.set-sub {
    margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-mid);
    padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.set-sub small { font-weight: 500; color: var(--ink-dim); margin-left: 7px; }
.fgrid + .set-sub { margin-top: 26px; }
/* 칸 사이가 너무 붙어 있었다 — 설정 화면은 목록과 달리 여유를 준다 */
.set-body .fgrid { gap: 14px 32px; align-items: start; }
.set-body .frow { min-height: 34px; align-items: start; grid-template-columns: 7rem minmax(0, 1fr); }
.set-body .frow > label { font-size: 13px; padding-top: 8px; line-height: 1.35; }
.set-body .frow input, .set-body .frow select { min-height: 34px; }
/* 안내문은 칸 아래에. 줄이 길어져도 칸과 이름표는 위쪽 기준으로 맞춰 둔다. */
.set-body .field-hint { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-dim); }
/* 담당자: 전화와 이메일을 한 줄에 나란히 */
.emp-row.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
/* 담당자 연락처: 전화 · 이메일 · 생년월일(읽기만, 2026-10-30) */
.emp-row.three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 9.5rem; gap: 8px; }
@media (max-width: 700px) { .emp-row.two, .emp-row.three { grid-template-columns: 1fr; } }

/* 직원은 옆으로 긴 표 대신 사람마다 한 칸 — 표로 두면 칸이 아홉이라 늘 옆으로 밀어야 했다 */
.staff-card {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px 14px; margin-bottom: 12px; background: var(--sunken);
}
.staff-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.staff-head b { font-size: 13.5px; }
.staff-head .dim { font-size: 12px; color: var(--ink-dim); }
.staff-head .spacer { flex: 1; }
.staff-card .fgrid { gap: 9px 24px; }
.staff-card .frow { grid-template-columns: 4.6rem minmax(0, 1fr); }
@media (max-width: 700px) {
    .set-head { padding: 13px 14px; }
    .set-body { padding: 14px 14px 16px; }
    .set-body .fgrid { gap: 10px; }
}

/* 계정 관리 — 임시 비밀번호는 한 번만 보이므로 눈에 잘 띄게 */
.temp-pw {
    display: flex; align-items: center; gap: 10px; margin: 6px 0 10px;
    padding: 12px 14px; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--navy-50);
}
.temp-pw code {
    flex: 1; font-family: var(--mono); font-size: 18px; font-weight: 700;
    letter-spacing: .06em; color: var(--navy-700); user-select: all;
}
/* 로그인 화면의 초기화 요청 줄 */
.auth-help { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-dim); }
.auth-help .link-btn { font-size: 12.5px; color: var(--navy-600); }

/* ── 단가 칸의 Fn 단추 (2026-09-30) ──
   휴대폰에는 F6 키가 없다. 이카운트도 단가 칸 안에 같은 단추를 둔다. */
.qprice { position: relative; display: block; }
.qprice .qcell { padding-right: 30px; }
.qfn {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    height: 20px; padding: 0 5px;
    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
    font-family: inherit; font-size: 10px; font-weight: 700; color: var(--ink-dim);
    cursor: pointer; line-height: 1;
}
.qfn:hover { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-600); }
.qfn:active { background: var(--navy-100); }

/* ── 방문 일정 줄 (2026-09-30 손봄) ──
   연락 기록 칸(.contact-form)과 같은 모양으로 맞춘다 — 옆에 나란히 서는 두 덩어리가
   서로 다르게 생기면 한쪽이 덜 만든 것처럼 보인다. 바깥은 눌린 바탕, 안의 칸은 흰색.
   시각은 시·분 고르는 칸 둘이다. 분은 00·30 만 — 11:37 같은 시각은 쓸 일이 없다. */
.visit-row {
    padding: 9px 10px;
    border: none;
    background: var(--sunken);
    border-radius: var(--radius-sm);
}
.visit-row.done { background: var(--line-soft); }
.visit-head { gap: 6px; margin-bottom: 6px; }
.visit-head b {
    padding: 1px 7px; border-radius: 999px;
    background: var(--navy-50); color: var(--navy-700); font-size: 11.5px;
}

/* 방문 줄 안의 모든 입력칸은 한 벌이다. 날짜·시·분·메모가 제각각이면
   줄 하나가 네 가지 모양이 된다. */
.visit-row input[type="date"],
.visit-row input[type="text"],
.visit-head select,
.visit-time select {
    box-sizing: border-box;
    min-height: 30px; padding: 4px 7px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit; font-size: 12px; color: var(--ink);
}
.visit-row input:focus, .visit-row select:focus {
    border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 3px var(--focus-ring);
}
/* 날짜칸은 글자만큼만. 남는 폭은 시·분이 아니라 여백으로 둔다. */

/* 메모는 줄 끝까지. 반쪽짜리 칸에 한 줄을 적게 하면 적다 말게 된다. */
.visit-row > input[type="text"] { display: block; width: 100%; }
.visit-head select { flex: none; width: auto; padding-right: 4px; }
.visit-time { display: flex; gap: 4px; flex: 0 0 auto; }
.visit-time select { width: auto; padding-right: 4px; }
.visit-done { font-size: 12px; color: var(--ink-mid); white-space: nowrap; }
.visit-del { border-radius: 6px; }
.visit-del:hover { background: var(--danger-bg); color: var(--danger); }

/* ── 창 머리의 표시 (2026-10-07) ──
   제목 옆에 붙는 작은 알약. 옆 패널의 '어디서 왔나'·'이카운트' 상자를 여기로 올렸다.
   색이 상태다 — 회색은 없음/안 보냄, 파랑은 이어져 있음, 초록은 보냄, 빨강은 실패. */
.modal-head.has-badges { position: relative; z-index: 3; }
.modal-head.has-badges h2 { flex: none; }
.head-badges { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.head-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink-dim);
    font-size: 11.5px; font-weight: 600; line-height: 1;
    cursor: help; user-select: none; -webkit-user-select: none;
}
.head-badge svg { width: 14px; height: 14px; flex: none; }
.head-badge.tone-on  { color: var(--navy-600); border-color: var(--navy-100); background: var(--navy-50); }
.head-badge.tone-ok  { color: #15803d; border-color: #bbe5c8; background: #e9f9ee; }
.head-badge.tone-bad { color: var(--danger); border-color: #f3c2c2; background: var(--danger-bg); }
.head-badge:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.head-pop {
    display: none;
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 20;
    width: max-content; max-width: 22rem;
    padding: 10px 12px;
    background: var(--navy-900); color: #fff;
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: 12px; font-weight: 500; line-height: 1.6; text-align: left;
    cursor: auto; white-space: normal;
}
.head-badge:hover .head-pop, .head-badge:focus .head-pop { display: block; }
.hp-title { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #9fb4d0; letter-spacing: .02em; }
.hp-row { display: flex; justify-content: space-between; gap: 18px; }
.hp-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-note { display: block; margin-top: 4px; color: #c9d6e6; }
@media (max-width: 560px) {
    /* 좁은 화면에서는 글자를 떼고 아이콘만 둔다. 제목이 먼저다. */
    .head-badge .hb-text { display: none; }
    .head-badge { padding: 0 6px; }
    .head-pop { max-width: 72vw; }
}

/* ── 접었다 펴는 옆 상자 (방문 일정) ── */
.side-fold > summary {
    display: flex; align-items: center; gap: 6px;
    list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary h3 { margin: 0; }
.side-fold[open] > summary { margin-bottom: 9px; }
.fold-count {
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--navy-50); color: var(--navy-700);
    font-size: 11px; font-weight: 700;
}
.fold-count:empty { display: none; }
.fold-caret { margin-left: auto; color: var(--ink-dim); font-size: 12px; transition: transform .15s ease; }
.side-fold:not([open]) .fold-caret { transform: rotate(-90deg); }
/* 설명 풍선은 아래로 편다 — 제목이 상자 맨 위라 위로 띄우면 잘린다. */
.side-fold > summary .info-pop { bottom: auto; top: calc(100% + 8px); max-width: 18rem; white-space: normal; }

/* ── 방문 일정 한 줄: 1차 · 종류 · 다녀옴 · 날짜 · 시 · 분 (2026-10-07) ──
   예전에는 날짜와 시각이 둘째 줄에 있었다. 한 줄로 올리되, 옆 상자가 좁으면
   날짜부터 다음 줄로 넘어간다 — 칸을 찌그러뜨리는 것보다 낫다. */
.visit-head { flex-wrap: wrap; row-gap: 5px; }
.visit-head input[type="date"] { flex: 0 1 8.2rem; min-width: 7.4rem; }
.visit-head .visit-del { margin-left: auto; }

/* 견적 목록의 문의 경로 꼬리표 — 본사로 온 문의인지 직접 온 문의인지(2026-10-07). */
.src-tag {
    display: inline-block; margin-left: 3px; padding: 0 5px;
    border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: 1px;
}
.src-tag.hq     { background: #fff3d6; color: #9a6400; }
.src-tag.direct { background: var(--navy-50); color: var(--navy-700); }
/* 창 머리의 문의 경로 표시 — 본사는 목록 꼬리표와 같은 노랑. */
.head-badge.tone-hq { color: #9a6400; border-color: #f1dca6; background: #fff3d6; }
.head-badges > .head-badge { cursor: help; }

/* 창 머리 풍선 안에 옛 옆 상자의 내용을 그대로 넣을 때(발주서·구매·견적의뢰서).
   어두운 바탕에 맞춰 글자색만 바꾼다. */
.hp-html h3 { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: #9fb4d0; letter-spacing: .02em; border: none; padding: 0; }
.hp-html .rev-row { display: flex; justify-content: space-between; gap: 18px; padding: 0; border: none; background: none; color: #fff; font-size: 12px; }
.hp-html .rev-row span:last-child, .hp-html .rev-row b { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.hp-html .side-empty, .hp-html .side-hint { margin: 4px 0 0; padding: 0; color: #c9d6e6; font-size: 12px; line-height: 1.6; text-align: left; }

/* ── 캘린더에 직접 넣는 일정과 휴가 (2026-10-07) ──
   전표에서 온 것들과 헷갈리지 않게 보라(미팅·기타)와 청록(휴가)을 쓴다. */
.ev.event { background: #f1e9ff; color: #6d28d9; border-color: #7c3aed; }
.ev.leave { background: #dff6f4; color: #0f766e; border-color: #0d9488; }

/* ── 휴가 화면 ── */
.lv-wait {
    margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--warn-bg); color: var(--warn); font-size: 13.5px;
}
.lv-usedbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; font-size: 13px; }
.lv-usedlabel { color: var(--ink-dim); font-size: 12.5px; }
.lv-used { padding: 3px 9px; border-radius: 999px; background: var(--sunken); color: var(--ink-mid); }
.lv-used b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.lv-table .lv-reason { max-width: 22rem; white-space: normal; }
.lv-table .lv-reason small { display: block; color: var(--ink-dim); font-size: 12px; }
.lv-table .lv-actions { white-space: nowrap; text-align: right; }
.lv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ═══════════ 시안 A — 어두운 메뉴와 보라 포인트 (2026-10-08) ═══════════
   위쪽 줄은 흰 바탕 그대로 둔다. 로고가 빨강이라 어두운 바탕에서는 묻힌다. */
.sidebar { background: var(--side); border-right: none; }

.nav-item { color: #c9c7da; font-size: 14px; }
.nav-item svg { color: #8f8da6; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item:hover svg { color: #fff; }
/* 고른 메뉴는 색만으로 표시한다 — 옛 밝은 메뉴의 흰 테두리(box-shadow)와 왼쪽 띠가 남아 있었다(2026-10-08). */
.nav-item.active { background: var(--navy-600); color: #fff; font-weight: 700; box-shadow: none; }
.nav-item.active::before { content: none; }
.nav-item.active svg { color: #fff; }
.nav-item.soon, .nav-item.soon:hover { color: #6f6d85; background: transparent; }
.nav-item .soon-dot { background: rgba(255, 255, 255, .08); color: #9a98b0; }
/* 어두운 바탕에서 스크롤 막대가 하얗게 뜨지 않게 */
.sidebar { scrollbar-color: #3a3950 transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #3a3950; border-radius: 4px; }

/* 진행 상태 꼬리표는 알약 모양에 점 하나. 색만으로 가르지 않게 점이 한 번 더 짚어 준다. */
.tag[class*="st-"] { border-radius: 999px; padding: 2px 10px 2px 8px; }
.tag[class*="st-"]::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px;
    border-radius: 50%; background: currentColor; vertical-align: 1px;
}

/* 상자들 — 선을 옅게, 그림자를 살짝. 본문 바탕(연보라 회색) 위에 흰 상자가 떠 보인다. */
.table-wrap, .set-card, .db-kpi, .filterbox { box-shadow: 0 1px 2px rgba(28, 27, 41, .05); }
.modal { box-shadow: 0 18px 50px rgba(28, 27, 41, .22); }

/* ── 직원별 메뉴 권한 창 (2026-10-08) ── */
.perm-all { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font-size: 12.5px; color: var(--ink-dim); }
.perm-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.perm-group { padding: 6px 12px; background: var(--sunken); font-size: 11.5px; font-weight: 700; color: var(--ink-dim); border-top: 1px solid var(--line); }
.perm-group:first-child { border-top: none; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.perm-pick { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.perm-opt { position: relative; cursor: pointer; }
.perm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.perm-opt span { display: block; padding: 4px 12px; font-size: 12.5px; color: var(--ink-mid); border-right: 1px solid var(--line); }
.perm-opt:last-child span { border-right: none; }
/* 고른 값은 색으로 가른다 — 닫음은 빨강, 보기는 노랑, 고치기는 보라. 한눈에 닫힌 줄이 보여야 한다. */
.perm-opt.lv-none input:checked + span { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.perm-opt.lv-view input:checked + span { background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.perm-opt.lv-edit input:checked + span { background: var(--navy-50); color: var(--navy-700); font-weight: 700; }
.perm-opt input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--navy-500); }

/* ── 권한 설정 화면: 직원 × 메뉴 표 (2026-10-08) ── */
.pm-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-mid); }
.pm-legend .pm-cell { margin-left: 10px; cursor: default; }
.pm-legend .pm-cell:first-child { margin-left: 0; }
.pm-dirty { font-size: 12.5px; color: var(--warn); }
.pm-table th { text-align: center; white-space: nowrap; }
.pm-table th.pm-group { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); }
.pm-table th.pm-menu { font-size: 12px; font-weight: 600; }
.pm-table td { text-align: center; padding: 6px 5px; }
.pm-table .pm-who { text-align: left; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.pm-table thead .pm-who { background: var(--sunken); }
.pm-table .pm-who small { display: block; font-size: 11.5px; color: var(--ink-dim); font-weight: 400; }
.pm-cell {
    display: inline-block; min-width: 3.6rem; padding: 4px 8px; border-radius: 6px;
    border: 1px solid transparent; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer;
}
.pm-cell.lv-none { background: var(--danger-bg); color: var(--danger); }
.pm-cell.lv-view { background: var(--warn-bg); color: var(--warn); }
.pm-cell.lv-edit { background: var(--navy-50); color: var(--navy-700); }
button.pm-cell:hover { filter: brightness(.96); border-color: currentColor; }
/* 고쳤지만 아직 저장 안 한 칸 — 테두리로 짚어 준다 */
.pm-cell.changed { border-color: currentColor; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }
.pm-cell.fixed { cursor: default; opacity: .55; }
.pm-table .pm-bulk { white-space: nowrap; }
.pm-all { border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 2px 6px; margin: 0 1px; font-family: inherit; font-size: 11px; color: var(--ink-dim); cursor: pointer; }
.pm-all:hover { color: var(--ink); border-color: var(--ink-dim); }
/* 좁은 화면에서 칸이 잘리지 않게 — 표를 글자만큼 넓히고 옆으로 밀어 본다.
   공통 목록 표(.q-table)는 칸 너비를 고정하고 넘치는 글자를 자르는데, 여기는 "닫음/보기/고치기"
   세 글자가 다 보여야 뜻이 통한다. */
.pm-table { table-layout: auto; width: max-content; min-width: 100%; }
.pm-table th, .pm-table td { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; }
.pm-table .pm-who b { display: block; }

/* ── 확정(잠금)된 거래명세서 (2026-10-08) ── */
.lock-mark { display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 4px; background: #e9f9ee; color: #15803d; font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: 1px; }
.lock-note { font-size: 12px; color: var(--ink-dim); margin-right: 4px; }
/* 잠긴 입력 칸은 읽는 종이처럼 보이게 — 바탕을 한 겹 누르고 글자는 또렷하게 둔다. */
.q-form.locked .q-form-main input, .q-form.locked .q-form-main select, .q-form.locked .q-form-main textarea { background: var(--sunken); color: var(--ink); }
.q-form.locked .q-grid-wrap { background: var(--sunken); }
.q-form.locked .party-find, .q-form.locked .qfn { display: none; }

/* ── 재고 (039, 2026-10-08) ── */
.iv-kpis b i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-dim); margin-left: 2px; }
.iv-table .num small { margin-left: 3px; font-family: inherit; font-size: 11.5px; color: var(--ink-dim); font-weight: 400; }
.iv-table tr.iv-empty td { color: var(--ink-mid); }
.iv-minus { color: var(--danger) !important; }
/* 표 안의 "시리얼 / 수량" 은 누르는 단추다 — 알약 모양은 그대로 두고 단추 기본 모양만 지운다. */
button.tag { font-family: inherit; cursor: pointer; }
.iv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.iv-head-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.iv-block { margin-bottom: 18px; }
.iv-modal textarea { font-family: var(--mono); }
.iv-serial { font-family: var(--mono); font-size: 13px; }
/* 품목 창 (2026-10-29 사용자 요청 — 시안 C 의 두 칸 + B 의 스크롤 목록). 글자를 키우고, 왼쪽은 "무엇이 있나", 오른쪽은 "넣기" */
.iv2 { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.iv2.solo { grid-template-columns: minmax(0, 1fr); }
.iv2-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink-mid); }
.iv2-sn { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.iv2-sn.sm { font-size: 14px; }
.iv2-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.iv2-kpi { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--sunken); }
.iv2-kpi span { display: block; font-size: 13.5px; color: var(--ink-mid); }
.iv2-kpi b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.iv2-kpi b i { margin-left: 3px; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--ink-mid); }
.iv2-kpi.main { border-color: var(--navy-100); background: var(--navy-50); }
.iv2-kpi.main b { color: var(--navy-700); }
.iv2-kpi.res b { color: var(--warn); }
.iv2-find { position: relative; display: flex; align-items: center; margin-bottom: 4px; }
.iv2-find svg { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--ink-dim); pointer-events: none; }
.iv2-find input { width: 100%; min-height: 44px; padding: 8px 12px 8px 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: inherit; font-size: 14.5px; color: var(--ink); }
.iv2-find input:focus { border-color: var(--navy-500); outline: none; }
.iv2-sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 15.5px; font-weight: 700; }
.iv2-sec .n, .iv2-fold .n { font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.iv2-list { max-height: 392px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.iv2-list[hidden] { display: none; }
.iv2-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.iv2-item:first-child { border-top: none; }
.iv2-item[hidden] { display: none; }
.iv2-item.gone .iv2-sn { color: var(--ink-mid); }
.iv2-when { flex: 1; min-width: 0; color: var(--ink-mid); font-size: 13.5px; overflow-wrap: anywhere; }
.iv2-acts { display: flex; gap: 6px; flex: none; }
.iv2-pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.iv2-pill.in { background: var(--ok-bg); color: var(--ok); }
.iv2-pill.res { background: var(--warn-bg); color: var(--warn); }
.iv2-pill.out { background: var(--line-soft); color: var(--ink-mid); }
.iv2-empty, .iv2-nohit { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--ink-dim); font-size: 14px; }
.iv2-nohit { margin-top: 8px; }
.iv2-nohit[hidden] { display: none; }
.iv2-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 12px 0 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
.iv2-fold::before { content: '▸'; color: var(--ink-dim); transition: transform .15s; }
.iv2-fold.open::before { transform: rotate(90deg); }
.iv2-fold .arr { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--navy-700); }
.iv2-fold:hover { border-color: var(--ink-dim); }
.iv2-moves { font-size: 14px; }
.iv2-moves > div { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; border-top: 1px dashed var(--line); }
.iv2-moves > div:first-child { border-top: none; }
.iv2-moves .d { flex: none; width: 76px; color: var(--ink-mid); }
.iv2-moves .k { flex: none; width: 34px; font-weight: 600; }
.iv2-moves .q { flex: none; width: 30px; text-align: right; font-weight: 700; }
.iv2-moves .q.m { color: var(--danger); }
.iv2-moves .dim { min-width: 0; overflow-wrap: anywhere; }
.iv2-more { margin-top: 4px; padding: 6px 2px; border: none; background: none; color: var(--navy-700); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.iv2-side { position: sticky; top: 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--sunken); }
.iv2-side h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15.5px; }
.iv2-side .segment { display: flex; width: 100%; }
.iv2-side .segment .seg { flex: 1; }
.iv2-fl { display: block; margin: 12px 0 5px; font-size: 13.5px; font-weight: 600; color: var(--ink-mid); }
.iv2-side textarea, .iv2-side input[type=text], .iv2-side input[type=date] { width: 100%; font-size: 15px; }
.iv2-side textarea { resize: vertical; }
.iv2-go { width: 100%; margin-top: 14px; }
.iv2-switch { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-mid); cursor: pointer; }
.iv2-switch input { width: 18px; height: 18px; flex: none; accent-color: var(--navy-600); }
@media (max-width: 860px) {
    .iv2 { grid-template-columns: minmax(0, 1fr); }
    .iv2-side { position: static; }
}
@media (max-width: 560px) {
    .iv2-kpi { padding: 10px; }
    .iv2-kpi b { font-size: 22px; }
    .iv2-item { flex-wrap: wrap; gap: 6px 10px; }
    .iv2-when { flex-basis: 100%; order: 3; }
    .iv2-acts { margin-left: auto; }
    .iv2-moves > div { flex-wrap: wrap; gap: 2px 10px; }
    .iv2-moves .dim { flex-basis: 100%; }
}

/* ── 쪽 번호는 가운데, 표 위에도 하나 (2026-10-08) ──
   건수는 왼쪽에, 번호는 화면 한가운데에 둔다. 가운데 칸이 정확히 가운데 오도록 양옆을 1fr 로 맞춘다. */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pager > .pager-count { grid-column: 1; justify-self: start; }
.pager > .pager-buttons { grid-column: 2; justify-content: center; }
.pager.top { margin: 0 0 10px; }
.pager.compact { display: flex; }
@media (max-width: 640px) {
    .pager { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
    .pager > .pager-count, .pager > .pager-buttons { grid-column: 1; justify-self: center; }
}

/* ── 전표 창 머리의 표시를 또렷하게 (2026-10-08) ──
   작은 회색 알약에 아이콘뿐이라 무엇을 말하는지 읽히지 않았다. 이름표(문의·견적서·이카운트)와
   값을 글자로 적고, 크기와 색 대비를 올린다. 상태는 색으로도 갈린다:
   초록 = 보냄, 주황 = 아직 안 보냄, 빨강 = 실패, 보라 = 이어진 전표, 회색 = 없음. */
.head-badges { gap: 8px; flex-wrap: wrap; }
.head-badge {
    height: 30px; padding: 0 11px; gap: 6px;
    border-radius: 8px;
    background: var(--sunken); color: var(--ink-mid); border-color: var(--line);
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.head-badge svg { width: 15px; height: 15px; }
.head-badge .hb-label { font-weight: 500; opacity: .78; }
.head-badge .hb-label + .hb-text { padding-left: 7px; border-left: 1px solid rgba(128, 128, 128, .45); }
.head-badge .hb-text { font-variant-numeric: tabular-nums; }
.head-badge.tone-on   { color: var(--navy-700); background: var(--navy-50); border-color: var(--navy-600); }
.head-badge.tone-hq   { color: #7a4f00; background: #ffe9b0; border-color: #e0a81a; }
.head-badge.tone-ok   { color: #fff; background: #15803d; border-color: #15803d; }
.head-badge.tone-ok .hb-label + .hb-text, .head-badge.tone-bad .hb-label + .hb-text { border-left-color: rgba(255, 255, 255, .5); }
.head-badge.tone-wait { color: #9a4a00; background: #fff1dc; border-color: #f0a04b; }
.head-badge.tone-bad  { color: #fff; background: var(--danger); border-color: var(--danger); }
@media (max-width: 720px) {
    /* 좁은 화면: 제목 줄 아래로 한 줄 내려 글자를 그대로 보인다(예전에는 글자를 떼어 버렸다). */
    .modal-head.has-badges { flex-wrap: wrap; row-gap: 8px; }
    .modal-head.has-badges h2 { flex: 1; }
    .modal-head.has-badges .head-badges { order: 3; flex: 1 1 100%; }
    .head-badge .hb-text { display: inline; }
    .head-badge { height: 28px; padding: 0 9px; font-size: 12.5px; }
}

/* ── 쪽 번호를 이카운트처럼 (2026-10-08) ──
   표 왼쪽 위에 붙는 작은 번호 줄. 테두리 없는 숫자, 지금 쪽만 동그랗게 칠한다.
   건수는 오른쪽 끝으로 떨어뜨린다. 거래처·단가관리의 옛 쪽 번호(.pager-buttons 만 있는 것)는 그대로다. */
.pager:has(> .pager-buttons.ec) { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 10px; }
.pager.top:has(> .pager-buttons.ec) { margin: 0 0 6px; }
.pager > .pager-buttons.ec { justify-content: flex-start; gap: 2px; flex-wrap: wrap; }
.pager > .pager-buttons.ec + .pager-count { margin-left: auto; white-space: nowrap; }
.pager-buttons.ec .pager-btn {
    min-width: 26px; min-height: 26px; height: 26px; padding: 0 6px;
    border: none; border-radius: 999px; background: transparent;
    font-size: 13px; font-weight: 500; color: var(--ink-mid); font-variant-numeric: tabular-nums;
}
.pager-buttons.ec .pager-btn:hover:not(:disabled) { background: var(--navy-50); color: var(--navy-700); }
.pager-buttons.ec .pager-btn.current { background: var(--navy-600); color: #fff; font-weight: 700; }
.pager-buttons.ec .pager-btn.arrow { font-size: 15px; color: var(--ink-dim); }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; color: var(--ink-mid); white-space: nowrap; }
.pager-jump input {
    width: 3.2rem; height: 26px; min-height: 0; padding: 0 6px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    font-family: inherit; font-size: 13px; text-align: center; color: var(--ink);
}
.pager-jump input:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }
@media (max-width: 640px) {
    /* 손가락으로 누를 수 있게 조금 키운다 */
    .pager-buttons.ec .pager-btn { min-width: 32px; height: 32px; }
    .pager-jump input { height: 32px; }
    .pager:has(> .pager-buttons.ec) { flex-wrap: wrap; }
}

/* ── 구매의 입고 처리 창 (040) ── */
.rc-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; }
.rc-date label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mid); }
.rc-date input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; }
.rc-line { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.rc-line.done { background: var(--sunken); }
.rc-line-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-nums { font-size: 12.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-nums b { color: var(--ink); }
.rc-nums b.rc-left { color: var(--navy-600); }
.rc-got { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-got .tag { font-family: var(--mono); }
.rc-line textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 13.5px; line-height: 1.6; resize: vertical; background: var(--surface); color: var(--ink);
}
.rc-line textarea:focus, .rc-qty input:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.rc-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rc-qty label { display: flex; align-items: center; gap: 8px; }
.rc-qty input { width: 7rem; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; text-align: right; }
.rc-line .field-hint { margin: 6px 0 0; }

/* ── 건수는 "/ 21" 바로 옆에 (사용자 요청 2026-10-08) ── */
.pager > .pager-buttons.ec + .pager-count {
    margin-left: 0; padding-left: 12px; border-left: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--ink-mid);
}
.count-line:empty { display: none; }

/* ── 목록 위쪽이 너무 붙어 있었다 (사용자 요청 2026-10-08) ──
   조회 상자 · 진행 상태 · 쪽 번호 · 표 사이를 한 줄씩 띄운다. 위쪽 쪽 번호를 끼워 넣으면서
   ".statusbar + .table-wrap" 의 간격이 더는 걸리지 않게 된 것도 여기서 바로잡는다. */
.statusbar { margin-top: 16px; }
.count-line { margin-top: 14px; }
.pager.top:has(> .pager-buttons.ec) { margin: 18px 0 10px; }
.pager.top[hidden] + .table-wrap { margin-top: 18px; }
.table-wrap + .pager:has(> .pager-buttons.ec) { margin-top: 14px; }

/* ── 전표 창 안이 너무 촘촘했다 — 아주 조금만 띄운다 (사용자 요청 2026-10-08) ──
   위쪽 입력 칸: 줄 사이 5px, 좌우 칸 사이를 조금 더. 품목 줄: 위아래 2px 씩, 칸 사이 2px 더. */
.fgrid { row-gap: 5px; column-gap: 28px; }
.frow { gap: 9px; }
.q-grid-head, .qline-main, .q-agrid-head, .aline-main { gap: 6px; }
.qline-main, .aline-main { padding: 4px 8px; }
.q-grid-head { padding: 7px 8px; }
.qcell { min-height: 27px; padding: 3px 7px; }

/* ── 시리얼 번호 고르기 (041 — 재고 잡기 · 출고 처리) ── */
.sn-picks { display: flex; flex-wrap: wrap; gap: 6px; max-height: 13.5rem; overflow-y: auto; padding: 2px; }
.sn-pick {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px 0 9px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    font-family: var(--mono); font-size: 13px; color: var(--ink); cursor: pointer; user-select: none;
}
.sn-pick:hover { border-color: var(--navy-500); }
.sn-pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--navy-600); }
.sn-pick:has(input:checked) { border-color: var(--navy-600); background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.sn-pick em { font-style: normal; font-family: inherit; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); }

/* ── 거래명세서 품목표 아래의 시리얼 줄 (042) ── */
.sn-strip { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.sn-strip-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.sn-strip-title small { margin-left: 6px; font-weight: 400; color: var(--ink-dim); }
.sn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; font-size: 13px; }
.sn-row + .sn-row { border-top: 1px solid var(--line-soft); }
.sn-name { flex: 0 1 18rem; min-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-chips { flex: 1 1 12rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; }
.sn-chip { font-family: var(--mono); }
.sn-lack { color: var(--warn); font-weight: 600; }

/* ── 재고: 무엇이 부족한지 (2026-10-08) ── */
.iv-kpi-btn { cursor: pointer; }
.iv-kpi-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.q-table tr.iv-why td { padding: 0 12px 12px 12px; background: var(--surface); white-space: normal; overflow: visible; }
.q-table tr.iv-why:hover td { background: var(--surface); }
.why-box { padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: 8px; background: var(--sunken); }
.iv-block.why-box { border-left-color: var(--line); margin-bottom: 16px; }
.iv-block.why-box.short { border-left-color: var(--danger); }
.why-sum { font-size: 13px; color: var(--ink-mid); }
.why-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.why-sum b.why-short { color: var(--danger); font-size: 14px; }
.why-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 8px; }
.why-cols h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-mid); }
.why-cols ul { list-style: none; margin: 0; padding: 0; }
.why-cols li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12.5px; border-top: 1px solid var(--line-soft); }
.why-cols li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.why-cols li > .dim { flex: none; white-space: nowrap; font-size: 12px; }
.why-cols li > b { flex: none; min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.why-cols p { margin: 0; font-size: 12.5px; }
.why-link { border: none; background: none; padding: 0; font-family: var(--mono); font-size: 12.5px; color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; flex: none; }
.why-link:hover { color: var(--navy-700); }
@media (max-width: 760px) { .why-cols { grid-template-columns: 1fr; } }

/* ── 계정 · 권한 (2026-10-12) ── */
.ua-count { justify-content: space-between; margin-bottom: 8px; }
.ua-stopped { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mid); cursor: pointer; }
.ua-stopped input { width: 15px; height: 15px; margin: 0; accent-color: var(--navy-600); }
.ua-table { table-layout: auto; }
.ua-table tbody tr[data-id] { cursor: pointer; }
/* 중지된 계정은 이카운트처럼 붉은 줄로 남긴다 — 흐리게만 하면 있는지 없는지 헷갈린다. */
.q-table tbody tr.ua-stopped-row td { background: var(--danger-bg); color: var(--ink-mid); }
.q-table tbody tr.ua-stopped-row:hover td { background: #fbdcdc; }
.ua-acts { text-align: right; white-space: nowrap; }
.ua-emp-box { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ua-emp { min-height: 34px; padding: 4px 8px; font-size: 13.5px; }
.ua-emp.auto { color: var(--ink-mid); font-style: italic; }
.ua-emp-box small { font-size: 11.5px; }
.ua-tabs { margin-bottom: 14px; }
.ua-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ua-facts > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); min-width: 0; }
.ua-facts span { display: block; font-size: 11.5px; color: var(--ink-dim); margin-bottom: 3px; }
.ua-facts b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ua-act { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.ua-act.danger { border-color: #f3c2c2; }
.ua-act > div { min-width: 0; }
.ua-act b { display: block; font-size: 13.5px; }
.ua-act small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.ua-act .btn { flex: none; }
.ua-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ua-grid .field.wide { grid-column: 1 / -1; }
.ua-save { display: flex; justify-content: flex-end; margin-top: 12px; }
.ua-modal .perm-all select { height: 32px; min-height: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: inherit; font-size: 12.5px; color: var(--ink); }
@media (max-width: 640px) {
    .ua-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-grid { grid-template-columns: 1fr; }
    .ua-act { flex-direction: column; align-items: stretch; }
}

/* 좁은 화면에서 "한꺼번에" 줄이 세로로 쪼개지지 않게 */
.ua-modal .perm-all { flex-wrap: wrap; white-space: nowrap; }
.ua-modal .perm-all .spacer { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .ua-modal .perm-all select { flex: 1 1 100%; } }

/* ── A/S 칸 (043) — 전표 옆 칸 ── */
.src-tag.as { background: #e6f1fb; color: #1b5e9e; }

.as-field { margin-bottom: 10px; }
.as-field > label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-mid); }
.as-field input, .as-field select, .as-field textarea {
    width: 100%; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; font-size: 13px; color: var(--ink);
}
.as-field input, .as-field select { height: 32px; }
.as-field textarea { line-height: 1.55; resize: vertical; }
.as-field input:focus, .as-field select:focus, .as-field textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.as-field [readonly] { background: var(--sunken); }
.as-equip { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; }
.as-equip #asSerial { font-family: var(--mono); }

.as-warranty { display: block; margin-top: 7px; padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.as-warranty b { margin-right: 4px; }
.as-warranty small { display: block; font-size: 11px; opacity: .8; }
.as-warranty.in { background: #e9f9ee; color: #15803d; }
.as-warranty.out { background: var(--danger-bg); color: var(--danger); }
.as-warranty.none { background: var(--sunken); color: var(--ink-dim); }

.as-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.as-history h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-mid); }
.as-past { padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.as-past:first-of-type { border-top: none; }
.as-past-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.as-past-note { margin-top: 2px; color: var(--ink-mid); white-space: pre-wrap; overflow-wrap: anywhere; }
.as-past-note b { font-size: 11px; color: var(--ink-dim); margin-right: 4px; }
.as-found { margin-top: 10px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.as-hit { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: inherit; cursor: pointer; }
.as-hit:hover { border-color: var(--navy-500); background: var(--navy-50); }
.as-hit-main { display: block; font-size: 13.5px; color: var(--ink); }
.as-hit-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-dim); }
.as-hit .as-warranty { margin-top: 6px; }

/* ── A/S 알약(2026-10-12) — 옆 칸의 긴 상자를 창 머리로 올렸다. 누르면 적는 창이 뜬다. ── */
.head-badges > .head-badge.as-badge { cursor: pointer; }
.head-badge.as-badge:hover { filter: brightness(.97); box-shadow: 0 0 0 2px var(--navy-100); }
.head-badge.as-badge .hb-text { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.as-equip:has(> button) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; }
.as-field .field-hint { margin: 6px 0 0; }

/* ── 조회 상자의 기간 표시 (2026-10-12) — 접힌 상세 판 안의 기간이 지금 무엇인지 늘 보인다 ── */
.range-chip {
    flex: none; height: 32px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 999px;
    background: var(--sunken); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink-mid);
    white-space: nowrap; cursor: pointer;
}
.range-chip:hover { border-color: var(--navy-500); color: var(--navy-700); }
.range-chip.all { color: var(--ink-dim); font-weight: 500; }
.range-btns .btn.on, [data-range].btn.on { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

/* ── 아직 못 보낸 연락 기록(새 전표) ── */
.contact-item.waiting { background: var(--warn-bg); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; }
.contact-item.waiting .contact-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.contact-drop { margin-left: auto; border: none; background: none; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--ink-dim); cursor: pointer; }
.contact-drop:hover { color: var(--danger); }

/* ── 새 전표 단추 (2026-10-12) ──
   넓은 화면에서는 오른쪽 위의 "+ 새 견적서(F2)" 를 뺐다 — 표 아래 도구 줄의 "신규(F2)" 와 F2 가 있다.
   손으로 쓰는 좁은 화면에서는 오른쪽 아래에 떠 있는 동그란 + 하나로 둔다. 창이 뜨면 그 뒤로 가려진다. */
.fab-new { display: none; }
@media (max-width: 900px) {
    .fab-new {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
        width: 56px; height: 56px; padding: 0 0 3px; border: none; border-radius: 50%;
        background: var(--navy-600); color: #fff; font-family: inherit; font-size: 30px; font-weight: 400; line-height: 1;
        box-shadow: 0 6px 16px rgba(28, 27, 41, .28); cursor: pointer;
    }
    .fab-new:active { background: var(--navy-700); transform: scale(.96); }
    /* 떠 있는 + 가 표의 마지막 줄과 도구 줄을 가리지 않게 아래를 비워 둔다. */
    #view:has(.fab-new) { padding-bottom: 84px; }
}

/* ── 스케줄 캘린더 — FullCalendar 를 우리 화면에 맞춘다 (2026-10-12) ──
   달력 판은 js/vendor/fullcalendar.global.min.js 가 그린다. 여기서는 색·글꼴·단추만 우리 것으로 바꾼다. */
.jsr-fc {
    --fc-border-color: var(--line);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--sunken);
    --fc-today-bg-color: var(--navy-50);
    --fc-list-event-hover-bg-color: var(--navy-50);
    --fc-event-border-color: transparent;
    --fc-now-indicator-color: var(--danger);
    font-family: inherit; font-size: 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.jsr-fc .fc-toolbar.fc-header-toolbar { margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.jsr-fc .fc-toolbar-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.jsr-fc .fc-button {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none;
    font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-sm);
    text-transform: none;
}
.jsr-fc .fc-button:hover { background: var(--sunken); color: var(--ink); border-color: var(--ink-dim); }
.jsr-fc .fc-button:focus, .jsr-fc .fc-button:active:focus { box-shadow: 0 0 0 3px var(--focus-ring) !important; }
.jsr-fc .fc-button-primary:not(:disabled).fc-button-active,
.jsr-fc .fc-button-primary:not(:disabled):active { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.jsr-fc .fc-button-primary:disabled { background: var(--sunken); color: var(--ink-dim); border-color: var(--line); opacity: 1; }
.jsr-fc .fc-button-group > .fc-button { border-radius: 0; }
.jsr-fc .fc-button-group > .fc-button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.jsr-fc .fc-button-group > .fc-button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.jsr-fc .fc-scrollgrid { border-radius: 8px; overflow: hidden; }
.jsr-fc .fc-col-header-cell { background: var(--sunken); }
.jsr-fc .fc-col-header-cell-cushion { padding: 7px 4px; font-size: 12px; font-weight: 700; color: var(--ink-mid); text-decoration: none; }
.jsr-fc .fc-daygrid-day-number { padding: 5px 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.jsr-fc .fc-day-other .fc-daygrid-day-number { opacity: .4; }
.jsr-fc .fc-daygrid-day-frame { min-height: 104px; }
/* 일요일과 쉬는 날은 빨강, 토요일은 파랑 — 벽에 거는 달력과 같다. */
.jsr-fc .fc-day-sun .fc-col-header-cell-cushion, .jsr-fc .fc-day-sun .fc-daygrid-day-number,
.jsr-fc .jsr-off .fc-daygrid-day-number, .jsr-fc .jsr-off .fc-col-header-cell-cushion,
.jsr-fc .jsr-off .fc-list-day-text, .jsr-fc .fc-list-day.fc-day-sun .fc-list-day-text { color: var(--danger); }
.jsr-fc .fc-day-sat .fc-col-header-cell-cushion, .jsr-fc .fc-day-sat .fc-daygrid-day-number { color: var(--navy-500); }
.jsr-fc .fc-day-today .fc-daygrid-day-number {
    margin: 3px; padding: 2px 7px; border-radius: 999px; background: var(--navy-600); color: #fff !important;
}
/* 우리 일정 — 예전 달력과 같은 알약: 옅은 바탕, 진한 글자, 왼쪽에 색 띠 */
.jsr-fc .fc-event.jsr-ev {
    border: none; border-left: 3px solid var(--fc-event-border-color, currentColor); border-radius: 4px;
    padding: 1px 5px; margin-bottom: 2px; font-size: 12px; font-weight: 600; line-height: 1.45; cursor: pointer;
}
.jsr-fc .fc-daygrid-dot-event.jsr-ev { background: var(--fc-event-bg-color); color: var(--fc-event-text-color); }
.jsr-fc .fc-daygrid-dot-event.jsr-ev .fc-daygrid-event-dot { display: none; }
.jsr-fc .fc-daygrid-dot-event.jsr-ev .fc-event-time { font-weight: 500; opacity: .85; margin-right: 4px; }
.jsr-fc .fc-daygrid-dot-event.jsr-ev .fc-event-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.jsr-fc .fc-event.jsr-ev:hover { filter: brightness(.96); }
.jsr-fc .fc-event.jsr-ev.done { opacity: .5; text-decoration: line-through; }
.jsr-fc .fc-event.jsr-ev.fc-event-draggable { cursor: grab; }
/* 공휴일 — 바탕 없이 빨간 글자로 이름만. 기념일(쉬지 않는 날)은 회색. 누를 수 없다. */
.jsr-fc .fc-event.jsr-holiday, .jsr-fc .fc-event.jsr-holiday:hover {
    background: transparent !important; border: none !important; box-shadow: none; pointer-events: none;
    padding: 0 5px; margin: 0 0 1px; font-size: 11.5px; font-weight: 700;
}
.jsr-fc .fc-event.jsr-holiday .fc-event-main, .jsr-fc .fc-event.jsr-holiday .fc-event-title { color: var(--danger); }
.jsr-fc .fc-event.jsr-holiday.memo .fc-event-main, .jsr-fc .fc-event.jsr-holiday.memo .fc-event-title { color: var(--ink-dim); font-weight: 500; }
.jsr-fc .fc-daygrid-more-link { font-size: 11.5px; font-weight: 600; color: var(--ink-dim); padding: 0 5px; }
.jsr-fc .fc-daygrid-more-link:hover { color: var(--navy-700); background: transparent; text-decoration: underline; }
.jsr-fc .fc-popover { border-radius: 10px; box-shadow: var(--shadow-lg); border-color: var(--line); z-index: 100; }
.jsr-fc .fc-popover-header { background: var(--sunken); font-size: 12.5px; font-weight: 700; border-radius: 10px 10px 0 0; }
/* 목록 보기(휴대폰 기본) */
.jsr-fc .fc-list { border-radius: 8px; }
.jsr-fc .fc-list-day-cushion { background: var(--sunken); padding: 7px 12px; font-size: 12.5px; }
.jsr-fc .fc-list-day-text, .jsr-fc .fc-list-day-side-text { text-decoration: none; color: var(--ink-mid); font-weight: 700; }
.jsr-fc .fc-list-event { cursor: pointer; }
.jsr-fc .fc-list-event td { padding: 8px 12px; }
.jsr-fc .fc-list-event.jsr-holiday { pointer-events: none; }
.jsr-fc .fc-list-event.jsr-holiday .fc-list-event-title { color: var(--danger); font-weight: 700; }
.jsr-fc .fc-list-event.jsr-holiday.memo .fc-list-event-title { color: var(--ink-dim); font-weight: 500; }
.jsr-fc .fc-list-event.jsr-holiday .fc-list-event-dot { border-color: transparent; }
.jsr-fc .fc-list-event.done .fc-list-event-title { opacity: .5; text-decoration: line-through; }
.jsr-fc .fc-timegrid-slot { height: 2.2em; }
.jsr-fc .fc-timegrid-axis-cushion, .jsr-fc .fc-timegrid-slot-label-cushion { font-size: 11.5px; color: var(--ink-dim); }
.jsr-fc .fc-timegrid-event.jsr-ev { background: var(--fc-event-bg-color); }
.jsr-fc .fc-timegrid-event.jsr-ev .fc-event-main { color: var(--fc-event-text-color); }
@media (max-width: 760px) {
    .jsr-fc { padding: 8px; }
    .jsr-fc .fc-toolbar.fc-header-toolbar { justify-content: space-between; }
    .jsr-fc .fc-toolbar-title { font-size: 16px; }
    .jsr-fc .fc-button { padding: 6px 9px; min-height: 36px; }
}

/* ── 캘린더의 담당자 고르기 (2026-10-12) — 브라우저 기본 모양 대신 옆의 알약들과 어울리게 ── */
.cal-filters select {
    appearance: none; -webkit-appearance: none;
    height: 32px; min-height: 0; padding: 0 32px 0 13px;
    border: 1px solid var(--line); border-radius: 999px;
    background-color: var(--surface);
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.cal-filters select:hover { border-color: var(--navy-500); }
.cal-filters select:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ── 캘린더 걸러보기를 단추로 (2026-10-12) ──
   체크박스가 달린 꼬리표 대신 누르면 켜지고 꺼지는 둥근 단추. 켜져 있으면 그 종류의 색으로 칠하고,
   꺼지면 흰 바탕에 흐린 글자로 둔다. 체크박스는 숨겨만 두었다 — 키보드(Tab·Space)로도 그대로 된다. */
.cal-filters .cal-chip.ev {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 14px 0 12px; margin: 0;
    border: 1px solid transparent; border-left-width: 1px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}
.cal-filters .cal-chip.ev input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* 앞의 작은 점이 종류의 색을 알려 준다(꺼져 있어도 남는다). */
.cal-filters .cal-chip.ev::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cal-filters .cal-chip.ev:has(input:checked) { border-color: currentColor; }
.cal-filters .cal-chip.ev:hover { filter: brightness(.97); }
.cal-filters .cal-chip.ev:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }
.cal-filters .cal-chip.ev:has(input:not(:checked)) {
    background: var(--surface); border-color: var(--line); color: var(--ink-dim); font-weight: 500;
}
.cal-filters .cal-chip.ev:has(input:not(:checked))::before { opacity: .45; }

/* ── 브라우저 기본 모양을 걷어낸다 — 고르는 칸 · 날짜 칸 · 글자 칸 (사용자 요청 2026-10-12) ──

   화면마다 따로 꾸민 칸은 그 규칙이 이긴다(:where 는 우선순위가 0 이다). 여기는 **아무도 안 꾸민 칸**이
   브라우저 기본 모양(네모난 회색 테두리, 작은 글자)으로 나오던 것을 막는 바닥이다. */
:where(select, input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"],
       input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"],
       input[type="password"], input:not([type]), textarea) {
    height: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background-color: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 13px; line-height: 1.3;
    transition: border-color .12s, box-shadow .12s;
}
:where(textarea) { height: auto; padding: 8px 10px; line-height: 1.55; }
:where(select, input, textarea):where(:hover:not(:disabled):not([readonly])) { border-color: #c3ccdb; }
:where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea):where(:focus) {
    outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring);
}
:where(select, input, textarea):where(:disabled) { background-color: var(--line-soft); color: var(--ink-mid); cursor: not-allowed; }

/* 고르는 칸의 화살표 — 브라우저마다 다른 기본 화살표 대신 하나로. 화면별 규칙이 background 를
   통째로 다시 써도 화살표가 사라지지 않게 이 몇 가지만 못박는다. */
select:not([multiple]):not([size]) {
    appearance: none !important; -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 14px !important;
    padding-right: 30px !important;
    cursor: pointer; text-overflow: ellipsis;
}
select.fsel-open { border-color: var(--navy-500); box-shadow: 0 0 0 3px var(--focus-ring); }
select::-ms-expand { display: none; }

/* 날짜 · 시각 칸의 달력 아이콘 — 흐리게 두었다가 올리면 또렷하게 */
:where(input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"])::-webkit-calendar-picker-indicator {
    opacity: .5; cursor: pointer; border-radius: 4px; padding: 2px;
}
:where(input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"]):hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* 체크 · 라디오 — 기본 파랑 대신 우리 색 */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--navy-600); }

/* ── 펼친 목록 (ui.js 가 body 에 띄운다) ── */
.fsel-menu {
    position: fixed; z-index: 3000;
    margin: 0; padding: 5px; list-style: none; overflow-y: auto; max-width: min(32rem, calc(100vw - 16px));
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(28, 27, 41, .18));
    font-family: inherit;
}
.fsel-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 34px; padding: 0 10px; border-radius: 8px;
    font-size: 13px; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.fsel-item > span { overflow: hidden; text-overflow: ellipsis; }
.fsel-item.active { background: var(--sunken); }
.fsel-item.on { color: var(--navy-700); font-weight: 700; }
.fsel-item.on.active { background: var(--navy-50); }
.fsel-item.off { color: var(--ink-dim); cursor: not-allowed; }
.fsel-item svg { width: 14px; height: 14px; flex: none; color: var(--navy-600); }

/* 계정 · 권한 › 직원 정보 › 서명 (045) */
.ua-sign { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ua-sign h4 { margin: 0 0 4px; font-size: 13px; }
.ua-sign-view { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; }
.ua-sign-view img { max-height: 64px; max-width: 220px; }
.ua-sign .ua-save { gap: 8px; }

/* ── 표의 머리글은 가운데로 (사용자 요청 2026-10-12) ──
   값은 그대로다 — 글자는 왼쪽, 금액은 오른쪽. 머리글만 칸 가운데에 온다. */
.q-table thead th, .q-table thead th.ta-r,
.price-table thead th, .pk-table thead th { text-align: center; vertical-align: middle; }
/* 맨 앞 칸의 전체 고르기 네모가 머리글 글자보다 위로 떠 보였다. 글자와 같은 높이에 앉힌다. */
.q-table th.rowno-head { line-height: 1; }
.q-table th.rowno-head input { display: block; margin: 0 auto; width: 15px; height: 15px; }

/* ── 목록 표의 모든 칸은 넘치면 아래 줄로 (사용자 요청 2026-10-12) ──
   예전에는 … 로 잘랐다. 품목 칸부터 줄바꿈으로 바꿨고, 나머지 칸도 같게 해 달라고 했다.
   금액(.num)과 꼬리표(.tag)만은 한 덩어리로 둔다 — 숫자가 중간에서 꺾이면 읽을 수 없다. */
.q-table tbody td:not([colspan]) { white-space: normal; word-break: keep-all; overflow-wrap: break-word; text-overflow: clip; line-height: 1.4; }
.q-table tbody td:not([colspan]) * { white-space: inherit; }
.q-table tbody td.num, .q-table tbody td .tag { white-space: nowrap; overflow-wrap: normal; }
/* 거래처 → 납품처 칸은 나란히 두던 것을 풀어 한 문장처럼 흐르게 한다. 좁으면 납품처가 아래 줄로 내려간다. */
.q-table .party { display: inline; }
.q-table .party .b, .q-table .party .c { overflow: visible; }
.q-table .party .to { margin: 0 5px; }

/* ── 전표 이어 보기 (js/chain.js) — 단계 줄 · 이어진 전표 · 날짜순 기록 ── */
.chain-steps { display: flex; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.chain-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.chain-steps li::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.chain-steps li:first-child::before { display: none; }
.chain-steps li.done::before, .chain-steps li.doing::before { background: var(--navy-500); }
.chain-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--line); background: var(--surface); font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-dim); }
.chain-steps b { font-size: 13px; color: var(--ink-mid); }
.chain-steps small { font-size: 11.5px; color: var(--ink-dim); }
.chain-steps li.done i { border-color: var(--navy-600); background: var(--navy-600); color: #fff; }
.chain-steps li.done b { color: var(--ink); }
.chain-steps li.doing i { border-color: var(--navy-600); color: var(--navy-700); background: var(--navy-50); }
.chain-steps li.doing b { color: var(--navy-700); }
.chain-steps li.skip i { border-style: dashed; }
.chain-steps li.stop i { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.chain-h { margin: 16px 0 8px; font-size: 13px; color: var(--ink-mid); }
.chain-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.chain-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 132px 104px 104px; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.chain-row:last-child { border-bottom: none; }
.chain-row.here { background: var(--navy-50); }
.chain-row .k b, .chain-row .k span, .chain-row small { display: block; }
.chain-row .k span, .chain-row small { margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
.chain-row .s, .chain-row .o { text-align: center; }
.chain-row .a { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
    .chain-row { grid-template-columns: minmax(0, 1fr) auto; }
    .chain-row .p { grid-column: 1 / -1; order: 3; }
    .chain-row .s { text-align: right; }
    .chain-row .a { text-align: left; order: 4; }
    .chain-row .o { order: 5; text-align: right; }
}
.chain-time { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.chain-time li { display: grid; grid-template-columns: 92px 110px 1fr; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.chain-time li:last-child { border-bottom: none; }
.chain-time .d { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }
@media (max-width: 640px) {
    .chain-steps small { display: none; }
    .chain-time li { grid-template-columns: 84px 1fr; }
    .chain-time li span:last-child { grid-column: 1 / -1; }
}

/* ── 첨부 파일 (js/attach.js, 046) ── */
.att-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.att-up { cursor: pointer; }
.att-hint { font-size: 12px; color: var(--ink-dim); }
.att-del-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mid); cursor: pointer; }
.att-del-toggle input { width: 15px; height: 15px; margin: 0; }
.att-drop { padding: 18px; margin-bottom: 10px; border: 2px dashed var(--navy-500); border-radius: 10px; background: var(--navy-50); color: var(--navy-700); text-align: center; font-weight: 600; }
.att-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.att-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 170px auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.att-list li:last-child { border-bottom: none; }
.att-list li.gone { opacity: .55; }
.att-list li.gone .att-name a { text-decoration: line-through; }
.att-ico { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--sunken); color: var(--ink-mid); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; }
.att-name { min-width: 0; }
.att-name a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.att-name small, .att-who small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
.att-who { font-size: 12px; color: var(--ink-mid); }
.att-act { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) {
    .att-list li { grid-template-columns: 40px minmax(0, 1fr); }
    .att-who, .att-act { grid-column: 2; justify-content: flex-start; }
}

/* ── 거래처 한 장 보기 (customers.js openCard) ── */
.cc-tabs { margin-bottom: 14px; }
.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cc-kpis > div { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cc-kpis small { display: block; font-size: 12px; color: var(--ink-dim); }
.cc-kpis b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-kpis .warn { border-color: var(--warn); background: var(--warn-bg); }
.cc-cols { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.cc-infos { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.cc-info { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.cc-info:last-child { border-bottom: none; }
.cc-info span { color: var(--ink-dim); }
.cc-info b { font-weight: 500; overflow-wrap: anywhere; }
.cc-h { margin: 0 0 6px; font-size: 13px; color: var(--ink-mid); }
.cc-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px 100px 64px; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.cc-row.eq { grid-template-columns: 200px minmax(0, 1fr) 210px 80px; }
.cc-row small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
.cc-row .s { text-align: center; }
.cc-row .a { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cc-row .o { text-align: right; }
.cc-contacts { margin: 0; padding: 0; list-style: none; }
.cc-contacts li { display: grid; grid-template-columns: 92px 64px minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.cc-contacts .d { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }
.cc-contacts .n small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
@media (max-width: 760px) {
    .cc-cols { grid-template-columns: 1fr; }
    .cc-row, .cc-row.eq { grid-template-columns: minmax(0, 1fr) auto; }
    .cc-row .p { grid-column: 1 / -1; order: 3; }
    .cc-row .k { order: 1; } .cc-row .s { order: 2; }
    .cc-row .a { order: 4; text-align: left; }
    .cc-row .o { order: 5; }
    .cc-contacts li { grid-template-columns: 84px minmax(0, 1fr); }
    .cc-contacts .n { grid-column: 1 / -1; }
}
.att-act a.btn { text-decoration: none; }

/* ── 인수자 서명 (js/salesign.js, 047) ── */
.sg-pad { display: block; width: 100%; height: 220px; border: 1.5px dashed var(--line-strong, #b8c0cc); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.sg-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.sg-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.sg-list li:last-child { border-bottom: none; }
.sg-list li > span { flex: 1; min-width: 0; }
.sg-list small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-dim); }
@media (max-width: 640px) { .sg-pad { height: 260px; } }

/* ── 서명 링크 (048) — 직원 창의 링크 칸, 고객 서명 화면(sign.html) ── */
.sg-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sg-links h4 { margin: 0 0 6px; font-size: 13px; }
.sg-newlink { margin-bottom: 12px; padding: 12px; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--navy-50); }
.sg-newlink label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--navy-700); }
.sg-newlink small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-dim); }
.sg-url { display: flex; gap: 6px; }
.sg-url input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
body.sign-page { min-height: 100vh; margin: 0; padding: 16px; background: var(--ground, #f4f6fa); }
.sign-card { max-width: 560px; margin: 0 auto; padding: 18px; border-radius: 14px; background: var(--surface, #fff); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.sign-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--ink, #111); }
.sign-head small { display: block; font-size: 12px; color: var(--ink-dim); }
.sign-head h1 { margin: 2px 0 0; font-size: 20px; }
.sign-sheet { margin: 14px 0; }
.sign-sheet dl { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: 14px; }
.sign-sheet dt { color: var(--ink-dim); }
.sign-sheet dd { margin: 0; }
.sign-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sign-items li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 100px; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.sign-items small { display: block; font-size: 12px; color: var(--ink-dim); }
.sign-items .q { text-align: center; }
.sign-items .a { text-align: right; font-variant-numeric: tabular-nums; }
.sign-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-size: 14px; }
.sign-total b { font-size: 18px; }
.sign-actions { display: flex; justify-content: space-between; gap: 10px; }
.sign-actions .btn { flex: 1; min-height: 48px; }
.sign-msg { padding: 30px 6px; text-align: center; }
.sign-msg h1 { margin: 0 0 8px; font-size: 20px; }
.sign-msg p { margin: 0; color: var(--ink-mid); line-height: 1.6; }

/* 서명을 마친 고객에게 보이는 거래명세서 미리보기(sign.html) — 휴대폰 폭에서는 종이를 줄여 보인다 */
.sign-get { margin: 4px 0 8px; }
.sign-howto { margin: 0 0 12px; }
.sign-fit { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.sign-fit .printsheet.preview { margin: 0; }

/* ── 전체 검색 (js/search.js) ── */
.gs-open { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-left: 16px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-dim); font-family: inherit; font-size: 13px; cursor: pointer; min-width: 220px; }
.gs-open svg { width: 16px; height: 16px; }
.gs-open span { flex: 1; text-align: left; }
.gs-open kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); font-family: inherit; font-size: 11px; color: var(--ink-dim); }
.gs-open:hover { border-color: var(--navy-500); color: var(--ink-mid); }
@media (max-width: 760px) { .gs-open { min-width: 0; margin-left: 6px; padding: 0 10px; } .gs-open span, .gs-open kbd { display: none; } }
.gs-box { margin-bottom: 12px; }
.gs-results { max-height: 60vh; overflow-y: auto; }
.gs-group h4 { margin: 10px 0 4px; font-size: 12px; color: var(--ink-dim); }
.gs-group h4 small { font-weight: 400; }
.gs-row { display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: none; text-align: left; font-family: inherit; cursor: pointer; }
.gs-row .t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gs-row .s { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-row.active { background: var(--navy-50); }
.gs-keys { font-size: 12px; color: var(--ink-dim); }

/* ── 메모 (js/memo.js, 050) — Kept(Keep) 모양의 카드 판. 떠 있는 창과 메모 화면이 같이 쓴다 ── */
:root {
    --memo-red: #fde4e2;    --memo-red-line: #f6c7c2;
    --memo-orange: #fdebd6; --memo-orange-line: #f6d2a8;
    --memo-yellow: #fdf5c9; --memo-yellow-line: #efe08f;
    --memo-green: #e4f4d9;  --memo-green-line: #c3e3ab;
    --memo-teal: #d8f1ec;   --memo-teal-line: #a9ddd2;
    --memo-blue: #e0eafb;   --memo-blue-line: #b9cff3;
    --memo-purple: #ebe4fb; --memo-purple-line: #d0c2f3;
    --memo-gray: #ecebf0;   --memo-gray-line: #d6d4de;
}
.mk-page { flex: 1; min-width: 0; padding: 20px 24px 48px; overflow-y: auto; }
.mk-page > .mk { max-width: 1480px; margin: 0 auto; }
.mk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-scope { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mk-scope button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border: none; border-radius: 7px; background: none; color: var(--ink-mid); font-family: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.mk-scope button svg { width: 15px; height: 15px; }
.mk-scope button.on { background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.mk .search, .mk-pick .search { position: relative; display: block; flex: 1; min-width: 180px; }
.mk .search svg, .mk-pick .search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim); pointer-events: none; }
.mk .search input, .mk-pick .search input { width: 100%; padding-left: 36px; min-height: 40px; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mk-tags:empty { display: none; }
.mk-tagpick { min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-mid); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.mk-tagpick small { color: var(--ink-dim); }
.mk-tagpick.on { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.mk-tagpick.on small { color: rgba(255,255,255,.75); }

.mk-quick { display: flex; max-width: 620px; margin: 18px auto 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.mk-quick[hidden] { display: none; }
.mk-quick-text { flex: 1; min-height: 46px; padding: 0 16px; border: none; background: none; color: var(--ink-dim); font-family: inherit; font-size: 14px; text-align: left; cursor: text; }

.mk-sec { margin: 18px 4px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-dim); }
.mk-grid { columns: 240px; column-gap: 14px; margin-top: 14px; }
.mk-sec + .mk-grid { margin-top: 0; }
.mk-empty { padding: 48px 16px; text-align: center; color: var(--ink-dim); font-size: 13.5px; line-height: 1.7; }
.mk-card { position: relative; break-inside: avoid; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.mk-card:hover, .mk-card:focus-visible { box-shadow: var(--shadow-md); border-color: var(--ink-dim); }
.mk-card h4 { margin: 0 24px 6px 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.mk-text { color: var(--ink-mid); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
.mk-checks { margin: 0; padding: 0; list-style: none; }
.mk-checks li { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); overflow-wrap: anywhere; }
.mk-checks li.more { color: var(--ink-dim); font-size: 12.5px; }
.mk-box { flex: none; width: 16px; height: 16px; margin-top: 2px; padding: 0; border: 1.6px solid var(--ink-dim); border-radius: 4px; background: var(--surface); cursor: pointer; }
.mk-box:hover:not(:disabled) { border-color: var(--navy-600); background: var(--navy-50); }
.mk-box:disabled { cursor: default; }
.mk-done { margin-top: 4px; font-size: 12px; color: var(--ink-dim); }
.mk-pin { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; opacity: 0; transition: opacity .12s; }
.mk-pin svg { width: 17px; height: 17px; }
.mk-card:hover .mk-pin, .mk-pin:focus-visible, .mk-pin.on { opacity: 1; }
.mk-pin.on { color: var(--navy-600); }
.mk-pin:hover { background: rgba(0,0,0,.06); color: var(--ink); }
@media (hover: none) { .mk-pin { opacity: 1; } }
/* 공용 메모 · 완료 · 휴지통 (063) */
.mk-card-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.mk-card-acts .mk-pin { position: static; }
.mk-card:has(.mk-card-acts) h4 { margin-right: 118px; }
/* 수정(연필)은 늘 옅게 보인다 — 카드를 누르면 고쳐진다는 것을 모르는 사람이 많다(2026-10-29 사용자 요청) */
.mk-editbtn { display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; opacity: .6; transition: opacity .12s; }
.mk-editbtn svg { width: 16px; height: 16px; }
.mk-card:hover .mk-editbtn, .mk-editbtn:focus-visible { opacity: 1; }
.mk-editbtn:hover { background: var(--navy-50); color: var(--navy-700); }
.mk-delbtn { display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; opacity: 0; transition: opacity .12s; }
.mk-delbtn svg { width: 16px; height: 16px; }
.mk-card:hover .mk-delbtn, .mk-delbtn:focus-visible { opacity: 1; }
.mk-delbtn:hover { background: var(--danger-bg); color: var(--danger); }
@media (hover: none) { .mk-delbtn { opacity: 1; } }
.mk-by { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(0,0,0,.1); font-size: 12px; color: var(--ink-mid); }
.mk-by svg { width: 14px; height: 14px; flex: none; color: var(--navy-600); }
.mk-by b { color: var(--ink); font-weight: 600; }
.mk-e-by { margin: -2px 0 8px; font-size: 12px; color: var(--ink-mid); }
.mk-e-by b { color: var(--ink); font-weight: 600; }
.mk-donebtn { display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; opacity: 0; transition: opacity .12s; }
.mk-donebtn svg { width: 17px; height: 17px; }
.mk-card:hover .mk-donebtn, .mk-donebtn:focus-visible, .mk-donebtn.on { opacity: 1; }
.mk-donebtn:hover { background: var(--ok-bg); color: var(--ok); }
.mk-donebtn.on { color: var(--ok); }
@media (hover: none) { .mk-donebtn { opacity: 1; } }
.mk-card.is-done { opacity: .72; }
.mk-card.is-done h4, .mk-card.is-done .mk-text { text-decoration: line-through; text-decoration-color: var(--ink-dim); }
.mk-chip.done { background: var(--ok-bg); color: var(--ok); }
.mk-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 14px 4px 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink-mid); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mk-fold svg { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .15s; }
.mk-fold.open svg { transform: none; }
.mk-fold:hover { color: var(--ink); border-color: var(--ink-dim); }
.mk-restore { position: absolute; top: 8px; right: 8px; }
.mk-card:has(.mk-restore) h4 { margin-right: 84px; }
.mk-trash-note { margin: 14px 4px 0; font-size: 12.5px; color: var(--ink-dim); }
.mk-e-common { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; font-size: 12px; color: var(--navy-700); }
.mk-e-common svg { width: 15px; height: 15px; flex: none; }
.mk-e-tools button.mk-e-done:hover, .mk-e-tools button.mk-e-done.on { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.mk-e-foot .btn.ghost svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.mk-e-hist { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.07); max-height: 280px; overflow-y: auto; }
.mk-hist { margin: 0; padding: 0; list-style: none; }
.mk-hist li { padding: 6px 2px; border-bottom: 1px dashed rgba(0,0,0,.08); font-size: 12.5px; line-height: 1.55; color: var(--ink-mid); }
.mk-hist li:last-child { border-bottom: none; }
.mk-hist-at { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mk-hist-chs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.mk-hist-ch { overflow-wrap: anywhere; }
.mk-hist details summary { cursor: pointer; color: var(--navy-700); }
.mk-hist-body { display: grid; gap: 4px; margin-top: 4px; }
.mk-hist-body > div { padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.04); white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-hist-body em { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); }
/* 공용 메모 댓글 (064) */
.mk-e-cmts { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.035); }
.mk-c-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-mid); }
.mk-c-head svg { width: 15px; height: 15px; }
.mk-c-list { margin: 0 0 8px; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.mk-c-list li { padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.mk-c-list li:last-child { border-bottom: none; }
.mk-c-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.mk-c-top b { color: var(--ink); font-weight: 600; }
.mk-c-at { color: var(--ink-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mk-c-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.mk-c-acts button { min-height: 26px; padding: 0 6px; border: none; border-radius: 6px; background: none; color: var(--ink-dim); font-family: inherit; font-size: 11.5px; cursor: pointer; }
.mk-c-acts button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.mk-c-acts button[data-c-del]:hover { color: var(--danger); }
.mk-c-body { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--ink-mid); white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-c-list li.gone .mk-c-body { font-style: italic; }
.mk-c-editbox textarea, .mk-c-new textarea { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13px; line-height: 1.45; resize: none; }
.mk-c-btns { display: flex; gap: 6px; margin-top: 4px; }
.mk-c-new { display: flex; align-items: flex-end; gap: 6px; }
.mk-c-new textarea { flex: 1; }
.mk-hist-quote { overflow-wrap: anywhere; color: var(--ink); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mk-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border: none; border-radius: 6px; background: rgba(0,0,0,.055); color: var(--ink-mid); font-family: inherit; font-size: 11.5px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-chip svg { flex: none; width: 13px; height: 13px; }
.mk-chip.past { background: var(--danger-bg); color: var(--danger); }
button.mk-chip { cursor: pointer; }
button.mk-chip:hover:not(:disabled) { background: rgba(0,0,0,.1); color: var(--ink); }
button.mk-chip:disabled { cursor: default; opacity: .7; }
.mk-chip.link { color: var(--navy-700); }
.mk-chip.tag { color: var(--navy-700); }

/* 카드·고치는 칸의 색 */
.c-red    { --mk-bg: var(--memo-red);    --mk-line: var(--memo-red-line); }
.c-orange { --mk-bg: var(--memo-orange); --mk-line: var(--memo-orange-line); }
.c-yellow { --mk-bg: var(--memo-yellow); --mk-line: var(--memo-yellow-line); }
.c-green  { --mk-bg: var(--memo-green);  --mk-line: var(--memo-green-line); }
.c-teal   { --mk-bg: var(--memo-teal);   --mk-line: var(--memo-teal-line); }
.c-blue   { --mk-bg: var(--memo-blue);   --mk-line: var(--memo-blue-line); }
.c-purple { --mk-bg: var(--memo-purple); --mk-line: var(--memo-purple-line); }
.c-gray   { --mk-bg: var(--memo-gray);   --mk-line: var(--memo-gray-line); }
.mk-card:not(.c-none), .mk-edit:not(.c-none) { background: var(--mk-bg); border-color: var(--mk-line); }
.mk-sw { width: 28px; height: 28px; padding: 0; border: 1px solid var(--mk-line, var(--line)); border-radius: 50%; background: var(--mk-bg, var(--surface)); cursor: pointer; }
.mk-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy-600); }

/* 고치는 칸 */
.mk-edit { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mk-edit .form-alert:empty { display: none; }
.mk-e-title { width: 100%; padding: 4px 0; border: none !important; border-bottom: 1px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 17px; font-weight: 600; }
.mk-e-title:focus { border-bottom-color: var(--navy-500) !important; }
.mk-e-body { width: 100%; min-height: 150px; padding: 2px 0; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; resize: none; font-size: 14px; line-height: 1.65; }
.mk-e-ro-title { margin: 0; font-size: 17px; }
.mk-e-ro-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.mk-e-items { margin: 0; padding: 0; list-style: none; }
.mk-e-items li { display: flex; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid rgba(0,0,0,.05); }
.mk-e-items li input[type=checkbox] { flex: none; width: 17px; height: 17px; margin: 0; }
.mk-e-items li input[type=text] { flex: 1; min-width: 0; min-height: 34px; padding: 0; text-align: left; border: none !important; background: transparent !important; box-shadow: none !important; font-size: 14px; }
.mk-e-items li > span { flex: 1; font-size: 14px; overflow-wrap: anywhere; }
.mk-e-items li.done input[type=text], .mk-e-items li.done > span { color: var(--ink-dim); text-decoration: line-through; }
.mk-e-items li.add > span { flex: none; display: grid; place-items: center; width: 17px; color: var(--ink-dim); }
.mk-e-items li.add svg { width: 16px; height: 16px; }
.mk-e-del { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; opacity: 0; }
.mk-e-del svg { width: 15px; height: 15px; }
.mk-e-items li:hover .mk-e-del, .mk-e-items li:focus-within .mk-e-del { opacity: 1; }
@media (hover: none) { .mk-e-del { opacity: 1; } }
.mk-e-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-e-row input[type=date] { width: 150px; min-height: 36px; }
.mk-e-row select { width: auto; min-height: 36px; }
.mk-e-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-mid); }
.mk-e-label svg { width: 16px; height: 16px; }
.mk-pick { display: flex; flex-direction: column; gap: 6px; }
.mk-pick-out { max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 4px; }
.mk-e-files:empty { display: none; }
.mk-e-files .att-list li { grid-template-columns: 40px minmax(0, 1fr); }
.mk-e-files .att-who, .mk-e-files .att-act { grid-column: 2; justify-content: flex-start; }
.mk-e-files .att-list { background: var(--surface); }
.mk-e-files .btn svg { width: 15px; height: 15px; margin-right: 4px; }
.mk-e-tools { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.mk-e-tools button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.55); color: var(--ink-mid); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.mk-e-tools button svg { width: 16px; height: 16px; }
.mk-e-tools button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.mk-e-tools button.on { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-700); }
@media (pointer: coarse) { .mk-e-tools button, .mk-scope button { min-height: 44px; } }
.mk-e-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.07); }
.mk-e-foot .spacer { flex: 1; }
.mk-e-meta { font-size: 11.5px; color: var(--ink-dim); }
.mk-overlay .modal-body { padding: 14px; }

/* 판이 좁을 때(떠 있는 창) */
.mk.compact .mk-quick { margin: 12px 0 4px; max-width: none; box-shadow: var(--shadow-sm); }
.mk.compact .mk-scope { flex: 1 1 auto; }
.mk.compact .mk-scope button { flex: 1; justify-content: center; padding: 0 8px; }
.mk.compact .search { flex-basis: 100%; }
.mk.compact .mk-grid { columns: 150px; column-gap: 8px; margin-top: 10px; }
.mk.compact .mk-card { margin-bottom: 8px; padding: 10px 11px; }
.mk.compact .mk-card h4 { font-size: 13.5px; }
.mk.compact .mk-text, .mk.compact .mk-checks li { font-size: 12.5px; }
.mk.compact .mk-sec { margin-top: 12px; }

/* 떠 있는 창 — 모달(200~)보다 아래, 화면 위 줄(50)보다 위 */
.mk-float { position: fixed; top: 70px; right: 20px; z-index: 150; display: flex; flex-direction: column; width: 400px; height: min(660px, calc(100vh - 90px)); min-width: 300px; min-height: 240px; max-width: calc(100vw - 20px); max-height: calc(100vh - 70px); border: 1px solid var(--line); border-radius: 12px; background: var(--ground); box-shadow: var(--shadow-lg); overflow: hidden; resize: both; }
.mk-float[hidden] { display: none; }
.mk-float.dragging { opacity: .92; user-select: none; }
.mk-float-head { flex: none; display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 6px 0 14px; background: var(--navy-600); color: #fff; cursor: move; user-select: none; touch-action: none; }
.mk-float-head .spacer { flex: 1; }
.mk-float-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.mk-float-title svg { width: 18px; height: 18px; }
.mk-float-title b { font-weight: 600; }
.mk-float-head button { display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 8px; background: none; color: #fff; cursor: pointer; }
.mk-float-head button svg { width: 17px; height: 17px; }
.mk-float-head button:hover { background: rgba(255,255,255,.18); }
.mk-float-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.mk-float-back { display: inline-flex; align-items: center; gap: 2px; margin: -2px 0 8px; padding: 4px 6px 4px 0; border: none; background: none; color: var(--navy-600); font-family: inherit; font-size: 13.5px; cursor: pointer; }
.mk-float-back svg { width: 17px; height: 17px; }
.mk-float.min { height: 42px !important; min-height: 0; resize: none; }
.mk-float.min .mk-float-body { display: none; }
.mk-float.big { top: 70px !important; left: 20px !important; right: 20px !important; width: auto !important; height: calc(100vh - 90px) !important; max-width: none; resize: none; }
@media (max-width: 640px) {
    .mk-float { top: 58px !important; left: 0 !important; right: 0 !important; bottom: 0; width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; resize: none; }
    .mk-float.min { top: auto !important; height: 42px !important; }
    .mk-float-head { cursor: default; }
    .mk-float-head [data-w="max"] { display: none; }
    .mk-page { padding: 14px 12px 40px; }
}

/* 화면 위 오른쪽의 동그란 단추(메모·알림 종) */
.topbar-icon { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: none; border-radius: 10px; background: none; color: var(--ink-mid); cursor: pointer; }
.topbar-icon svg { width: 21px; height: 21px; }
.topbar-icon:hover { background: var(--line-soft); color: var(--ink); }
.topbar-icon.on { background: var(--navy-50); color: var(--navy-700); }
.topbar .gs-open + .topbar-icon { margin-left: 4px; }
.nt-count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--surface); border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; box-sizing: border-box; }
.nt-count[hidden] { display: none; }
.nt-bell.nudge svg { animation: nt-nudge .6s ease-in-out; transform-origin: 50% 10%; }
@keyframes nt-nudge { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.nt-panel { position: fixed; top: 62px; right: 12px; z-index: 950; display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; animation: notify-in .14s ease-out; }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.nt-head b { font-size: 14.5px; }
.nt-head small { font-size: 12px; color: var(--ink-dim); }
.nt-head .spacer { flex: 1; }
.nt-allread { border: none; background: none; color: var(--navy-600); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nt-list { flex: 1; overflow-y: auto; }
.nt-row { display: flex; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; font-family: inherit; cursor: pointer; }
.nt-row:hover { background: var(--sunken); }
.nt-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--navy-600); }
.nt-row.read .nt-dot { background: transparent; }
.nt-row.read b { font-weight: 500; color: var(--ink-mid); }
.nt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-kind { font-size: 11.5px; font-weight: 700; color: var(--navy-600); }
.nt-kind time { font-weight: 400; color: var(--ink-dim); }
.nt-main b { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.nt-detail { font-size: 12.5px; color: var(--ink-mid); overflow-wrap: anywhere; }
.nt-empty { padding: 36px 16px; text-align: center; font-size: 13px; color: var(--ink-dim); }
.nt-foot { padding: 8px 14px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-dim); }

/* ── 알림 팝업 (js/notify.js) — 오른쪽 아래, 60초 뒤 종으로 접힌다 ── */
.notify-stack { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.notify-card { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line); border-left: 4px solid var(--navy-600); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; animation: notify-in .18s ease-out; }
.notify-card.leaving { animation: notify-out .22s ease-in forwards; }
.notify-card.more { border-left-color: var(--line); }
.notify-card.more .notify-body { justify-content: center; font-size: 13px; color: var(--ink-mid); }
.notify-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 11px 6px 13px 14px; border: none; background: none; text-align: left; font-family: inherit; cursor: pointer; }
.notify-kind { font-size: 11.5px; font-weight: 700; color: var(--navy-600); }
.notify-body b { font-size: 14px; color: var(--ink); }
.notify-body span:last-child { font-size: 12.5px; color: var(--ink-mid); }
.notify-x { flex: none; width: 36px; border: none; background: none; color: var(--ink-dim); font-size: 18px; cursor: pointer; }
.notify-x:hover { color: var(--ink); }
.notify-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--navy-500); opacity: .55; transform-origin: left center; pointer-events: none; }
@keyframes notify-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes notify-out { to { transform: translate(24px, -12px) scale(.94); opacity: 0; } }
@media (max-width: 640px) { .notify-stack { right: 12px; bottom: 88px; } }
/* 검색 칸 모양 — 전체 검색 창에서 쓴다(조회 상자의 .filter-main .search 와 같은 모양) */
.gs-box { position: relative; display: block; }
.gs-box svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim); pointer-events: none; }
.gs-box input { width: 100%; padding-left: 36px; min-height: 44px; }

/* ── 첨부 미리 보기 (js/attach.js) ── */
.att-thumb { display: block; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--sunken); overflow: hidden; cursor: zoom-in; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-pv.img { display: flex; justify-content: center; align-items: center; min-height: 200px; border-radius: 8px; background: var(--sunken); }
.att-pv.img img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.att-pv.frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.att-pv.none { padding: 40px 16px; text-align: center; color: var(--ink-mid); font-size: 13.5px; }
.att-ico.big { width: 64px; height: 64px; margin: 0 auto 12px; font-size: 15px; }
.att-pv-meta { font-size: 12.5px; color: var(--ink-dim); }
.att-pv-overlay .modal-foot a.btn { text-decoration: none; }
/* 좁은 화면의 화면 위 줄 — 검색·메모·종이 들어가며 넘치지 않게 간격을 줄이고 이름 글자는 숨긴다(머리글자 동그라미는 남는다) */
@media (max-width: 560px) {
    .topbar { gap: 6px; padding: 0 10px; }
    .topbar-user .who { display: none; }
    .topbar .topbar-link { padding-left: 6px; padding-right: 6px; }
    .topbar .gs-open { margin-left: 0; }
    .topbar-icon { width: 36px; }
}
.mk-new { flex: none; white-space: nowrap; }
.mk.compact .mk-new { display: none; }

/* ── 견적서 묶음 (js/quotegroup.js, 051) — 같은 소비자의 여러 업자 견적서 ── */
.q-table tr.grouped td:first-child { box-shadow: inset 3px 0 0 var(--navy-500); }
.qg-pill { display: flex; width: max-content; align-items: center; margin: 4px 0 0; padding: 1px 8px; border: 1px solid var(--navy-100); border-radius: 999px; background: var(--navy-50); color: var(--navy-700); font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; vertical-align: 1px; }
.qg-pill:hover { background: var(--navy-100); }
.qg-protect { color: var(--navy-700); font-size: 12px; }
.qg { display: flex; flex-direction: column; gap: 14px; }
.qg-head { display: flex; flex-direction: column; gap: 6px; }
.qg-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qg-name b { font-size: 16.5px; }
.qg-name input { flex: 1; min-width: 200px; }
.qg-meta { font-size: 13px; color: var(--ink-mid); }
.qg-protect-line { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); font-size: 13px; color: var(--ink-mid); line-height: 1.6; }
.qg-protect-line.on { border-color: var(--navy-100); background: var(--navy-50); color: var(--ink); }
.qg-protect-line b { margin-right: 6px; color: var(--navy-700); }
.qg-warn { padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; }
.qg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.qg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qg-table th { padding: 8px 10px; background: var(--sunken); color: var(--ink-mid); font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.qg-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.qg-table tr:last-child td { border-bottom: none; }
.qg-table td.c { text-align: center; white-space: nowrap; }
.qg-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qg-table td.items { min-width: 160px; color: var(--ink-mid); word-break: keep-all; overflow-wrap: anywhere; }
.qg-table tr.self td { background: #fbfaff; }
.qg-table tr.link { cursor: pointer; }
.qg-table tr.link:hover td { background: var(--sunken); }
.qg-table .dim { color: var(--ink-dim); }
.qg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qg-rule { font-size: 12px; color: var(--ink-dim); }
.qg-empty { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; color: var(--ink-mid); }
.qg-empty b { color: var(--ink); font-size: 14px; }
.qg-pick { display: flex; flex-direction: column; gap: 8px; }
.qg-pick[hidden] { display: none; }
.qg-pick .search { position: relative; display: block; }
.qg-pick .search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim); pointer-events: none; }
.qg-pick .search input { width: 100%; padding-left: 36px; min-height: 40px; }
.qg-pick-out { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.qg-pick-title { position: sticky; top: 0; padding: 7px 12px; background: var(--sunken); border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-mid); }
.qg-cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.qg-cand:last-child { border-bottom: none; }
.qg-cand .t { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qg-cand .s { grid-column: 1; font-size: 12px; color: var(--ink-dim); overflow-wrap: anywhere; }
.qg-cand .btn { grid-column: 2; grid-row: 1 / span 2; }

/* ── 세금계산서 발행 (js/salebill.js, 052) ── */
.ta-c { text-align: center; }
.sb { display: flex; flex-direction: column; gap: 12px; min-width: min(360px, 80vw); }
.sb-kinds { display: flex; gap: 8px; }
.sb-kinds label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.sb-kinds label:has(input:checked) { border-color: var(--navy-500); background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.sb-kinds input { margin: 0; }
.sb .frow { display: flex; align-items: center; gap: 10px; }
.sb .frow label { flex: none; width: 4rem; font-size: 13px; color: var(--ink-mid); }
.sb .frow .fbox { flex: 1; }
.sb-paid { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.sb-paid[hidden] { display: none; }
.sb-paid small { color: var(--ink-dim); }
.sb-paid input { margin: 0; width: 16px; height: 16px; }
.sb .form-alert:empty { display: none; }
.btn.bill-on { border-color: var(--navy-100); background: var(--navy-50); color: var(--navy-700); }
/* 칸 너비를 잴 때만 잠깐 붙는다(js/grid.js 의 contentWidth) — 접힌 글을 펴서 진짜 폭을 잰다 */
.q-table.col-measuring td, .q-table.col-measuring th, .q-table.col-measuring td * { white-space: nowrap !important; }

/* ── 월별 결과 (js/views/reports.js) ── */
.mr-month { display: inline-flex; align-items: center; gap: 6px; }
.mr-month input[type=month] { width: 150px; min-height: 36px; }
.mr-kpis .mr-up { color: var(--ok); font-weight: 600; }
.mr-kpis .mr-down { color: var(--danger); font-weight: 600; }
.mr-kpis .mr-same { color: var(--ink-dim); }
.mr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.mr-card { padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mr-card h3 { margin: 0; font-size: 15px; }
.mr-note { margin: 2px 0 8px; font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
.mr-sub { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-mid); }
.mr-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px 118px; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 6px; border: none; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.mr-row .tag { justify-self: start; }
.mr-row:hover:not(:disabled) { background: var(--sunken); }
.mr-row.on { background: var(--navy-50); }
.mr-row:disabled { cursor: default; opacity: .6; }
.mr-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.mr-bar i { display: block; height: 100%; border-radius: 4px; border: none !important; }
.mr-n { text-align: right; font-size: 14px; }
.mr-amt { text-align: right; font-size: 12.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.mr-list { margin-top: 14px; }
.mr-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mr-list-head .spacer { flex: 1; }
.mr-line { cursor: pointer; }
.mr-line:hover td { background: var(--sunken); }
@media (max-width: 640px) { .mr-row { grid-template-columns: 84px minmax(0, 1fr) 32px 96px; gap: 6px; } .mr-month input[type=month] { width: 130px; } }
.mr-bar i.st-blue { background: #3b6fe0; } .mr-bar i.st-green { background: #22a35a; } .mr-bar i.st-red { background: #e02d3c; }
.mr-bar i.st-gray { background: #94a3b8; } .mr-bar i.st-indigo { background: #5b4bd8; } .mr-bar i.st-teal { background: #14a093; }
.mr-bar i.st-amber { background: #e59a1c; } .mr-bar i.st-orange { background: #ea6c1f; }

/* ══════════════════════════════════════════════════════════════════════════
   다크모드 (사용자 요청 2026-10-19 — 짙은 회청색, 미리보기보다 조금 더 어둡게)
   js/theme.js 가 <html data-theme="dark"> 를 붙인다. 색 이름(:root 토큰)의 어두운 판을 한 벌 두고,
   토큰을 거치지 않고 직접 박힌 색은 아래에서 하나씩 덮는다. 새 화면에 #색을 직접 쓰면 여기도 더할 것.
   마우스를 올리면 뜨는 작은 창(.head-pop, .info-pop)과 토스트는 --navy-900 을 바탕으로 쓰므로
   그 색은 어두운 모드에서도 더 진하게 두고 테두리를 둘러 바탕과 가른다(밝게 뒤집으면 흰 글씨가 안 보인다).
   인쇄 미리보기(.printsheet)와 작업보호 요청서 종이는 늘 흰 종이다.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    color-scheme: dark;
    --navy-900: #070b11;
    --navy-800: #8592ff;
    --navy-700: #6d7cf5;
    --navy-600: #5f6ff0;
    --navy-500: #8b9bff;
    --navy-100: #2f3970;
    --navy-50:  #1d2346;
    --focus-ring: rgba(139, 155, 255, .3);
    --brand-red: #ff5d6e;
    --ink:      #e4e9f2;
    --ink-mid:  #a5afc0;
    --ink-dim:  #8a95a6;
    /* 바탕·카드·메뉴 — 2026-10-26 사용자가 "너무 어둡다" 며 미리보기 넷 중 C(슬레이트 쪽으로 한 단계 밝게)를 고름. 예전: ground #0f141c · surface #161c27 */
    --line:     #3a4453;
    --line-soft:#323b48;
    --surface:  #2a323e;
    --ground:   #212933;
    --sunken:   #303946;
    --side:     #1a2028;
    --ok: #4ade80;   --ok-bg: rgba(74, 222, 128, .12);
    --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .12);
    --danger: #f87171; --danger-bg: rgba(248, 113, 113, .12);
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
    --memo-red: #3a1f24;    --memo-red-line: #5a2e35;
    --memo-orange: #3a2a1c; --memo-orange-line: #5c4127;
    --memo-yellow: #35311c; --memo-yellow-line: #57502a;
    --memo-green: #1e3124;  --memo-green-line: #2e4b35;
    --memo-teal: #1a3230;   --memo-teal-line: #284d48;
    --memo-blue: #1b2741;   --memo-blue-line: #2b3d63;
    --memo-purple: #282041; --memo-purple-line: #3f3262;
    --memo-gray: #232833;   --memo-gray-line: #353c4b;
}
html[data-theme="dark"] body { background: var(--ground); color: var(--ink); }
html[data-theme="dark"] .db-kpis, html[data-theme="dark"] .db-grid {
    --fg-text: var(--ink); --fg-text-70: var(--ink-mid); --fg-text-50: var(--ink-dim); --fg-stroke: var(--line);
    --fg-blue: #5aa9ff; --fg-blue-soft: rgba(90, 169, 255, .12); --fg-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* 마우스를 올리면 뜨는 작은 창 · 토스트 */
html[data-theme="dark"] .head-pop, html[data-theme="dark"] .info-pop, html[data-theme="dark"] .toast { border: 1px solid #33405a; }
html[data-theme="dark"] .hp-title { color: #9fb2d6; }

/* 단추 · 입력칸 */
html[data-theme="dark"] .btn.secondary { color: var(--ink); }
html[data-theme="dark"] .btn.secondary:hover, html[data-theme="dark"] .btn.ghost:hover { background: var(--sunken); }
html[data-theme="dark"] .btn.danger:hover { background: #dc4c4c; }
html[data-theme="dark"] .btn.quiet-danger:hover, html[data-theme="dark"] .ua-act.danger { border-color: rgba(248, 113, 113, .4); }
html[data-theme="dark"] .btn.cta { border-color: var(--navy-600); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html[data-theme="dark"] :where(select, input, textarea):where(:hover:not(:disabled):not([readonly])) { border-color: #4a5566; }
html[data-theme="dark"] .frow input, html[data-theme="dark"] .frow select, html[data-theme="dark"] .frow textarea,
html[data-theme="dark"] .q-table td > input[type="text"], html[data-theme="dark"] .q-table td > input[type="date"],
html[data-theme="dark"] .adv select, html[data-theme="dark"] .adv input { border-color: var(--line); background-color: var(--sunken); }
html[data-theme="dark"] .frow textarea:hover:not([readonly]), html[data-theme="dark"] .adv select:hover, html[data-theme="dark"] .adv input:hover { border-color: #4a5566; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6e7a8c; }
html[data-theme="dark"] .frow input:disabled, html[data-theme="dark"] .frow input[readonly],
html[data-theme="dark"] .frow select:disabled, html[data-theme="dark"] .frow textarea[readonly] { background: var(--ground); border-color: var(--line-soft); }
html[data-theme="dark"] .info-dot { border-color: #4a5566; }
html[data-theme="dark"] .info-dot:hover, html[data-theme="dark"] .info-dot:focus { border-color: #5a6679; }
html[data-theme="dark"] .set-card:not([open]) .set-switch { background: #48525f; }

/* 창 · 표 */
html[data-theme="dark"] .modal-foot { background: var(--sunken); }
html[data-theme="dark"] .db-status button { background: var(--sunken); }
html[data-theme="dark"] .detail-note.bad { border-color: rgba(248, 113, 113, .35); }
html[data-theme="dark"] .q-table tbody tr.followup td, html[data-theme="dark"] tr.pr-soon td { background: rgba(251, 191, 36, .06); }
html[data-theme="dark"] .q-table tbody tr.overdue td { background: rgba(248, 113, 113, .07); }
html[data-theme="dark"] .q-table tbody tr.ua-stopped-row:hover td { background: rgba(248, 113, 113, .14); }
html[data-theme="dark"] .price-table tr.row-changed td { background: rgba(251, 191, 36, .07); }
html[data-theme="dark"] .price-table tr.row-changed:hover td { background: rgba(251, 191, 36, .12); }
html[data-theme="dark"] .price-table .col-name input.changed, html[data-theme="dark"] .price-table .col-price input.changed { background: rgba(251, 191, 36, .1); color: #fcd34d; }
html[data-theme="dark"] .q-actual-note { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); color: #fcd34d; }
html[data-theme="dark"] .qg-table tr.self td { background: var(--navy-50); }

/* 진행상태 알약 · 꼬리표 */
html[data-theme="dark"] .tag.st-gray   { background: rgba(148, 163, 184, .16); color: #cbd5e1; border-color: transparent; }
html[data-theme="dark"] .tag.st-sky    { background: rgba(56, 189, 248, .16);  color: #7dd3fc; border-color: transparent; }
html[data-theme="dark"] .tag.st-blue   { background: rgba(96, 165, 250, .16);  color: #93c5fd; border-color: transparent; }
html[data-theme="dark"] .tag.st-indigo { background: rgba(129, 140, 248, .18); color: #a5b4fc; border-color: transparent; }
html[data-theme="dark"] .tag.st-amber  { background: rgba(251, 191, 36, .16);  color: #fcd34d; border-color: transparent; }
html[data-theme="dark"] .tag.st-orange { background: rgba(251, 146, 60, .16);  color: #fdba74; border-color: transparent; }
html[data-theme="dark"] .tag.st-yellow { background: rgba(250, 204, 21, .14);  color: #fde047; border-color: transparent; }
html[data-theme="dark"] .tag.st-purple { background: rgba(192, 132, 252, .16); color: #d8b4fe; border-color: transparent; }
html[data-theme="dark"] .tag.st-teal   { background: rgba(45, 212, 191, .15);  color: #5eead4; border-color: transparent; }
html[data-theme="dark"] .tag.st-green  { background: rgba(74, 222, 128, .15);  color: #86efac; border-color: transparent; }
html[data-theme="dark"] .tag.st-red    { background: rgba(248, 113, 113, .16); color: #fca5a5; border-color: transparent; }
html[data-theme="dark"] .tag.lose { color: #fca5a5; }
html[data-theme="dark"] .tag.win  { color: #86efac; }
html[data-theme="dark"] .tag.wait { color: #fcd34d; }
html[data-theme="dark"] .tag.dealer, html[data-theme="dark"] .badge.dealer { background: rgba(255, 93, 110, .15); }
html[data-theme="dark"] .tag.partner, html[data-theme="dark"] .badge.partner { background: rgba(192, 132, 33, .18); color: #f2c27a; }
html[data-theme="dark"] .src-tag.hq, html[data-theme="dark"] .head-badge.tone-hq { background: rgba(224, 168, 26, .16); color: #f2c94c; border-color: rgba(224, 168, 26, .45); }
html[data-theme="dark"] .head-badge.tone-wait { background: rgba(240, 160, 75, .14); color: #fdba74; border-color: rgba(240, 160, 75, .45); }
html[data-theme="dark"] .src-tag.as { background: rgba(96, 165, 250, .16); color: #93c5fd; }
html[data-theme="dark"] .lock-mark, html[data-theme="dark"] .as-warranty.in { background: rgba(74, 222, 128, .14); color: #86efac; }

/* 캘린더 일정 색 */
html[data-theme="dark"] .ev.visit, html[data-theme="dark"] .ev.visit.k-product { background: rgba(248, 113, 113, .16); color: #fca5a5; border-color: #ef4444; }
html[data-theme="dark"] .ev.visit.k-as { background: rgba(96, 165, 250, .16); color: #93c5fd; border-color: #3b82f6; }
html[data-theme="dark"] .ev.visit.k-meet { background: rgba(74, 222, 128, .14); color: #86efac; border-color: #22c55e; }
html[data-theme="dark"] .ev.due   { background: rgba(244, 114, 182, .15); color: #f9a8d4; border-color: #ec4899; }
html[data-theme="dark"] .ev.event { background: rgba(167, 139, 250, .16); color: #c4b5fd; border-color: #8b5cf6; }
html[data-theme="dark"] .ev.leave { background: rgba(45, 212, 191, .15); color: #5eead4; border-color: #14b8a6; }

/* 메모 (js/memo.js) — 검은 알파로 칠하던 것을 흰 알파로 */
html[data-theme="dark"] .mk-chip { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] button.mk-chip:hover:not(:disabled), html[data-theme="dark"] .mk-pin:hover,
html[data-theme="dark"] .mk-e-tools button:hover { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .mk-e-tools button { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .mk-e-items li { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .mk-e-foot { border-top-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .mk-e-hist { border-top-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .mk-by { border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .mk-hist li { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .mk-hist-body > div { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .mk-e-cmts { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .mk-c-list li { border-bottom-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .mk-c-acts button:hover { background: rgba(255, 255, 255, .08); }

/* 늘 흰 종이인 곳 — 인쇄 미리보기, 작업보호 요청서. 안에서는 밝은 색 이름으로 되돌린다 */
html[data-theme="dark"] .printsheet {
    color-scheme: light; color: #111;
    --ink: #1c1b29; --ink-mid: #4b4a5e; --ink-dim: #8b8aa0; --line: #e4e3ee; --line-soft: #f0eff6;
    --surface: #ffffff; --ground: #f6f5fb; --sunken: #faf9fd;
}

/* 화면 색 고르는 메뉴 (js/theme.js) */
.theme-menu button { color: var(--ink); }
.theme-menu button svg { width: 16px; height: 16px; flex: none; }
html[data-theme="dark"] .jsr-fc .fc-event.jsr-ev:hover { filter: brightness(1.18); }
/* 좁은 화면의 화면 위 줄 — 화면 색 단추가 늘어 단추를 조금 줄인다(2026-10-19) */
@media (max-width: 560px) { .topbar { gap: 4px; } .topbar-icon { width: 32px; } }

/* ═══════════ 왼쪽 메뉴 묶음 접기 · 화면 위 제목 · 제목 옆 조회 상자 (사용자 요청 2026-10-19) ═══════════
   메뉴 모양은 Mantine 의 "묶음 링크"(MIT)를 보고 사용자가 골랐다 — 묶음마다 색 네모 아이콘, 펼친 메뉴는 가는 세로줄 안쪽,
   고른 메뉴는 왼쪽 보라 줄. 코드는 가져오지 않고 모양만 따랐다(js/app.js 의 renderMenu). */
.sidebar {
    --nav-ic-bg: rgba(124, 102, 247, .2);  --nav-ic-fg: #b9aeff;
    --nav-on-bg: rgba(124, 102, 247, .16); --nav-on-bar: #8b7bff;
}
.nav-group, .nav-solo { margin-bottom: 2px; }
.nav-group-head {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 6px 8px;
    border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; color: #c9c7da;
}
.nav-group-head:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-group-head .nav-label { flex: 1; }
.nav-ic {
    width: 28px; height: 28px; border-radius: 7px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nav-ic-bg); color: var(--nav-ic-fg);
}
.nav-item .nav-ic { flex: none; }
.nav-ic svg, .nav-item .nav-ic svg, .nav-item:hover .nav-ic svg, .nav-item.active .nav-ic svg { width: 16px; height: 16px; color: inherit; }
.nav-chev { display: inline-flex; color: #77758c; transition: transform .18s ease; }
.nav-chev svg { width: 15px; height: 15px; }
.nav-group.open .nav-chev { transform: rotate(90deg); }
.nav-group-head .nav-badge {
    flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
/* 펼침은 높이를 0fr → 1fr 로 — 안의 메뉴 개수를 몰라도 부드럽게 열린다 */
.nav-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.nav-kids-in { overflow: hidden; min-height: 0; margin-left: 22px; border-left: 1px solid rgba(255, 255, 255, .1); }
.nav-group.open > .nav-kids { grid-template-rows: 1fr; }
.nav-group.open .nav-kids-in { margin-top: 2px; margin-bottom: 6px; }
.nav-kids .nav-item {
    padding: 7px 10px 7px 17px; margin-left: -1px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
    font-size: 13.5px; color: #a9a7bd;
}
.nav-kids .nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-kids .nav-item.active { background: var(--nav-on-bg); border-left-color: var(--nav-on-bar); color: #fff; font-weight: 600; }
.nav-solo .nav-item { gap: 11px; padding: 6px 8px; }
.nav-solo .nav-item.active { background: var(--nav-on-bg); color: #fff; }
.nav-solo .nav-item.active .nav-ic { background: var(--navy-600); color: #fff; }
html[data-theme="dark"] .sidebar {
    --nav-ic-bg: rgba(111, 125, 255, .18); --nav-ic-fg: #a5b1ff;
    --nav-on-bg: rgba(111, 125, 255, .16); --nav-on-bar: #8b9bff;
}
@media (prefers-reduced-motion: reduce) { .nav-kids, .nav-chev { transition: none; } }

/* 화면 위 제목 — 메뉴 묶음 아이콘 · 묶음 이름 › 화면 이름. 본문의 작은 위치 글씨는 여기와 겹쳐 숨긴다 */
.topbar-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.topbar-title .tb-ic {
    width: 30px; height: 30px; border-radius: 8px; flex: none; margin-right: 2px;
    display: inline-flex; align-items: center; justify-content: center; background: var(--navy-50); color: var(--navy-600);
}
.topbar-title .tb-ic svg { width: 17px; height: 17px; }
.topbar-title .tb-crumb { font-size: 13px; font-weight: 500; color: var(--ink-dim); }
.topbar-title .tb-crumb::after { content: '›'; margin-left: 8px; }
.topbar-title .tb-name { overflow: hidden; text-overflow: ellipsis; }
.page-head .crumb { display: none; }
/* 좁아져도 아이콘 · 묶음 › 이름 모양은 그대로 두고(사용자 결정 2026-10-19) 한 줄을 지킨다 — "주 / 문서" 처럼 끊기지 않게.
   자리가 모자라면 화면 이름 끝이 … 로 줄고, 760px 아래에서는 오른쪽 이름 글자를 빼서 자리를 낸다(머리글자 동그라미는 남는다). */
.topbar-title { flex: 0 1 auto; overflow: hidden; }
.topbar-title .tb-crumb { flex: none; }
@media (max-width: 1000px) { .topbar .gs-open { min-width: 150px; } }
@media (max-width: 860px) {   /* 메뉴가 서랍으로 들어가는 폭 — 검색은 돋보기 단추만(Ctrl+K 는 그대로) */
    .topbar .gs-open { min-width: 0; margin-left: 6px; padding: 0 10px; }
    .topbar .gs-open span, .topbar .gs-open kbd { display: none; }
}
@media (max-width: 760px) {
    .topbar { gap: 6px; padding: 0 12px; }
    .topbar-user .who { display: none; }
    .topbar-title { padding-left: 10px; gap: 6px; font-size: 14px; }
    .topbar-title .tb-ic { width: 28px; height: 28px; }
    .topbar-title .tb-crumb { font-size: 12.5px; }
    .topbar .topbar-link { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 560px) { .topbar-title { display: none; } }   /* 휴대폰은 본문 제목만 — 위 줄은 단추로 찬다(위 inline-flex 가 예전 규칙을 덮어서 다시 적는다) */

/* 화면 위 오른쪽 단추(메모 · 화면 색 · 종)도 메뉴와 같은 옅은 보라 네모 */
.topbar-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--navy-50); color: var(--navy-600); }
.topbar-icon svg { width: 19px; height: 19px; }
.topbar-icon:hover { background: var(--navy-100); color: var(--navy-700); }
.topbar-icon.on { background: var(--navy-600); color: #fff; }
.topbar .topbar-icon + .topbar-icon { margin-left: 2px; }
@media (max-width: 560px) { .topbar-icon { width: 32px; height: 32px; } }

/* 목록 화면의 조회 상자는 제목 바로 옆에 둔다 — 표가 한 줄 반 위로 올라온다.
   자리가 모자라면(좁은 창·휴대폰) 제목 아래 줄로 내려가 가득 찬다. */
.head-row:has(> .filterbox) { column-gap: 24px; }
.head-row > .filterbox { flex: 1 1 0; min-width: min(100%, 560px); max-width: 960px; margin: 0; }
.head-row > .filterbox ~ .spacer { display: none; }
@media (max-width: 480px) { .head-row .filterbox .segment { width: auto; } }

/* ═══════════ 급여 · 월 마감 (053, 2026-10-19) — js/views/payroll.js, js/payslip.js ═══════════ */
.pay-month { display: inline-flex; align-items: center; gap: 4px; }
.pay-month input[type="month"] { height: 36px; min-height: 36px; padding: 0 8px; }
.pay-month .btn.small { min-width: 34px; padding: 0 8px; }
.pay-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 12px;
    padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13.5px; color: var(--ink-mid);
}
.pay-bar b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pay-bar .pay-net { color: var(--navy-600); }
.pay-bar label { display: inline-flex; align-items: center; gap: 8px; }
.pay-bar input[type="date"] { height: 34px; min-height: 34px; }
.pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 급여 연간 보기(2026-10-26) — 급여 화면의 "연간 보기" 창 */
.py-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.py-bar .py-year { min-width: 64px; text-align: center; font-size: 15px; }
.py-bar select { min-width: 180px; }
.py-bar .py-note { font-size: 12.5px; }
.py-table { min-width: 600px; }   /* 좁은 화면에서는 금액을 자르지 않고 옆으로 밀어 본다 */
.py-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.py-table tfoot td { font-weight: 700; background: var(--sunken); border-top: 1px solid var(--line); }
.py-table tr.py-click { cursor: pointer; }
.py-table tr.py-extra td { background: var(--navy-50); }
.py-table tr.py-empty td { color: var(--ink-dim); }
.py-items { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.py-items > div { flex: 1 1 240px; min-width: 0; }
.py-items h4 { font-size: 13px; margin: 0 0 6px; color: var(--ink-mid); }
.py-items td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pay-table td.ta-c { text-align: center; }
.pay-table tbody tr[data-user] { cursor: pointer; }
.pay-table tr.pay-empty td { color: var(--ink-dim); }
.pay-acts { white-space: nowrap; text-align: right; }
.pay-acts .btn + .btn { margin-left: 4px; }
/* 적는 창 */
.pay-edit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; font-size: 13.5px; }
.pay-edit-top label { display: inline-flex; align-items: center; gap: 6px; }
.pay-edit-top input#peOt { width: 64px; text-align: center; }
.pay-edit-top input[type="date"] { width: 150px; }
.pay-edit-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pay-edit-cols h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.pay-edit-cols h3 small { font-size: 12px; font-weight: 500; color: var(--ink-dim); margin-left: 4px; }
.pay-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 28px; gap: 6px; margin-bottom: 6px; }
.pay-line.pay { padding-bottom: 6px; border-bottom: 1px dashed var(--line-soft); }
.pay-line input { min-width: 0; height: 36px; min-height: 36px; }
.pay-line input.amt { text-align: right; font-variant-numeric: tabular-nums; }
.pay-line input.how { grid-column: 1 / 3; height: 32px; min-height: 32px; font-size: 12.5px; color: var(--ink-mid); }
.pay-x { border: 0; background: none; color: var(--ink-dim); font-size: 18px; cursor: pointer; border-radius: 6px; }
.pay-x:hover { background: var(--danger-bg); color: var(--danger); }
.pay-edit-tot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.pay-edit-tot b, .pay-edit-net b { font-variant-numeric: tabular-nums; }
.pay-edit-net {
    display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 12px 14px;
    border-radius: var(--radius-sm); background: var(--navy-50); color: var(--navy-700); font-size: 14px;
}
.pay-edit-net b { font-size: 20px; }
.pay-edit-net b.neg { color: var(--danger); }
@media (max-width: 760px) { .pay-edit-cols { grid-template-columns: 1fr; } }
/* 계정 설정 › 내 급여명세서 */
.ps-mine { display: grid; gap: 6px; }
.ps-mine-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
}
.ps-mine-row:hover { border-color: var(--navy-500); }
.ps-mine-open { margin-left: auto; color: var(--navy-600); font-size: 13px; }
.pslip-preview + .pslip-preview { margin-top: 14px; }
/* 추가 명세서 — 보너스·인센티브 (055) */
.pay-extra-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; }
.pay-extra-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.pay-extra-head h2 small { margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-dim); }
.px-titles { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.px-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; padding: 10px 12px;
             border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.px-people label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.px-people > .dim:last-child { width: 100%; font-size: 12px; }
.pay-none { margin: 4px 0 10px; font-size: 12.5px; }

/* ═══════════ 출고요청서 (056, js/views/shipRequests.js) ═══════════ */
.sr-method { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sr-method input { flex: 1 1 180px; min-width: 0; }
.sr-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sr-addr-box { display: flex; gap: 6px; }
/* 공급처 제목 바로 옆 "JSR본사 · 랩트론본사" 단추 — 출고요청서·발주서(SlipScreen.hqButton/mountHq) */
.fsec.hq-fsec { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.fsec .hq-btns { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.fsec .hq-btn { font-weight: 600; color: var(--navy-600); padding: 1px 11px; }
.sr-addr-box input { flex: 1; min-width: 0; }

/* 거래처가 JSR특약점(주황)·JSR대리점(보라)이면 거래처 칸(코드·이름)을 그 색으로 물들인다 — UI.markDealer.
   사용자가 미리보기 네 시안 중 B 를 고름(2026-10-22). 표시만 하고 단가와는 상관없다. 인쇄물에는 없다. */
:root {
    --dealer-sp: #b45309; --dealer-sp-bg: #fff7e8; --dealer-sp-line: #f3c98b;
    --dealer-dl: #5b3df5; --dealer-dl-bg: #f4f1ff; --dealer-dl-line: #c9bdff;
}
html[data-theme="dark"] {
    --dealer-sp: #f5a855; --dealer-sp-bg: rgba(245, 168, 85, .12); --dealer-sp-line: rgba(245, 168, 85, .55);
    --dealer-dl: #a99bff; --dealer-dl-bg: rgba(139, 155, 255, .14); --dealer-dl-line: rgba(169, 155, 255, .6);
}
.q-form .party-box.dealer-sp > input[type="text"] { color: var(--dealer-sp); background: var(--dealer-sp-bg); border-color: var(--dealer-sp-line); }
.q-form .party-box.dealer-dl > input[type="text"] { color: var(--dealer-dl); background: var(--dealer-dl-bg); border-color: var(--dealer-dl-line); }
.q-form .party-box.dealer-sp > input[id$="Name"], .q-form .party-box.dealer-dl > input[id$="Name"] { font-weight: 700; }
/* 회사 정보 › 브랜드 본사 — 걸어 둔 거래처 한 줄 + 고르기·빼기 */
.brand-cust { display: flex; gap: 6px; align-items: center; }
.brand-cust input[type="text"] { flex: 1; min-width: 0; }
@media (max-width: 560px) { .brand-cust { flex-wrap: wrap; } }

/* 메일로 보낸 문서 보기 (/doc, 062) — 받는 분 화면. 로그인 없이 열리고 늘 밝다(theme.js 를 읽지 않는다).
   사용자가 미리보기로 고른 모양: 메일과 같은 남색 띠 머리 + 빨간 로고, 상태 상자, 문서, 아래 고정 단추 줄. */
body.doc-page { padding: 12px; background: #ebeaf0; }
body.doc-page .sign-card { max-width: 880px; padding: 0; background: transparent; box-shadow: none; }
.doc-view { text-align: left; background: #f4f3f8; border-radius: 16px; overflow: hidden; border: 1px solid #dddce6; color: #1f1e2c; }
.doc-band { background: #1c1b29; color: #fff; padding: 18px 22px 20px; border-bottom: 4px solid #6f57f7; }
.doc-band-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-band-row img { height: 22px; display: block; }
.doc-band-row .from { font-size: 12.5px; color: #b9b6cc; border-left: 1px solid rgba(255,255,255,.2); padding-left: 10px; }
.doc-band-row .until { margin-left: auto; font-size: 12px; color: #b9b6cc; }
.doc-band h1 { margin: 12px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-band h1 .no { font-size: 12.5px; font-weight: 500; color: #d9d4ff; background: rgba(143,123,255,.18); border: 1px solid rgba(143,123,255,.35); border-radius: 6px; padding: 1px 8px; }
.doc-state { margin: 14px 16px 0; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; }
.doc-state .ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; margin-top: 1px; }
.doc-state.info { background: #f1eeff; color: #3b25b8; } .doc-state.info .ic { background: #5b3df5; color: #fff; }
.doc-state.ok { background: #e9f9ee; color: #15703d; } .doc-state.ok .ic { background: #16a34a; color: #fff; }
.doc-state.off { background: #ececf1; color: #555; } .doc-state.off .ic { background: #8a879c; color: #fff; }
.doc-paper { padding: 14px 16px; }
.doc-fit { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); overflow: hidden; }
.doc-fit .printsheet.preview { width: 760px; margin: 0 auto; }   /* 넓은 화면에서는 가운데, 좁으면 doc-page.js 의 fit() 이 줄인다 */
.doc-sign { margin: 0 16px 14px; background: #fff; border: 1px solid #dddce6; border-radius: 14px; padding: 16px; }
.doc-sign h3 { margin: 0; font-size: 15px; }
.doc-sign p { margin: 2px 0 10px; font-size: 12.5px; color: #77748a; }
.doc-sign input { width: 100%; min-height: 46px; font-size: 15px; }
.doc-pad { position: relative; margin-top: 10px; }
.doc-pad .sg-pad { border-color: #c9c5dd; background: #fcfbff; }
.doc-clear { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: #5b3df5; font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px; }
.doc-bar { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border-top: 1px solid #e5e4ec; }
.doc-bar .spacer { flex: 1; }
.doc-bar .btn { min-height: 46px; padding-left: 18px; padding-right: 18px; }
.doc-howto { margin: 0; padding: 8px 18px 0; background: #fff; }
.doc-foot { padding: 12px 18px 16px; font-size: 11.5px; line-height: 1.7; color: #8a879c; background: #fff; }
.doc-foot .doc-privacy { display: block; margin-top: 6px; color: #a09db0; }   /* 개인정보 안내(2026-10-26 사용자 승인) */
@media (max-width: 480px) {
    body.doc-page { padding: 0; }
    .doc-view { border-radius: 0; border: 0; }
    .doc-band-row .until { margin-left: 0; width: 100%; }
}

/* 메일 보내기 창 (062, js/mailsend.js) — 왼쪽 받는 사람·메일·첨부, 오른쪽 받는 메일 작게·안내·보낸 메일 */
.ms-cols { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 0; margin: -4px -4px 0; }
.ms-main { padding: 0 18px 8px 4px; min-width: 0; }
.ms-side { border-left: 1px solid var(--line); background: var(--sunken); padding: 14px; border-radius: 0 0 0 0; }
.ms-side h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-mid); }
@media (max-width: 860px) { .ms-cols { grid-template-columns: 1fr; } .ms-main { padding-right: 4px; } .ms-side { border-left: 0; border-top: 1px solid var(--line); margin-top: 12px; } }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ms-table th { background: var(--sunken); color: var(--ink-mid); font-weight: 600; font-size: 12.5px; padding: 8px; border-bottom: 1px solid var(--line); text-align: center; }
.ms-table td { padding: 5px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ms-table input[type="text"] { width: 100%; min-height: 38px; }
.ms-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ms-seg button { border: 0; background: var(--surface); color: var(--ink-mid); font: inherit; font-size: 12.5px; padding: 7px 10px; cursor: pointer; min-height: 36px; }
.ms-seg button.on { background: var(--navy-600); color: #fff; font-weight: 600; }
.ms-x { text-align: center; }
.ms-del { border: 0; background: none; color: var(--ink-dim); font-size: 14px; cursor: pointer; padding: 8px; }
.ms-del:hover { color: var(--danger); }
.ms-ro { color: var(--ink-mid); background: var(--sunken) !important; }
.ms-att { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-att label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--surface); cursor: pointer; }
.ms-att label small { color: var(--ink-dim); }
.ms-thumb { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); font-size: 11.5px; color: #333; }
.ms-thumb-band { background: #1c1b29; color: #fff; padding: 10px 12px 12px; border-bottom: 3px solid #6f57f7; }
.ms-thumb-band img { height: 13px; vertical-align: middle; }
.ms-thumb-band span { font-size: 10px; color: #b9b6cc; margin-left: 6px; vertical-align: middle; }
.ms-thumb-band b { display: block; font-size: 15px; margin-top: 6px; color: #fff; }
.ms-thumb-band i { font-style: normal; font-size: 10px; color: #d9d4ff; }
.ms-thumb-body { padding: 8px 12px; line-height: 1.55; }
.ms-thumb-body span { color: #888; }
.ms-thumb-go { margin: 6px 12px 10px; background: #5b3df5; color: #fff; text-align: center; border-radius: 6px; padding: 6px; font-weight: 700; }
.ms-note { font-size: 12px; color: var(--ink-mid); line-height: 1.7; margin-top: 12px; }
.ms-note b { color: var(--ink); }
.ms-none { font-size: 12px; color: var(--ink-dim); margin: 0; }
.ms-sent-row { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-mid); padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.ms-sent-row .tag { font-size: 10.5px; flex: none; }
.ms-sent-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ms-cancel { border: 0; background: none; color: var(--danger); font: inherit; font-size: 11.5px; cursor: pointer; flex: none; padding: 4px; }

/* 메일 보내기 단추 (062, 사용자 요청 2026-10-26) — 다른 단추와 갈라 보이게 하늘색 바탕. 밝게·어둡게 두 벌.
   전표 창 아래 "메일 보내기" 와 인쇄 미리보기의 "메일 보내기" 가 같은 모양이다.
   "메일 보내기" 로 미리보기를 열면(mail-go) 그 단추를 진하게 앞세우고 위에 안내 한 줄(mail-hint). */
:root {
    --mail-bg: #e6f2ff; --mail-fg: #0b5cad; --mail-line: #b9d9fb; --mail-bg-hover: #d4e8fd;
    --mail-go-bg: #1677d2; --mail-go-fg: #ffffff; --mail-go-hover: #0f63b3;
}
html[data-theme="dark"] {
    --mail-bg: rgba(56, 139, 253, .16); --mail-fg: #8cc4ff; --mail-line: rgba(56, 139, 253, .45); --mail-bg-hover: rgba(56, 139, 253, .26);
    --mail-go-bg: #2f81f7; --mail-go-fg: #ffffff; --mail-go-hover: #1f6feb;
}
.btn.mail-btn { background: var(--mail-bg); color: var(--mail-fg); border: 1px solid var(--mail-line); font-weight: 600; box-shadow: none; }
.btn.mail-btn:hover { background: var(--mail-bg-hover); }
.btn.mail-btn.mail-go { background: var(--mail-go-bg); color: var(--mail-go-fg); border-color: var(--mail-go-bg); }
.btn.mail-btn.mail-go:hover { background: var(--mail-go-hover); }
.mail-hint { font-size: 13px; color: var(--mail-fg); background: var(--mail-bg); border: 1px solid var(--mail-line); border-radius: 8px; padding: 4px 10px; }
.mail-hint b { color: inherit; }

/* 업무 보드 글자 한 단계 크게(+1px, 사용자 요청 2026-10-26 — 미리보기로 확인) — home.js 가 .db-page 로 감싼다 */
.db-page .page-head h1 { font-size: 24px; }
.db-page .page-head p { font-size: 15px; }
.db-page .btn.small { font-size: 13.5px; }
.db-page .db-kpi span { font-size: 14px; }
.db-page .db-kpi b { font-size: 25px; }
.db-page .db-kpi small { font-size: 13px; }
.db-page .db-card h2 { font-size: 14px; }
.db-page .db-count { font-size: 13px; }
.db-page .db-main { font-size: 14.5px; }
.db-page .db-sub { font-size: 13px; }
.db-page .db-right { font-size: 14px; }
.db-page .db-empty { font-size: 14px; }
.db-page .dim { font-size: 14px; }
.db-page .tag { font-size: 12.5px; }
.db-page .db-status span { font-size: 13px; }
.db-page .db-status b { font-size: 20px; }
@media (max-width: 768px) { .db-page .page-head h1 { font-size: 21px; } }
@media (max-width: 480px) { .db-page .page-head h1 { font-size: 19.5px; } .db-page .db-kpi b { font-size: 21px; } }

/* ═══════════ 사용 안내 (2026-10-27) — js/views/guide.js ═══════════
   업무 흐름 그림은 줄(lane) 셋: 파는 일 · 사오는 일 · 곁에서 함께. 좁으면 칸이 아래로 접힌다. */
.g-wrap { max-width: 1100px; }
.g-flow { display: flex; flex-direction: column; gap: 14px; }
.g-lane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.g-lane-name { font-size: 13px; font-weight: 700; color: var(--ink-mid); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.g-lane-name small { font-weight: 400; color: var(--ink-dim); }
.g-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; }
.g-steps li { display: flex; align-items: center; }
.g-step {
    display: flex; flex-direction: column; gap: 3px; min-width: 132px; min-height: 58px; padding: 9px 12px; text-align: left;
    border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--sunken); color: var(--ink); cursor: pointer; font: inherit;
}
.g-step b { font-size: 14px; }
.g-step small { font-size: 12px; color: var(--ink-dim); }
.g-step:hover, .g-step:focus-visible { border-color: var(--navy-500); background: var(--navy-50); outline: none; }
.g-sale .g-step { border-left: 3px solid var(--navy-600); }
.g-buy .g-step { border-left: 3px solid #d98a00; }
.g-side .g-steps { gap: 8px; }
.g-side .g-step { border-left: 3px solid var(--ink-dim); }
.g-arrow { padding: 0 8px; color: var(--ink-dim); font-size: 16px; }
.g-flow-notes { margin-top: 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
.g-flow-notes p { margin: 0; }
.g-btn { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--sunken); font-size: .92em; color: var(--ink); white-space: nowrap; }
/* 안내 본문 — 왼쪽 차례(넓을 때 붙어 있음) + 오른쪽 칸 */
.g-staff, .g-owner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.g-toc { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.g-toc a { padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-mid); text-decoration: none; }
.g-toc a:hover { background: var(--navy-50); color: var(--navy-600); }
.g-body { display: flex; flex-direction: column; gap: 12px; }
.g-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 10px; scroll-margin-top: 10px; }
.g-sec h2 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.g-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--navy-50); color: var(--navy-600); font-size: 12px; }
.g-sec ul, .g-pop ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.7; }
/* 「자세히」 — 늘 보이는 몇 줄 아래에 접어 둔 나머지(2026-10-29) */
.g-more { margin-top: 8px; }
.g-more summary { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; color: var(--navy-700); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.g-more summary::-webkit-details-marker { display: none; }
.g-more summary::before { content: "▸"; transition: transform .15s; }
.g-more[open] summary::before { transform: rotate(90deg); }
.g-more ul { margin-top: 6px; color: var(--ink-mid); font-size: 13.5px; }
.g-pop-from { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-dim); }
@media (max-width: 860px) {
    .g-staff, .g-owner { grid-template-columns: 1fr; }
    .g-toc { position: static; flex-direction: row; flex-wrap: wrap; }
    .g-step { min-width: 0; }
    .g-arrow { padding: 0 4px; }
}
@media (max-width: 560px) {
    .g-steps { flex-direction: column; align-items: stretch; }
    .g-steps li { flex-direction: column; align-items: stretch; }
    .g-arrow { transform: rotate(90deg); align-self: center; padding: 2px 0; }
}
html[data-theme="dark"] .g-buy .g-step { border-left-color: #f5a855; }