/* 재무 화면의 폭·컨트롤 묶음. 전역 표/서랍 규칙 뒤에 로드한다. */
.fin-summary-grid { display: grid; gap: 12px; }
.fin-summary-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-summary-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-summary-card,
.fin-summary-value { min-width: 0; overflow-wrap: anywhere; }

/* 업무 목록 앞에는 한 묶음의 도구 모음, 숫자에는 별도의 읽기 순서를 준다. */
.fin-apv-controls { margin-bottom: 20px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(15, 23, 42, .03); }
.fin-apv-inbox-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.fin-apv-inbox-header .approval-inbox-folders { gap: 4px; margin-bottom: 0; padding: 4px; border-radius: 12px; background: #f1f5f9; }
.fin-apv-inbox-header .approval-inbox-folders button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-color: transparent; border-radius: 9px; background: transparent; font-weight: 700; }
.fin-apv-inbox-header .approval-inbox-folders button[aria-current="page"] { background: #fff; color: #1d4ed8; border-color: #e2e8f0; box-shadow: 0 1px 4px rgba(15, 23, 42, .06); }
.fin-apv-controls .approval-inbox-help { margin: 10px 0 12px; color: #64748b; font-size: var(--fs-base); line-height: 1.5; }
.fin-apv-new,
.fin-ec-action-primary { min-height: 44px; flex-shrink: 0; padding: 10px 16px; border: 1px solid #2563eb; border-radius: 10px; background: #2563eb; color: #fff; font-size: var(--fs-base); font-weight: 700; cursor: pointer; box-shadow: 0 3px 8px rgba(37, 99, 235, .16); }
.fin-apv-new:hover,
.fin-ec-action-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
/* 카드 명세서 임시저장 이어하기(fin-card-statement.js) — 이어할 게 있으면 새 청구 옆에 눈에 띄게 */
.fin-ec-action-draft { min-height: 44px; flex-shrink: 0; padding: 10px 14px; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: var(--fs-base); font-weight: 700; cursor: pointer; white-space: nowrap; }
.fin-ec-action-draft:hover { background: #fef3c7; }
.fin-apv-type-groups,
.fin-apv-status-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-apv-status-filters { margin-top: 12px; }
.fin-apv-type-groups button,
.fin-apv-status-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #475569; font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.fin-apv-type-groups button[aria-pressed="true"],
.fin-apv-status-filters button[aria-pressed="true"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.fin-apv-count { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 6px; background: #e2e8f0; color: #475569; font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
[aria-current="page"] > .fin-apv-count,
[aria-pressed="true"] > .fin-apv-count { background: #dbeafe; color: #1d4ed8; }
.fin-apv-status-filters .fin-apv-count-pending { background: #fef3c7; color: #92400e; }
.fin-apv-status-filters .fin-apv-count-approved { background: #d1fae5; color: #065f46; }
.fin-apv-status-filters .fin-apv-count-rejected { background: #ffe4e6; color: #9f1239; }
.fin-apv-filter-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.fin-apv-filter-details > summary,
.fin-action-menu > summary,
.fin-trs-manage > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 44px; padding: 10px 12px; box-sizing: border-box; font-size: var(--fs-base); font-weight: 600; color: #475569; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.fin-apv-filter-details > summary::-webkit-details-marker,
.fin-action-menu > summary::-webkit-details-marker,
.fin-trs-manage > summary::-webkit-details-marker { display: none; }
.fin-apv-filter-details > summary::after,
.fin-action-menu > summary::after,
.fin-trs-manage > summary::after { content: ''; width: 6px; height: 6px; margin: 0 2px 3px auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); flex-shrink: 0; }
.fin-apv-filter-details[open] > summary::after,
.fin-action-menu[open] > summary::after,
.fin-trs-manage[open] > summary::after { transform: rotate(225deg); margin-top: 5px; margin-bottom: 0; }
.fin-apv-filter-details > summary:hover,
.fin-action-menu > summary:hover,
.fin-trs-manage > summary:hover,
.fin-trs-manage > summary.is-current { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.fin-apv-controls button:focus-visible,
.fin-apv-controls select:focus-visible,
.fin-apv-filter-details > summary:focus-visible,
.fin-action-menu > summary:focus-visible,
.fin-action-menu-items button:focus-visible,
.fin-trs-tabs button:focus-visible,
.fin-trs-manage > summary:focus-visible { outline: 2px solid #3b82f6 !important; outline-offset: 2px; }
.fin-apv-filter-details > summary { width: fit-content; }
.fin-apv-filter-details .fin-apv-toolbar { padding-top: 12px; margin-bottom: 0 !important; }
.fin-action-menu { position: relative; }
.fin-action-menu-items { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 4px; padding: 6px; min-width: 210px; max-width: calc(100vw - 48px); border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.fin-action-menu-items button { width: 100%; text-align: left; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #334155; font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.fin-action-menu-items button:hover { background: #eff6ff; color: #1d4ed8; }
.fin-ec-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; }
.fin-ec-bulk-actions[hidden] { display: none; }
.fin-ec-bulk-actions > span { font-size: var(--fs-body); font-weight: 700; margin-right: auto; }
.fin-overview-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; color: #1e293b; }
.fin-overview-scope strong { font-size: var(--fs-title); font-weight: 800; }
.fin-overview-scope span { font-size: var(--fs-base); color: #64748b; }
#finDashboardContainer .fin-overview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
#finDashboardContainer .fin-overview-label { color: #475569; font-weight: 700; margin-bottom: 8px; }
#finDashboardContainer .fin-overview-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9; color: #64748b; }
#finDashboardContainer .fin-overview-contract { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 16px 20px; border-color: #dbeafe; background: #f5f8ff; box-shadow: none; }
#finDashboardContainer .fin-overview-contract .fin-overview-label { margin: 0; color: #1e40af; }
#finDashboardContainer .fin-overview-contract .fin-overview-value { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
#finDashboardContainer .fin-overview-contract .fin-overview-note { grid-column: 1; margin: 0; padding: 0; border: 0; color: #526582; }
.fin-trs-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.fin-trs-daily-tabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; padding: 4px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f1f5f9; }
.fin-trs-tabs button { min-height: 44px; font-size: var(--fs-base); }
.fin-trs-daily-tabs button { flex: 0 1 auto; padding-left: 16px; padding-right: 16px; }
.fin-trs-manage { position: relative; min-width: 110px; max-width: 100%; }
.fin-trs-manage-tabs { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; gap: 4px; min-width: 220px; max-width: calc(100vw - 48px); padding: 6px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.fin-trs-manage-tabs button { text-align: left; padding: 10px 12px; white-space: nowrap; }
.fin-trs-manage-tabs button:hover,
.fin-trs-manage-tabs button[aria-current="page"] { background: #eff6ff; color: #1d4ed8; box-shadow: none; }
.fin-trs-summary-label { font-size: var(--fs-body); }
.fin-trs-summary-basis { font-size: var(--fs-meta); }
.fin-tax-guide { margin-top: 10px; font-size: var(--fs-body); color: #475569; }
.fin-tax-guide > summary { width: fit-content; cursor: pointer; min-height: 44px; padding: 10px 0; box-sizing: border-box; font-weight: 700; }
.fin-tax-guide > p { margin: 0; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; line-height: 1.7; overflow-wrap: anywhere; }

/* 프로젝트별 재무: 표의 열은 넓은 화면에서 함께 계산하고, 900px 이하는 같은 셀을 카드로 읽는다.
   이전에는 행만 900px까지 flex, 머리글 숨김은 640px까지여서 폴드에서 열이 어긋났다. */
#finDashboardContainer .fin-overview-proj-table {
  width: 100%;
  min-width: 700px;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.fin-overview-projects-heading { gap: 12px; flex-wrap: wrap; }
#finDashboardContainer .fin-overview-meta { font-size: var(--fs-meta) !important; line-height: 1.5; white-space: normal !important; }
#finDashboardContainer .fin-overview-advice { font-size: var(--fs-base); }

@media (max-width: 900px) {
  #finDashboardContainer .fin-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #finDashboardContainer .stat-card { min-width: 0; overflow-wrap: anywhere; }
  #finDashboardContainer .fin-overview-value { font-size: var(--fs-title) !important; white-space: normal !important; }
  #finDashboardContainer .fin-overview-projects-heading { padding: 16px; }
  #finDashboardContainer .fin-overview-projects-heading h3 { font-size: var(--fs-title); }
  #finDashboardContainer .fin-overview-projects-scroll { padding: 12px; }
  #finDashboardContainer .fin-overview-proj-table,
  #finDashboardContainer .fin-overview-proj-table tbody,
  #finDashboardContainer .fin-overview-proj-table tfoot {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  #finDashboardContainer .fin-overview-proj-table thead { display: none !important; }
  #finDashboardContainer .fin-overview-proj-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    width: 100%;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    background: #fff !important;
    box-sizing: border-box;
  }
  #finDashboardContainer .fin-overview-proj-table tr > td {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    font-size: var(--fs-body) !important;
    line-height: 1.5;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #finDashboardContainer .fin-overview-proj-table td::before {
    content: attr(data-label);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: #64748b;
    white-space: normal;
  }
  #finDashboardContainer .fin-overview-proj-table .fop-project,
  #finDashboardContainer .fin-overview-proj-table .fop-total-title {
    grid-column: 1 / -1;
    font-size: var(--fs-title) !important;
  }
  #finDashboardContainer .fin-overview-proj-table .fop-status { grid-column: 1 / -1; }
  #finDashboardContainer .fin-overview-proj-table .fop-status span { font-size: var(--fs-meta); }
  #finDashboardContainer .fin-overview-proj-table .fop-project::before,
  #finDashboardContainer .fin-overview-proj-table .fop-status::before,
  #finDashboardContainer .fin-overview-proj-table .fop-total-title::before,
  #finDashboardContainer .fin-overview-proj-table tr > td:empty { display: none !important; }
  #finDashboardContainer .fin-overview-proj-table tfoot tr { background: #f8fafc !important; margin-bottom: 0 !important; }
}

@media (min-width: 641px) and (max-width: 900px) {
  #finDashboardContainer .fin-overview-proj-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #finDashboardContainer .fin-overview-proj-table .fop-project { grid-column: 1 / 3; }
  #finDashboardContainer .fin-overview-proj-table .fop-status { grid-column: 3; align-items: flex-end !important; }
}

@media (max-width: 900px) {
  body.finance-workspace .main-content,
  body.finance-workspace .content-area,
  #view-globalfinance,
  #financeContent,
  #financeContent .fin-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* OS 상단 바는 .app-body 밖이다. 옛 mobile-header의 48px 여백은 필요 없다. */
  body.finance-workspace .content-area {
    padding: 12px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.finance-workspace #pageHeaderEl { margin-bottom: 12px; }
  body.finance-workspace #finMobileTabBar {
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 12px;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.finance-workspace .fin-mobile-nav-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #financeContent input:not([type="checkbox"]):not([type="radio"]),
  #financeContent select,
  #financeContent textarea {
    font-size: var(--fs-title) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 필터와 실행 버튼은 각 그룹 단위로 줄을 바꾼다. */
  .fin-ec-toolbar,
  .fin-ec-filters,
  .fin-ec-actions,
  .fin-ec-staff-filters,
  .fin-ir-header-actions,
  .fin-ir-status-tabs,
  .fin-ir-grouping,
  .fin-tax-toolbar,
  .fin-report-category-toolbar,
  .fin-tax-direction,
  .fin-tax-grouping,
  .fin-daily-toolbar,
  .fin-daily-date-nav,
  .fin-daily-actions,
  .fin-apv-toolbar,
  .fin-apv-status-filters,
  .fin-apv-type-groups {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap !important;
    box-sizing: border-box;
  }
  .fin-ec-actions { width: 100%; margin-left: 0 !important; }
  .fin-ec-action {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    font-size: var(--fs-body) !important;
  }
  .fin-ec-project-filter { width: 100%; min-height: 44px; }
  .fin-ir-header > div,
  .fin-ir-card,
  .fin-ir-card-meta,
  .fin-apv-card,
  .fin-apv-card-header,
  .fin-apv-card-project,
  .fin-apv-card-summary,
  .fin-apv-card-meta {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
  .fin-ir-header-actions { flex-shrink: 1 !important; }
  .fin-ir-filters { align-items: center; min-width: 0; }
  .fin-ir-search { max-width: 100%; box-sizing: border-box; }
  .fin-ir-search input { min-height: 44px; }
  .fin-ir-grouping button,
  .fin-ir-status-tabs button,
  .fin-ir-header-actions button,
  .fin-apv-status-filters button,
  .fin-apv-type-groups button,
  .fin-tax-toolbar button,
  .fin-report-category-toolbar button,
  .fin-daily-toolbar button {
    min-height: 44px;
    white-space: normal !important;
  }
  .fin-ir-card-actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .fin-ir-card-actions button {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .fin-apv-card-header { flex-wrap: wrap; gap: 8px; }
  .fin-apv-card-status { flex-shrink: 0; }
  .fin-apv-select { min-height: 44px; }
  .fin-summary-total { flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }

  /* 경비 카드에 남아 있던 데스크톱 표의 nowrap/150px 제한을 해제한다. */
  #financeContent .fin-ec-table,
  #financeContent .fin-ec-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #financeContent .fin-ec-table thead { display: none !important; }
  #financeContent .fin-ec-table tr {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
  #financeContent .fin-ec-table td {
    min-width: 0;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
  #financeContent .fin-ec-table td span {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #financeContent .fin-ec-table .fin-ec-desc {
    overflow: visible !important;
    text-overflow: clip !important;
    align-items: flex-start !important;
  }
  #financeContent .fin-ec-table .fin-ec-status { flex-wrap: wrap; }
  #financeContent .fin-ec-table .fin-ec-project,
  #financeContent .fin-ec-table .fin-ec-payment { flex-basis: 100% !important; }
  #financeContent .fin-ec-table .fin-ec-check input {
    min-width: 20px;
    width: 20px !important;
    height: 20px;
    max-width: none;
  }
  #financeContent .fin-ec-table .fin-ec-month-group {
    background: transparent !important;
    border: none !important;
    margin: 12px 0 6px;
  }
  #financeContent .fin-ec-table .fin-ec-month-group td { flex: 1 1 100% !important; }
  #financeContent .fin-ec-month-summary { flex-wrap: wrap; gap: 6px; min-width: 0; width: 100%; }
}

@media (max-width: 600px) {
  .fin-summary-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .fin-summary-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-summary-card { padding: 12px !important; }
  .fin-ir-filters { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px !important; }
  .fin-ir-search { width: 100%; }
  .fin-ir-grouping { justify-self: start; }
  .fin-ir-card-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .fin-ir-card-actions button { width: 100%; font-size: var(--fs-body) !important; }
  .fin-trs-tabs { flex-direction: column; gap: 8px; }
  .fin-trs-daily-tabs { width: 100%; box-sizing: border-box; }
  .fin-trs-daily-tabs button { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
  .fin-trs-manage { width: 100%; }
  .fin-trs-manage-tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; max-width: none; margin-top: 8px; background: #f8fafc; box-shadow: none; }
  .fin-trs-tabs button { min-width: 0; min-height: 44px; white-space: normal !important; }
  .fin-apv-controls { padding: 12px; }
  .fin-apv-inbox-header .approval-inbox-folders { width: 100%; }
  .fin-apv-inbox-header .approval-inbox-folders button { flex: 1 1 auto; justify-content: center; }
  #finDashboardContainer .fin-overview-contract { grid-template-columns: minmax(0, 1fr); }
  #finDashboardContainer .fin-overview-contract .fin-overview-value { grid-column: 1; grid-row: 2; }
  #finDashboardContainer .fin-overview-contract .fin-overview-note { grid-row: 3; }
  .fin-daily-date-nav { display: grid !important; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; }
  .fin-daily-date-nav input { width: 100% !important; }
  .fin-daily-toolbar,
  .fin-tax-toolbar { width: 100%; }
  .fin-apv-select { width: 100%; }
}

/* Safari 날짜 입력의 내부 최소 폭을 확보한다. */
@media (max-width: 360px) {
  .fin-daily-date-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-daily-date-nav input { grid-column: 1 / -1; grid-row: 1; }
  .fin-daily-date-nav button { grid-row: 2; }
}

/* ═══ 📱🖥 재무 › 자금 거래 목록 — 표준 목록 (폰 2026-10-12 v28.22 시안 S · PC v28.23 «시안 그대로») ═══
   폰 전용 요소(.trs-ph — «⋯»·떠 있는 추가 버튼)는 기본 숨김·≤900 에서만, PC 전용(.trs-pc — «내보내기·자동 채우기 ▾»)은 901~.
   필터 칩(.trs-chips)은 둘 다 쓴다(툴바 안 — PC 는 검색과 한 줄, 폰은 다음 줄). 옛 날짜·기간 버튼·선택칸·초기화와
   보조 버튼(.trs-sec)은 숨긴 채 남겨 두고, 칩·메뉴·추가 버튼이 그 처리기를 그대로 부른다(treasury-transactions.js). */
.trs-ph, .trs-pc { display: none; }
#financeTreasuryContainer .trs-toolbar > :not(.trs-search):not(.trs-more):not(.trs-chips) { display: none !important; }
#financeTreasuryContainer .trs-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trs-chip {
  min-height: 36px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
  color: #475569; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; cursor: pointer;
}
.trs-chip:hover { border-color: #93c5fd; }
.trs-chip.is-on { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.trs-chip-clear { color: #64748b; border-style: dashed; }

/* 🖥 PC(901~) — 제목 줄은 «내보내기·자동 채우기 ▾» + 주 버튼 하나, 검색·칩 한 줄(정렬은 오른쪽 끝), 합계는 표 위 한 줄 */
@media (min-width: 901px) {
  #financeTreasuryContainer .trs-pc { display: inline-flex; }
  #financeTreasuryContainer .trs-sec { display: none !important; }
  #financeTreasuryContainer .trs-actions {
    align-items: center; height: 36px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; color: #334155; font-size: var(--fs-meta); font-weight: 700; cursor: pointer;
  }
  #financeTreasuryContainer .trs-actions:hover { border-color: #93c5fd; }
  #financeTreasuryContainer .trs-toolbar { flex-wrap: nowrap !important; }
  #financeTreasuryContainer .trs-search { flex: 0 1 300px !important; min-width: 180px !important; height: 36px; }
  #financeTreasuryContainer .trs-toolbar .trs-chips { flex: 1 1 auto; min-width: 0; }
  #financeTreasuryContainer .trs-chip-sort { margin-left: auto; border-color: transparent; background: transparent; }
  #financeTreasuryContainer .trs-kpi-sub { display: none; }   /* 설명은 카드 말풍선(title)으로 */
  #financeTreasuryContainer .trs-total {
    background: transparent !important; border: none !important; padding: 2px 4px 8px !important; margin-bottom: 4px !important;
  }
  /* 칩·메뉴는 연 단추 바로 아래 펼치는 작은 목록(위치는 openSheet 가 잡는다) */
  .trs-sheet-ov.is-pop { background: transparent; display: block; }
  .trs-sheet-ov.is-pop .trs-sheet {
    position: fixed; max-width: none; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 4px 10px 10px;
  }
  .trs-sheet-ov.is-pop .trs-sheet-opt { min-height: 40px; font-size: var(--fs-base); }
  .trs-sheet-ov.is-pop .trs-sheet-dates input { height: 36px; font-size: var(--fs-base); }
  .trs-sheet-ov.is-pop .trs-sheet-apply { height: 36px; }
}
/* 👆 넓은 터치 기기(아이패드·폰 가로) — 위의 작은 크기는 마우스용이다. 칩·목록·단추 44px, 날짜 칸 16px(아이패드도 16px 미만 칸은 확대한다, 산타 검수 2차) */
@media (min-width: 901px) and (pointer: coarse) {
  .trs-chip, #financeTreasuryContainer .trs-actions, #financeTreasuryContainer .trs-search { min-height: 44px; }
  #financeTreasuryContainer .trs-search { font-size: var(--fs-title); }   /* 검색칸도 16px — 12px 면 아이패드가 확대한다 */
  .trs-sheet-ov.is-pop .trs-sheet-opt, .trs-sheet-ov.is-pop .trs-sheet-apply { min-height: 44px; }
  .trs-sheet-ov.is-pop .trs-sheet-dates input { height: 44px; font-size: var(--fs-title); }
  /* 16px 날짜 둘과 «적용»이 320px 목록 한 줄엔 안 들어간다(아이패드 실측 «2026. 10. 0»에서 잘림) — «적용»을 다음 줄로 */
  .trs-sheet-ov.is-pop .trs-sheet-dates { flex-wrap: wrap; }
  .trs-sheet-ov.is-pop .trs-sheet-apply { flex: 1 1 100%; }
}

/* 🖥 읽는 표(901~, 마우스가 있는 기기) — 평소엔 글자만, 마우스를 올린 줄·입력 중인 줄만 화살표·달력 아이콘이 보인다.
   테두리 투명·마우스 올리면 테두리는 tailwind-input.css 가 이미 한다. 화살표는 배경 그림이라 나타나도 글자가 밀리지 않는다.
   터치 기기(마우스 없음)는 지금처럼 늘 보인다 — 눌러서 고칠 수 있다는 표시가 필요하다 */
@media (min-width: 901px) and (hover: hover) {
  #financeTreasuryContainer .fin-trs-table tbody td select {
    -webkit-appearance: none; appearance: none; padding-right: 18px;
    background-repeat: no-repeat; background-position: right 4px center; background-size: 10px;
  }
  #financeTreasuryContainer .fin-trs-table tbody tr:hover td select,
  #financeTreasuryContainer .fin-trs-table tbody tr:focus-within td select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
  }
  #financeTreasuryContainer .fin-trs-table tbody td input::-webkit-calendar-picker-indicator { opacity: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:hover td input::-webkit-calendar-picker-indicator,
  #financeTreasuryContainer .fin-trs-table tbody tr:focus-within td input::-webkit-calendar-picker-indicator { opacity: 1; }
  #financeTreasuryContainer .fin-trs-table tbody tr:focus-within td input[type="text"],
  #financeTreasuryContainer .fin-trs-table tbody tr:focus-within td input[type="date"],
  #financeTreasuryContainer .fin-trs-table tbody tr:focus-within td select { border-color: #e2e8f0; background-color: #fff; }
}

/* 🧾 자금관리 매출·매입 «줄 목록» (PC 901~, 2026-10-28 v3 시안 fin-trstx · 사장님 «화면 정리 다 하고»).
   표의 칸(td)·입력 부품·처리기·지연 채우기는 그대로 두고 줄 모양만 바꾼다 — 1줄 = 거래처 · 내역 ……… 금액,
   2줄 = 날짜 · 세목 · 프로젝트 · 증빙 · 계좌 칩(고르면 그 자리에서 바로 저장 — 종전 칸과 같은 선택칸).
   ★ 칸 순서·개수는 손대지 않는다 — Enter 로 다음 줄 같은 칸 이동·월 머리 colspan·폰(≤900) 펼침이 칸 위치를 쓴다.
   ★ 표를 block 으로 바꾸면 _freezeColumns(treasury-transactions-row.js)는 display 를 보고 스스로 건너뛴다. */
@media (min-width: 901px) {
  #financeTreasuryContainer .trs-kpi { display: none !important; }   /* 이번 달 숫자는 대시보드 탭에 있다 */
  #financeTreasuryContainer .trs-tab-ico { display: none; }
  #financeTreasuryContainer .fin-trs-daily-tabs { gap: 8px; padding: 0; border: 0; background: transparent; }
  #financeTreasuryContainer .fin-trs-daily-tabs button { min-height: 36px; padding: 6px 16px !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: #475569 !important; }
  #financeTreasuryContainer .fin-trs-daily-tabs button[aria-current="page"] { border-color: #1e293b !important; background: #1e293b !important; color: #fff !important; }
  #financeTreasuryContainer .fin-trs-manage > summary { min-height: 36px; padding: 6px 14px; border-radius: 999px; }
  #financeTreasuryContainer .fin-trs-wrap { overflow: visible !important; }
  #financeTreasuryContainer .fin-trs-table, #financeTreasuryContainer .fin-trs-table thead, #financeTreasuryContainer .fin-trs-table tbody { display: block; width: 100%; }
  #financeTreasuryContainer .fin-trs-table thead tr { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; background: #fff; }
  #financeTreasuryContainer .fin-trs-table thead th:not(:first-child) { display: none; }
  #financeTreasuryContainer .fin-trs-table thead th:first-child { width: auto; padding: 0 !important; }
  #financeTreasuryContainer .fin-trs-table thead tr::after { content: '전체 선택 · 세목·프로젝트·증빙은 줄 안에서 바로 고칩니다'; color: #94a3b8; font-size: var(--fs-meta); font-weight: 600; }
  #financeTreasuryContainer .fin-trs-table tbody tr.trs-month { display: block; }
  #financeTreasuryContainer .fin-trs-table tbody tr.trs-month td { display: block; background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 10px 16px !important; }
  #financeTreasuryContainer .fin-trs-table { --trs-date: 168px; --trs-cat: 188px; --trs-c1: calc(var(--trs-date) + 6px + var(--trs-cat)); --trs-proj: 220px; --trs-proof: 116px; --trs-acc: 160px; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 3px; position: relative; min-height: 58px; padding: 8px 200px 8px 48px; content-visibility: auto; contain-intrinsic-size: auto 58px; }   /* 화면 밖 줄은 스타일·배치를 건너뛴다 — 1,000줄이어도 고를 때 보이는 줄만 계산 */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month)::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }   /* 1줄(거래처·내역)과 2줄(칩)을 가르는 줄바꿈 */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td { padding: 0 !important; border: 0 !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td.fin-trs-check { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="거래처"] { order: 1; flex: 0 0 var(--trs-c1); min-width: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="내역"] { order: 2; flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 2px; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="내역"]::before { content: '·'; color: #cbd5e1; font-weight: 800; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="날짜"] > div { margin-top: 0 !important; }   /* 통장 동기화 시각 — 날짜 옆 같은 줄(여기 말고는 안 보인다) */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="날짜"] { order: 4; flex: 0 0 var(--trs-date); display: flex; align-items: center; gap: 4px; color: #94a3b8; font-size: var(--fs-badge); }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="구분"] { order: 5; flex: 0 0 var(--trs-cat); min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="구분"] > div { display: none; }   /* 세목 설명 — 선택칸에 마우스를 올리면 말풍선(title) */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="프로젝트"] { order: 6; flex: 0 0 var(--trs-proj); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="증빙"] { order: 7; flex: 0 0 var(--trs-proof); min-width: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="계좌"] { order: 8; flex: 0 0 var(--trs-acc); min-width: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="영수증"] { order: 9; flex: 0 0 28px; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="메모"] { order: 10; flex: 1 1 80px; min-width: 0; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td.fin-trs-num { order: 11; flex: 0 0 32px; text-align: right; color: #cbd5e1; font-size: var(--fs-badge); }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td.fin-trs-del { order: 12; flex: 0 0 24px; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="금액"] { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); text-align: right; }
  /* 입력 부품 — 평소엔 글자처럼, 마우스·입력 중엔 테두리(tailwind-input.css) */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="거래처"] input { width: 100%; min-width: 0 !important; text-overflow: ellipsis; padding: 2px 4px !important; color: #1e293b; font-size: var(--fs-base) !important; font-weight: 800; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="내역"] input { width: 100%; min-width: 0 !important; padding: 2px 4px !important; color: #64748b; font-size: var(--fs-base) !important; font-weight: 500 !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="날짜"] input { width: 118px; padding: 1px 2px !important; color: #64748b; font-size: var(--fs-meta) !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="메모"] input { width: 100%; padding: 2px 6px !important; font-size: var(--fs-meta) !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="금액"] input { width: 140px; padding: 2px 4px !important; font-size: var(--fs-body) !important; font-weight: 800; }
  /* 칩 — 세목·프로젝트·증빙·계좌 선택칸. 값이 없으면(미분류·프로젝트 없음) 노란 칩 — 빈 값은 required 선택칸의 :invalid 로 고른다(:has 금지 — 큰 표에서 매번 전체 재계산) */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="구분"] select, #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="프로젝트"] select, #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="증빙"] select, #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="계좌"] select {
    -webkit-appearance: none; appearance: none; field-sizing: content; max-width: 100%; min-width: 0 !important; min-height: 26px; text-overflow: ellipsis;
    padding: 2px 22px 2px 10px !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important;
    background-color: #f8fafc !important; color: #475569; font-size: var(--fs-meta) !important; font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 9px !important;
  }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="구분"] select:invalid, #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="프로젝트"] select:invalid { border-color: #fde68a !important; background-color: #fffbeb !important; color: #92400e; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="계좌"] select { background-color: transparent !important; border-color: transparent !important; font-weight: 600; color: #94a3b8; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month):hover > td[data-label="계좌"] select, #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month):focus-within > td[data-label="계좌"] select { border-color: #e2e8f0 !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td select:focus { border-color: #60a5fa !important; background-color: #fff !important; }
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month) > td[data-label="프로젝트"] .btn { min-height: 26px; padding: 2px 10px; font-size: var(--fs-badge); }
  /* 줄에 마우스를 올렸을 때만 — 빈 메모·삭제 */
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month):not(:hover):not(:focus-within) > td[data-label="메모"] > input:placeholder-shown,
  #financeTreasuryContainer .fin-trs-table tbody tr:not(.trs-month):not(:hover):not(:focus-within) > td.fin-trs-del { visibility: hidden; }
}

/* 💰 예산관리 · 📝 견적서 관리 «줄 목록» (PC 901~, 2026-10-28 v3 시안 fin-budget·fin-quotes) — 칸·예산 입력·«계약금액 적용»·펼침은 그대로, 줄 모양만.
   예산 1줄 = ▸ 프로젝트 ……… 잔여 / 2줄 = 계약 · 예산(입력) · 실집행 · 상태 / 3줄 = 소진율 막대(예산 넣은 줄만).
   견적 1줄 = 프로젝트 · 견적명 ……… 합계 / 2줄 = 수신사 · 항목 N건 · 상태 ……… 공급가. 표 머리는 칸이 줄 안에 이름을 달고 나와 숨긴다. */
@media (min-width: 901px) {
  #fin-budget .fin-budget-table { display: block; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
  #fin-budget .fin-budget-table > thead { display: none; }
  #fin-budget .fin-budget-table > tbody { display: block; }
  #fin-budget .fin-budget-table > tbody > tr:not(:has(> td[data-label])) { display: block; }   /* 펼친 세목·비목 줄(인라인 display:none 이면 그대로 숨음) */
  #fin-budget .fin-budget-table > tbody > tr:not(:has(> td[data-label])) > td { display: block; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; position: relative; padding: 12px 170px 12px 18px; background: #fff !important; border-bottom: 1px solid #f1f5f9 !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td { padding: 0 !important; max-width: none !important; text-align: left !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="프로젝트명"] { order: 1; flex: 0 0 100%; color: #1e293b; font-size: var(--fs-base) !important; white-space: normal !important; word-break: keep-all; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="계약금액"] { order: 2; font-size: var(--fs-meta) !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="예산"] { order: 3; display: flex; align-items: center; gap: 6px; color: #64748b; font-size: var(--fs-meta) !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="예산"] input { width: 120px !important; padding: 2px 6px !important; font-size: var(--fs-meta) !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="실집행"] { order: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-meta) !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="실집행"] > div { margin-top: 0 !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="상태"] { order: 5; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="소진율"] { order: 6; flex: 0 0 100%; min-width: 0 !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="소진율"]:not(:has(> div)) { display: none; }   /* 예산이 없으면 막대 줄 없음 */
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="소진율"] > div { justify-content: flex-start !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="소진율"] > div > div { max-width: none !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="잔여"] { position: absolute; right: 18px; top: 12px; text-align: right !important; font-size: var(--fs-base) !important; }
  #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="계약금액"]::before, #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="예산"]::before, #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="실집행"]::before, #fin-budget .fin-budget-table > tbody > tr:has(> td[data-label]) > td[data-label="잔여"]::before {
    content: attr(data-label) ' '; margin-right: 2px; color: #94a3b8; font-size: var(--fs-meta); font-weight: 600;
  }
  #fin-quotes .fin-quote-list-table, #fin-quotes .fin-quote-list-table tbody { display: block; }
  #fin-quotes .fin-quote-list-table thead { display: none; }
  #fin-quotes .fin-quote-list-table > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; position: relative; min-height: 60px; padding: 12px 220px 12px 18px; }
  #fin-quotes .fin-quote-list-table > tbody > tr::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td { padding: 0 !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="프로젝트"] { order: 1; color: #1e293b; font-size: var(--fs-base) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="견적명"] { order: 2; color: #64748b; font-size: var(--fs-meta) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="견적명"]::before { content: '· '; color: #cbd5e1; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="수신사"] { order: 4; font-size: var(--fs-meta) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="항목"] { order: 5; font-size: var(--fs-meta) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="항목"]::before { content: '· 항목 '; color: #cbd5e1; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="상태"] { order: 6; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="합계"] { position: absolute; right: 18px; top: 12px; font-size: var(--fs-base) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="공급가액"] { position: absolute; right: 18px; bottom: 12px; color: #94a3b8; font-size: var(--fs-badge) !important; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="공급가액"]::before { content: '공급 '; }
  #fin-quotes .fin-quote-list-table > tbody > tr > td[data-label="VAT"] { display: none; }   /* 부가세는 줄을 누르면 뜨는 상세에 */
}

/* 📥 수금 현황 계산서 «줄 목록» (PC 901~, 2026-10-28 v3 시안 fin-vl) — 칸·누르면 세금계산서로 가기·상태 판정은 그대로.
   1줄 = 거래처 · 프로젝트 ……… 미수(지급 쪽은 미지급) / 2줄 = 작성일 · 합계 · 수금 · 상태 · 승인번호. 공급가·부가세는 세금계산서 화면에. */
@media (min-width: 901px) {
  #fin-vendor-ledger .fin-vendor-rows { display: block; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
  #fin-vendor-ledger .fin-vendor-rows > thead { display: none; }
  #fin-vendor-ledger .fin-vendor-rows > tbody { display: block; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; position: relative; min-height: 60px; padding: 12px 180px 12px 18px; background: #fff !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr:hover { background: #f8fafc !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td { padding: 0 !important; max-width: none !important; text-align: left !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="거래처"] { order: 1; font-size: var(--fs-base) !important; word-break: keep-all; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="프로젝트"] { order: 2; color: #64748b !important; font-size: var(--fs-meta) !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="프로젝트"]::before { content: '· '; color: #cbd5e1; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="작성일"] { order: 4; color: #94a3b8 !important; font-size: var(--fs-meta) !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="합계"] { order: 5; font-size: var(--fs-meta) !important; font-weight: 600 !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="수금"], #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="지급"] { order: 6; font-size: var(--fs-meta) !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="상태"] { order: 7; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="승인번호"] { order: 8; color: #cbd5e1 !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="합계"]::before, #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="수금"]::before, #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="지급"]::before { content: attr(data-label) ' '; color: #94a3b8; font-weight: 600; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="공급가액"], #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="부가세"] { display: none; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="미수"], #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="미지급"] { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); text-align: right !important; font-size: var(--fs-base) !important; }
  #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="미수"]::after, #fin-vendor-ledger .fin-vendor-rows > tbody > tr > td[data-label="미지급"]::after { content: attr(data-label); display: block; color: #94a3b8; font-size: var(--fs-badge); font-weight: 600; }
}

/* 📱 탭 결재 줄(approval.js renderApprovalPanel — 산출·견적·지출결의 공용) — 누를 일(상신·재상신·승인·반려)이 있으면 폰 화면 아래에 붙는다
   (2026-10-28 v3 «폰 하단 고정 결재 올리기»). 입력 중(키보드)·서랍이 열렸을 때는 숨긴다 — 아이폰은 고정 줄을 키보드 위로 올려 입력칸을 가린다 */
@media (max-width: 768px) {
  .view-section.active .apv-bar-act { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; margin: 0 !important; padding: 8px 12px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto; box-sizing: border-box; height: 76px; }
  .view-section.active .apv-bar-act > * { flex-shrink: 0 !important; }
  .view-section.active .apv-bar-act button { min-height: 44px; min-width: 44px; font-size: var(--fs-base) !important; white-space: nowrap; }
  /* 띠 76 + 아래 12 + 본문과의 간격 12. 실제 스크롤 내용 끝에 둔다. */
  :is(#view-estimate, #view-quote, #view-expense):has(.apv-bar-act) { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body:has(:is(input, textarea, select):focus) .apv-bar-act, body.exp-drawer-open .apv-bar-act, body.ti-drawer-open .apv-bar-act { display: none !important; }
}

/* 아래에서 올라오는 선택창 — 폰 전용 단추로만 열린다. 확인창(100001)보다 아래 */
.trs-sheet-ov {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15, 23, 42, .4);
  display: flex; align-items: flex-end; justify-content: center;
}
.trs-sheet {
  width: 100%; max-width: 560px; max-height: 75vh; overflow-y: auto; box-sizing: border-box;
  overscroll-behavior: contain;   /* 창 안을 끝까지 밀어도 뒤 목록이 같이 밀리지 않게(아이폰) */
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.trs-sheet-title { font-size: var(--fs-base); font-weight: 800; color: #64748b; padding: 10px 4px 6px; }
.trs-sheet-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px;
  padding: 0 4px; border: none; border-bottom: 1px solid #f1f5f9; background: none;
  font-size: var(--fs-body); color: #1e293b; text-align: left;
}
.trs-sheet-opt.is-on { color: var(--color-blue, #2563eb); font-weight: 800; }
.trs-sheet-opt.is-on::after { content: '✓'; }
.trs-sheet-dates { display: flex; align-items: center; gap: 6px; padding: 12px 0 4px; }
.trs-sheet-dates input { flex: 1 1 0; min-width: 0; height: 44px; font-size: var(--fs-body); border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 8px; }
.trs-sheet-apply { flex: 0 0 auto; height: 44px; padding: 0 16px; border: none; border-radius: 10px; background: var(--color-blue, #2563eb); color: #fff; font-weight: 800; font-size: var(--fs-base); }

/* 재무 탭 줄(요약·자금·결재·전체 메뉴) — 상자 넷 대신 밑줄 탭, 전체 메뉴는 «☰» (≤900 = 폰 재무 탭이 보이는 폭) */
@media (max-width: 900px) {
  body.finance-workspace #finMobileTabBar { gap: 0; padding: 0; border-bottom: 1px solid #e2e8f0; }
  body.finance-workspace .fin-mobile-nav-button {
    min-height: 46px; border: none; border-radius: 0; background: transparent;
    border-bottom: 3px solid transparent; color: #64748b; font-weight: 700;
  }
  body.finance-workspace .fin-mobile-nav-button[aria-current="page"] {
    color: var(--color-blue, #2563eb); background: transparent; border-color: transparent; border-bottom-color: var(--color-blue, #2563eb); font-weight: 800;
  }
  body.finance-workspace #finMobileAllButton { flex: 0 0 52px; font-size: 0 !important; }   /* 글자는 aria-label 이 읽는다 */
  body.finance-workspace #finMobileAllButton::before { content: '☰'; font-size: 20px; }
  /* 지금 화면이 탭에 있으면 «자금관리 · 계좌 잔액…» 머리는 탭과 같은 말이다 — 전체 메뉴에서 연 화면(경비청구 등)은 머리를 남긴다 */
  body.finance-workspace:has(#finMobileTabBar .fin-mobile-nav-button[aria-current="page"]:not(#finMobileAllButton)) #pageHeaderEl { display: none; }
}

@media (max-width: 900px) {
  /* 숨김 — 제목·버튼 줄(«⋯»·떠 있는 버튼으로), 이번달 카드(대시보드 탭), «관리»(«⋯» 안으로), 하위 탭 이모지 */
  #financeTreasuryContainer .trs-hdr,
  #financeTreasuryContainer .trs-kpi,
  #financeTreasuryContainer:has(.trs-chips) .fin-trs-manage,
  #financeTreasuryContainer .trs-tab-ico { display: none !important; }
  #financeTreasuryContainer .fin-trs-table,
  #financeTreasuryContainer .fin-trs-table tbody {
    display: block !important; width: 100% !important; min-width: 0 !important;
  }
  #financeTreasuryContainer .fin-trs-table thead { display: none !important; }
  #financeTreasuryContainer .fin-trs-wrap {
    overflow-x: visible !important; border: none !important; background: transparent !important;
  }
  #financeTreasuryContainer .fin-trs-table tr:not(.trs-month) {
    border: 1px solid #e2e8f0 !important; border-radius: 12px; background: #fff;
  }

  /* 검색 + «⋯» 한 줄, 칩은 다음 줄(툴바 안에서 줄바꿈) — 툴바의 나머지(날짜·기간·선택칸)는 칩이 대신한다 */
  #financeTreasuryContainer .trs-toolbar {
    flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important;
    background: transparent !important; border: none !important; margin-bottom: 10px !important;
  }
  #financeTreasuryContainer .trs-search { flex: 1 1 0 !important; min-width: 0 !important; height: 44px; border-radius: 12px !important; background: #fff; padding: 0 12px !important; }
  #financeTreasuryContainer .trs-more {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #475569; font-size: 20px; line-height: 1;
  }

  /* 선택창은 body 에 붙어 #financeContent 의 «폰 입력칸 글자» 규칙 밖이다 — 같은 크기로(16px 미만이면 아이폰이 확대한다) */
  .trs-sheet-dates input { font-size: var(--fs-title); }
  /* 필터 칩 — 툴바의 다음 줄 전체, 모자라면 또 다음 줄로(잘라 숨기지 않는다) · 손가락 크기 44px */
  #financeTreasuryContainer .trs-toolbar .trs-chips { flex: 1 1 100%; }
  .trs-chip { min-height: 44px; padding: 0 14px; font-size: var(--fs-base); }

  /* 합계 = 목록 위 한 줄 */
  #financeTreasuryContainer .trs-total {
    background: transparent !important; border: none !important; border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important; padding: 4px 4px 8px !important; margin-bottom: 8px !important;
  }

  /* 떠 있는 «+ 추가» — 화면의 주 버튼 하나. 마지막 줄을 가리지 않게 목록 아래 여백 */
  #financeTreasuryContainer .trs-fab {
    display: inline-flex; align-items: center; position: fixed; right: 16px; z-index: 60;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    height: 56px; padding: 0 22px; border: none; border-radius: 28px;
    background: var(--color-blue, #2563eb); color: #fff; font-size: var(--fs-body); font-weight: 800;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .35);
  }
  #financeTreasuryContainer .fin-trs-wrap { margin-bottom: 88px; }

  /* 두 줄 목록 — 1줄 거래처·내역 ……… 금액 / 2줄 날짜 · 구분 (칸의 min-width·폭 규칙은 patches-extracted.css 그대로) */
  #financeTreasuryContainer .fin-trs-table td.trs-m {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "txt txt txt amt" "date cat . .";
    column-gap: 6px !important; row-gap: 3px; align-items: center !important;
  }
  #financeTreasuryContainer .trs-m-txt { grid-area: txt; font-size: var(--fs-body); font-weight: 700; color: #0f172a; }
  #financeTreasuryContainer .trs-m-amt { grid-area: amt; margin-left: 0; font-size: var(--fs-body); }
  #financeTreasuryContainer .trs-m-date { grid-area: date; font-weight: 600; color: #64748b; font-size: var(--fs-meta); }
  #financeTreasuryContainer .trs-m-cat { grid-area: cat; justify-self: start; font-size: var(--fs-meta); }
  /* 펼친 거래는 같은 입력 노드를 사용한다. 긴 이름과 보조 설명도 칸 안에서 줄바꿈한다. */
  #financeTreasuryContainer .fin-trs-table tr.trs-open td[data-label] {
    display: flex !important;
    flex-wrap: wrap;
    white-space: normal !important;
  }
  #financeTreasuryContainer .fin-trs-table tr.trs-open td[data-label]::before {
    flex-basis: 64px; font-size: var(--fs-meta);
  }
  #financeTreasuryContainer .fin-trs-table tr.trs-open td[data-label] input:not([type="checkbox"]),
  #financeTreasuryContainer .fin-trs-table tr.trs-open td[data-label] select {
    min-height: 44px; max-width: 100%;
  }

}

/* 카드 명세서 확인: PC 표 / 폰 카드. 입력은 기기와 관계없이 16px. */
.ecs-import { color: #1e293b; font-size: var(--fs-base); }
.ecs-import input:not([type="checkbox"]), .ecs-import select {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px;
  font-size: 16px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: #1e293b;
}
.ecs-import input[type="checkbox"] { width: 22px; height: 22px; accent-color: #2563eb; }
.ecs-import label { min-width: 0; }
.ecs-editor { border: 0; padding: 0; min-width: 0; }
.ecs-bulk { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; background: #eff6ff; border-radius: 12px; }
.ecs-bulk > strong { width: 100%; color: #1e40af; }
.ecs-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
.ecs-button { min-height: 44px; border: 1px solid #cbd5e1; background: white; color: #334155; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: var(--fs-base); }
.ecs-primary { background: #2563eb; color: white; border-color: #2563eb; }
.ecs-button:disabled { opacity: .6; cursor: wait; }
.ecs-hint { margin: 0 0 16px; line-height: 1.6; color: #475569; }
.ecs-total { font-weight: 700; color: #1e40af; padding: 16px 0; }
.ecs-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.ecs-table th, .ecs-table td { white-space: normal !important; overflow-wrap: anywhere; padding: 8px 6px; vertical-align: top; text-align: left; border-bottom: 1px solid #e2e8f0; }
.ecs-table th { background: #f8fafc; }
.ecs-table th:first-child { width: 48px; }
.ecs-table th:nth-child(2) { width: 150px; }
.ecs-note { display: block; margin-top: 6px; color: #92400e; font-size: var(--fs-meta); }
.ecs-mapping { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ecs-mapping > p { grid-column: 1 / -1; }
.ecs-sample { margin-top: 16px; padding: 12px; background: #f8fafc; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .ecs-table, .ecs-table tbody, .ecs-table tr { display: block; width: 100%; }
  .ecs-table thead { display: none; }
  .ecs-table tr { box-sizing: border-box; margin-bottom: 16px; padding: 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #fff; }
  .ecs-table td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; width: auto !important; align-items: center; border: 0; padding: 6px 0; }
  .ecs-table td::before { content: attr(data-label); color: #64748b; }
  .ecs-mapping { grid-template-columns: minmax(0, 1fr); }
  .ecs-bulk { padding: 12px; }
  .ecs-bulk .ecs-field { flex-basis: 100%; }
}

/* ── 경비청구 작성 창 (2026-10-27 사장님 확정 시안) — fin-expense-form.js `_fecShowClaimForm`
   PC(1024~): 입력 + 오른쪽 «올리면 이렇게 처리돼요» 2열 · 중간 폭: 한 열(요약은 아래) · 폰(~640): 전체 화면 시트 + 아래 고정 버튼 줄.
   입력칸 16px·누르는 곳 44px(ui-style.md). 기존 파랑·카드 모서리 유지. */
.ecf-modal { background: #fff; border-radius: 16px; width: 960px; max-width: 94vw; box-shadow: var(--shadow-xl);
  max-height: calc(var(--os-viewport-height, 100dvh) - 24px); overflow-y: auto; display: flex; flex-direction: column; word-break: keep-all; }
.ecf-modal [hidden] { display: none !important; }
.ecf-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid #e2e8f0; }
.ecf-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: #1e293b; }
.ecf-head p { margin: 4px 0 0; font-size: var(--fs-meta, 13px); color: #64748b; }
.ecf-x { margin-left: auto; flex: 0 0 44px; height: 44px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: 16px; cursor: pointer; }
.ecf-who { padding: 14px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ecf-q { font-size: 13px; font-weight: 800; color: #334155; margin-bottom: 10px; }
.ecf-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ecf-ch { text-align: left; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 12px; padding: 12px 14px; min-height: 64px; cursor: pointer; font: inherit; }
.ecf-ch b { display: block; font-size: 14px; color: #1e293b; }
.ecf-ch span { display: block; font-size: 12px; color: #64748b; margin-top: 3px; }
.ecf-ch.on { border-color: var(--color-blue, #2563eb); background: #eff6ff; box-shadow: 0 0 0 3px #dbeafe; }
.ecf-ch.on b { color: var(--color-blue, #2563eb); }
.ecf-ch.go span { color: #4f46e5; }
.ecf-who-notice { margin-top: 12px; padding: 14px; border-radius: 12px; background: #eef2ff; color: #3730a3; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ecf-who-notice p { margin: 0; flex: 1 1 100%; }
.ecf-body { display: grid; grid-template-columns: 1fr 320px; }
.ecf-form { padding: 18px 24px 4px; min-width: 0; }
.ecf-sec { margin-bottom: 16px; }
.ecf-sec h4, .ecf-side h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #64748b; }
.ecf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ecf-row-in { gap: 12px; }
.ecf-f { margin-bottom: 12px; min-width: 0; }
.ecf-f > label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.ecf-f > label i { font-style: normal; font-weight: 600; color: #94a3b8; margin-left: 4px; }
.ecf-in { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 16px; outline: none; box-sizing: border-box; background: #fff; color: #1e293b; }
.ecf-in:focus { border-color: var(--color-blue, #2563eb); box-shadow: 0 0 0 3px #dbeafe; }
.ecf-note { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.ecf-chip { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #ecfdf5; color: #065f46; }
.ecf-chip.b { background: #eff6ff; color: var(--color-blue, #2563eb); }
.ecf-seg { display: flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; min-height: 44px; }
.ecf-seg button { flex: 1; border: 0; border-right: 1px solid #e2e8f0; background: #fff; font-size: 14px; font-weight: 700; color: #475569; cursor: pointer; padding: 0 6px; }
.ecf-seg button:last-child { border-right: 0; }
.ecf-seg button.on { background: var(--color-blue, #2563eb); color: #fff; }
.ecf-drop { width: 100%; min-height: 52px; padding: 12px; border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; font-size: 13px; box-sizing: border-box; }
.ecf-side { background: #fbfdff; border-left: 1px solid #e2e8f0; padding: 18px 20px; }
.ecf-step { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #e2e8f0; }
.ecf-step:last-child { border-bottom: 0; }
.ecf-dot { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #eff6ff; color: var(--color-blue, #2563eb); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ecf-dot.warn { background: #fef3c7; color: #92400e; }
.ecf-step b { display: block; font-size: 13px; color: #1e293b; }
.ecf-step span { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.ecf-step span.ecf-ok { color: #047857; font-weight: 700; }
.ecf-step span.ecf-warn { color: #92400e; font-weight: 700; }
.ecf-money { font-size: 22px; font-weight: 900; color: #1e293b; margin: 2px 0; }
.ecf-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid #e2e8f0; background: #fff; margin-top: auto; }
.ecf-btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 14px; font-weight: 800; cursor: pointer; }
.ecf-btn.p { background: var(--color-blue, #2563eb); border-color: var(--color-blue, #2563eb); color: #fff; padding: 0 26px; }
.ecf-btn:disabled { opacity: .6; cursor: progress; }
.ecf-keep { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: #475569; min-height: 44px; cursor: pointer; }
.ecf-keep input { width: 18px; height: 18px; }
.ecf-keep + .ecf-btn.p { margin-left: 0; }
.ecf-foot > .ecf-btn.p:only-of-type { margin-left: auto; }
@media (max-width: 1023px) {
  .ecf-modal { width: 720px; }
  .ecf-body { grid-template-columns: 1fr; }
  .ecf-side { border-left: 0; border-top: 1px solid #e2e8f0; margin: 0 24px 12px; border: 1px solid #e2e8f0; border-radius: 12px; }
}
@media (max-width: 640px) {
  .os-viewport-overlay > .ecf-modal { width: 100vw; max-width: 100vw; height: var(--os-viewport-height, 100dvh); max-height: var(--os-viewport-height, 100dvh); border-radius: 0; }
  .ecf-head { padding: 14px 16px 12px; }
  .ecf-who { padding: 12px 16px; }
  .ecf-choices { grid-template-columns: 1fr; gap: 8px; }
  .ecf-ch { min-height: 44px; padding: 10px 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .ecf-ch span { margin: 0; }
  .ecf-form { padding: 14px 16px 4px; }
  .ecf-row { grid-template-columns: 1fr; gap: 0; }
  .ecf-row.ecf-row-in { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ecf-side { margin: 0 16px 12px; padding: 12px 14px; }
  .ecf-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .ecf-foot .ecf-keep { margin-left: 0; flex: 1 1 auto; }
  .ecf-foot .ecf-btn.p { flex: 1 1 100%; min-height: 48px; font-size: 15px; order: 3; }
}

/* 📥 분류할 계산서 — fin-tax-invoice.js _renderPendingQueue (2026-10-27 실데이터 시안 v2). PC 는 한 줄 표, 폰은 카드. */
.ti-q-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.ti-q-top.none { border-color: #fcd34d; background: #fffbeb; }
.ti-q-msg { flex: 1 1 320px; margin: 0; color: #334155; font-size: var(--fs-base); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.ti-q-top.none .ti-q-msg { color: #92400e; }
.ti-q-top > button { min-height: 44px; white-space: nowrap; }
.ti-q-top > button:disabled { opacity: .5; cursor: default; }
.ti-q { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.ti-q-row { display: grid; grid-template-columns: 36px 96px minmax(0, 1fr) 120px minmax(240px, 340px); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid #f1f5f9; font-size: var(--fs-base); }
.ti-q-head { border-top: 0; padding-top: 10px; padding-bottom: 10px; background: #f8fafc; color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.ti-q-head span:nth-child(4) { text-align: right; }
.ti-q-check { display: flex; align-items: center; justify-content: center; width: 36px; min-height: 44px; cursor: pointer; }
.ti-q-check input { width: 18px; height: 18px; cursor: pointer; }
.ti-q-date { color: #334155; white-space: nowrap; }
.ti-q-age { display: block; margin-top: 2px; color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.ti-q-age.late { color: #dc2626; }
.ti-q-vendor { min-width: 0; }
.ti-q-t1 { color: #1e293b; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.ti-q-t2 { margin-top: 2px; color: #64748b; font-size: var(--fs-meta); overflow-wrap: anywhere; }
.ti-q-tag { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #fef2f2; color: #b91c1c; font-size: var(--fs-badge); font-weight: 700; vertical-align: middle; }
.ti-q-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ti-q-act { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ti-q-act .ti-q-sug { padding: 6px 10px; border-radius: 8px; background: #f1f5f9; color: #475569; line-height: 1.45; word-break: keep-all; }
.ti-q-act .ti-q-sug.sure { background: #ecfdf5; color: #047857; font-weight: 700; }
@media (max-width: 900px) {
  .ti-q-row { grid-template-columns: 36px 84px minmax(0, 1fr) 104px; }
  .ti-q-head span:nth-child(5) { display: none; }
  .ti-q-act { grid-column: 3 / -1; }
}
@media (max-width: 640px) {
  .ti-q-head { display: none; }
  .ti-q-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "check vendor amt" "check date date" ". act act"; gap: 4px 10px; align-items: start; padding: 14px 12px; }
  .ti-q-check { grid-area: check; width: 32px; min-height: 32px; }
  .ti-q-vendor { grid-area: vendor; }
  .ti-q-amt { grid-area: amt; }
  .ti-q-amt .ti-q-t2 { display: none; }
  .ti-q-date { grid-area: date; color: #64748b; font-size: var(--fs-meta); }
  .ti-q-age { display: inline; margin-left: 6px; }
  .ti-q-act { grid-area: act; margin-top: 8px; }   /* grid-column 을 따로 쓰면 grid-area 자리를 덮어 32px 칸으로 밀린다 */
  .ti-q-top > button { flex: 1 1 100%; }
}

/* 🧾 세금계산서 줄 목록 + 서랍 — fin-tax-invoice.js _listRow·_drawer (2026-10-28 v3 시안, 사장님 «지출결의처럼 서랍으로»).
   줄은 읽기만(거래처·품목 / 날짜·매출매입·프로젝트·칩 / 합계), 고치는 칸은 서랍. 서랍 자리·모양은 지출결의 서랍(style.css .exp-drawer)과 같다. */
.ti-l { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
.ti-l-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 14px 18px 10px; }
.ti-l-head b { color: #1e293b; font-size: var(--fs-body); }
.ti-l-head span { color: #64748b; font-size: var(--fs-meta); }
.ti-l-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 18px 6px; border-top: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; font-size: var(--fs-meta); }
.ti-l-grp b { color: #334155; font-size: var(--fs-base); }
.ti-l-grp.warn { color: #b45309; font-weight: 700; }
.ti-l-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 18px; border-top: 1px solid #f1f5f9; cursor: pointer; }
.ti-l-row:hover { background: #f8fafc; }
.ti-l-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.ti-l-row.is-selected { background: #eff6ff; box-shadow: inset 3px 0 0 #3b82f6; }
.ti-l-main { min-width: 0; }
.ti-l-t1 { color: #1e293b; font-size: var(--fs-base); word-break: keep-all; overflow-wrap: anywhere; }
.ti-l-t1 b { font-weight: 800; }
.ti-l-item { color: #475569; font-size: var(--fs-meta); }
.ti-l-t2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; color: #64748b; font-size: var(--fs-meta); }
.ti-l-meta { margin-right: 2px; word-break: keep-all; overflow-wrap: anywhere; }
.ti-l-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ti-l-amt b { color: #1e293b; font-size: var(--fs-base); font-weight: 800; }
.ti-l-amt small { display: block; margin-top: 2px; color: #64748b; font-size: var(--fs-meta); }
.ti-l .neg, .ti-drawer .neg { color: #dc2626 !important; }
.ti-l-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.ti-l-foot-n, .ti-l-foot-sum { color: #1e293b; font-weight: 800; }
.ti-l-foot-sum { font-size: var(--fs-base); }
.ti-l-foot-un { margin-left: auto; color: #94a3b8; font-weight: 700; }
.ti-l-foot-un.warn { color: #b45309; }
.ti-chip { display: inline-block; padding: 1px 7px; border: 1px solid; border-radius: 999px; font-size: var(--fs-badge); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ti-tone-ok { border-color: #86efac; background: #dcfce7; color: #166534; }
.ti-tone-info { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
.ti-tone-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ti-tone-bad { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.ti-tone-muted { border-color: #cbd5e1; background: #f8fafc; color: #64748b; }
.ti-drawer { position: fixed; top: 60px; right: 0; bottom: 0; z-index: 998; width: 440px; max-width: 100vw; background: #fff;
    border-left: 1px solid #e2e8f0; box-shadow: -8px 0 32px rgba(15, 23, 42, .10); display: flex; flex-direction: column; }
.ti-drawer[hidden], .ti-drawer-backdrop[hidden] { display: none !important; }
.ti-drawer-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid #f1f5f9; }
.ti-drawer-titles { min-width: 0; }
.ti-drawer-kicker { color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.ti-drawer-title { margin-top: 2px; color: #0f172a; font-size: var(--fs-title); font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.ti-drawer-x { margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; color: #64748b; font-weight: 900; }
.ti-drawer-x:hover { background: #f1f5f9; }
.ti-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; align-content: start; }
.ti-dw-field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; color: #1e293b; font-size: var(--fs-base); overflow-wrap: anywhere; }
.ti-dw-field.wide { grid-column: 1 / -1; }
.ti-dw-label { color: #64748b; font-size: var(--fs-badge); font-weight: 700; }
/* 서랍 칸은 종전 표 칸의 입력 부품을 그대로 쓴다 — 표용 인라인 폭·글자 크기를 걷는다 */
.ti-drawer .ti-dw-field input:not([type="checkbox"]), .ti-drawer .ti-dw-field select { width: 100% !important; max-width: 100% !important; min-height: 40px; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 8px 10px !important; font-size: var(--fs-base) !important; background: #fff; color: #0f172a; }
.ti-drawer .ti-dw-field input:disabled { background: #f8fafc !important; color: #64748b; }
.ti-drawer .ti-dw-field > button, .ti-drawer .ti-q-act button { min-height: 40px; }
.ti-drawer .ti-q-act { width: 100%; }
.ti-match { min-height: 40px; padding: 8px 14px; border: 1px solid; border-radius: 10px; font-size: var(--fs-base); font-weight: 800; cursor: pointer; }
.ti-dw-note { margin: 0; color: #64748b; font-size: var(--fs-meta); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ti-dw-note.warn { color: #b45309; font-weight: 700; }
.ti-dw-sub { color: #64748b; font-size: var(--fs-meta); word-break: keep-all; }
.ti-dw-mono { color: #475569; font-family: ui-monospace, monospace; font-size: var(--fs-meta); word-break: break-all; }
.ti-dw-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ti-dw-check { display: flex; align-items: center; gap: 8px; color: #334155; font-size: var(--fs-meta); cursor: pointer; }
.ti-dw-check input { width: 18px; height: 18px; }
.ti-drawer-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid #f1f5f9; }
.ti-drawer-act { display: flex; margin-right: auto; }
.ti-drawer-foot button { min-height: 40px; }
.ti-drawer-foot button:disabled { opacity: .45; cursor: default; }
@media (min-width: 1280px) { body.ti-drawer-open #finTaxInvoiceContainer { padding-right: 440px; } }
@media (min-width: 769px) { .ti-drawer-backdrop { display: none !important; } }
@media (max-width: 768px) {
  .ti-l-row { gap: 4px 10px; padding: 12px 14px; }
  .ti-l-head, .ti-l-grp, .ti-l-foot { padding-left: 14px; padding-right: 14px; }
  .ti-l-foot-un { flex-basis: 100%; margin-left: 0; }
  .ti-drawer { top: auto; left: 0; right: 0; width: auto; max-height: 85vh; border-left: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(15, 23, 42, .16); }
  .ti-drawer-backdrop { position: fixed; inset: 0; z-index: 997; background: rgba(15, 23, 42, .22); }
  .ti-drawer .ti-dw-field input:not([type="checkbox"]), .ti-drawer .ti-dw-field select { font-size: 16px !important; }   /* 16px 미만이면 아이폰이 확대하고 안 돌아온다 */
  .ti-drawer-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .ti-l-amt small { display: none; }   /* 공급가·세액은 서랍에 — 폰 줄은 합계만 */
}

/* 🧾 세금계산서 머리 한 줄 — [매출][매입] [분류][불일치] … 마지막 동기화 [지금 동기화] [⋯] (2026-10-28 v3, 사장님 «최대한 간결하게»).
   동기화 글·버튼·경고는 fin-tax-invoice-sync.js 가 .ti-sync 상자에 다시 그린다 — 상자는 display:contents 로 지워 같은 줄의 칸이 되게 한다. */
.ti-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ti-sync, .ti-sync-row { display: contents; }
.ti-sync-info { margin-left: auto; color: #64748b; font-size: var(--fs-meta); white-space: nowrap; }
.ti-sync-info.bad { color: #b91c1c; }
.ti-sync-btn { min-height: 36px; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #1d4ed8; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ti-sync-btn:hover { border-color: #bfdbfe; background: #eff6ff; }
.ti-sync-btn:disabled { opacity: .6; cursor: default; }
.ti-more { order: 1; }
.ti-more > summary { min-height: 36px; min-width: 40px; justify-content: center; padding: 6px 12px; border-radius: 999px; font-weight: 800; }
.ti-more > summary::after { display: none; }
.ti-more .fin-action-menu-items { left: auto; right: 0; }
.ti-more-label { padding: 8px 12px 2px; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: var(--fs-badge); font-weight: 700; }
.ti-more .fin-tax-grouping { display: grid; gap: 4px; }
.ti-sync-note, .ti-sync .fin-tax-guide { order: 2; flex: 1 1 100%; }
.ti-sync-note { padding: 6px 12px; border: 1px solid; border-radius: 10px; font-size: var(--fs-meta); line-height: 1.5; overflow-wrap: anywhere; }
.ti-sync-note.warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ti-sync-note.info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.ti-sync-note.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.ti-sync .fin-tax-guide { margin-top: 0; font-size: var(--fs-meta); }
.ti-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ti-top .fin-tax-direction { display: flex; gap: 8px; }
.ti-chip-btn { min-height: 36px; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ti-chip-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.ti-chip-btn.has-n { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ti-chip-btn.on, .ti-chip-btn.on:hover { border-color: #1e293b; background: #1e293b; color: #fff; }
.ti-chip-btn:disabled { opacity: .5; cursor: default; }
.ti-l-state { color: #64748b; font-size: var(--fs-meta); }
.ti-l-state.warn { color: #b45309; font-weight: 700; }
@media (max-width: 900px) {
  .ti-top .ti-chip-btn { white-space: nowrap !important; }
}
@media (max-width: 640px) {
  .ti-filters { flex: 1 1 100%; }
  .ti-sync-info { flex: 1 1 auto; margin-left: 0; }   /* 재무 도구 줄 공통 규칙(줄바꿈 허용)보다 앞선다 — 칩 글자가 두 줄로 쪼개지지 않게 */
}

/* 📋 경비청구 «날짜 · 신청자» 묶음 목록 + 위 숫자 세 칸 — fin-expense-claim.js (2026-10-27 실데이터 시안 v2) */
.ec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ec-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #1e293b; text-align: left; font: inherit; }
button.ec-kpi { cursor: pointer; }
button.ec-kpi:hover { border-color: #93c5fd; }
.ec-kpi:first-child:not(.zero) { border-color: #bfdbfe; background: #eff6ff; }
.ec-kpi.on { border-color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.ec-kpi-label { color: #475569; font-size: var(--fs-meta); font-weight: 700; }
.ec-kpi b { font-size: var(--fs-title); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ec-kpi.zero b { color: #94a3b8; }
.ec-kpi-go { color: #2563eb; font-size: var(--fs-meta); font-weight: 700; }
.ec-list { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.ec-all { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: var(--fs-meta); font-weight: 700; cursor: pointer; }
.ec-all input, .ec-check input { width: 18px; height: 18px; cursor: pointer; }
.ec-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: var(--fs-meta); }
.ec-list > .ec-group:first-child, .ec-all + .ec-group { border-top: 0; }
.ec-group b { color: #334155; font-weight: 800; }
.ec-mini { color: #64748b; }
.ec-group .ec-chip { margin-left: auto; }
.ec-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-top: 1px solid #f1f5f9; cursor: pointer; }
.ec-row:hover { background: #f8fafc; }
.ec-row > .ec-main:first-child { grid-column: 1 / 3; }
.ec-check { display: flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; cursor: pointer; }
.ec-main { min-width: 0; }
.ec-t1 { color: #1e293b; font-size: var(--fs-base); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.ec-ro { color: #64748b; font-weight: 600; }
.ec-t2 { margin-top: 2px; color: #64748b; font-size: var(--fs-meta); overflow-wrap: anywhere; }
.ec-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: 700; white-space: nowrap; vertical-align: middle; }
.ec-chip.wait { background: #fffbeb; color: #b45309; }
.ec-chip.bad { background: #fef2f2; color: #b91c1c; }
.ec-chip.soft { background: #f1f5f9; color: #475569; }
.ec-amt { color: #1e293b; font-size: var(--fs-base); font-weight: 800; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ec-act { display: flex; justify-content: flex-end; gap: 4px; width: 80px; }   /* 작성자: 수정·삭제 */
.ec-list.review .ec-act { width: 164px; }   /* 검토자: 승인·반려·지급·수정·삭제 중 최대 4 */
.ec-amt { min-width: 96px; }
.ec-btn { min-width: 36px; min-height: 36px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: var(--fs-meta); cursor: pointer; }
.ec-btn:hover { border-color: #93c5fd; }
.ec-btn.ok { border-color: #6ee7b7; background: #ecfdf5; color: #065f46; font-weight: 700; }
.ec-btn.no { border-color: #fca5a5; background: #fef2f2; color: #991b1b; font-weight: 700; }
.ec-btn.pay { border-color: #67e8f9; background: #ecfeff; }
.ec-note { margin: 10px 2px 0; color: #64748b; font-size: var(--fs-meta); }
@media (max-width: 640px) {
  .ec-kpis { grid-template-columns: 1fr; gap: 6px; }
  .ec-kpi { flex-direction: row; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; }   /* 폰은 한 줄 — 세 칸이 화면 반을 먹지 않게 */
  .ec-kpi-label { flex: 1 1 auto; }
  .ec-kpi b { font-size: var(--fs-base); white-space: nowrap; }
  .ec-kpi-go { display: none; }
  button.ec-kpi::after { content: '›'; color: #2563eb; font-weight: 800; }
  .ec-group { padding: 10px 12px; }
  .ec-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "check main amt" "check act act"; gap: 6px 10px; padding: 12px; align-items: start; }
  .ec-row > .ec-main:first-child { grid-column: auto; }
  .ec-check { grid-area: check; width: 28px; min-height: 28px; }
  .ec-main { grid-area: main; }
  .ec-amt { grid-area: amt; }
  .ec-act { grid-area: act; width: auto !important; }
  .ec-act:empty { display: none; }
  .ec-row:not(:has(.ec-check)) { grid-template-areas: "main main amt" "act act act"; }
  .ec-btn { min-width: 44px; min-height: 44px; }
}

/* 📋 결재 목록 — fin-approval.js (2026-10-27 실데이터 시안 v2). 섹션(대기·월)마다 한 상자, 줄은 첫 글자·제목·금액. */
.fin-apv-section { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 8px; color: #334155; font-size: var(--fs-base); font-weight: 800; }
.fin-apv-section.wait { color: #92400e; }
.fin-apv-section-count { color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.fin-apv-list { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.fin-apv-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #f1f5f9; cursor: pointer; }
.fin-apv-list > .fin-apv-card:first-child { border-top: 0; }
.fin-apv-card:hover { background: #f8fafc; }
.fin-apv-card-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: var(--fs-base); font-weight: 800; }
.fin-apv-card-body { min-width: 0; }
.fin-apv-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fin-apv-card-project { color: #1e293b; font-size: var(--fs-base); font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.fin-apv-card-type { color: #475569; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; }
.fin-apv-card-status { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: 700; white-space: nowrap; }
.fin-apv-card-summary { margin-top: 2px; color: #475569; font-size: var(--fs-meta); overflow-wrap: anywhere; }
.fin-apv-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; color: #64748b; font-size: var(--fs-meta); }
.fin-apv-card-amount { color: #1e293b; font-size: var(--fs-base); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .fin-apv-card { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; }
  .fin-apv-card-avatar { width: 32px; height: 32px; }
}

/* 🏦 자금관리 대시보드 — treasury.js (2026-10-28 실데이터 시안 v2 «잔고 먼저»). 잔고 → 이번 달 입금·출금·차액 → 확인할 거래 → 최근 거래. */
.trsd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.trsd-kpi { min-width: 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #64748b; }
.trsd-kpi .fin-trs-summary-label { font-size: var(--fs-meta); font-weight: 800; }
.trsd-kpi-val { margin: 6px 0 4px; color: #0f172a; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trsd-kpi .fin-trs-summary-basis { word-break: keep-all; }
.trsd-kpi.bal { border-color: #2563eb; background: #2563eb; color: #dbeafe; }
.trsd-kpi.bal .trsd-kpi-val { color: #fff; }
.trsd-note { margin: -8px 0 16px; color: #b45309; font-size: var(--fs-meta); }
.trsd-sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 10px; }
.trsd-sec h3 { color: #0f172a; font-size: var(--fs-body); font-weight: 900; }
.trsd-sec-note { color: #64748b; font-size: var(--fs-meta); }
.trsd-sec-btn { align-self: center; margin-left: auto; min-height: 36px; padding: 0 12px; border: 1px solid #fde68a; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; cursor: pointer; }
.trsd-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.trsd-q { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 88px; padding: 14px 72px 14px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; color: #0f172a; text-align: left; cursor: pointer; }
.trsd-q.warn { border-color: #fde68a; background: #fffbeb; }
.trsd-q.info { border-color: #bfdbfe; background: #eff6ff; }
.trsd-q.done { color: #94a3b8; cursor: default; }
.trsd-q:not(.done):hover { border-color: #93c5fd; }
.trsd-q[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #2563eb; }
.trsd-q-t { color: #475569; font-size: var(--fs-meta); font-weight: 800; word-break: keep-all; }
.trsd-q.done .trsd-q-t { color: #94a3b8; }
.trsd-q-n { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trsd-q-sub { color: #64748b; font-size: var(--fs-meta); word-break: keep-all; overflow-wrap: anywhere; }
.trsd-q-act { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: #2563eb; font-size: var(--fs-meta); font-weight: 800; white-space: nowrap; }
.trsd-review { margin-bottom: 12px; }
.trsd-recent { margin: 20px 0 16px; }
.trsd-list { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
.trsd-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px; border: 0; background: #fff; text-align: left; cursor: pointer; }
.trsd-row + .trsd-row { border-top: 1px solid #f1f5f9; }
.trsd-row:hover { background: #f8fafc; }
.trsd-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.trsd-t1 { color: #0f172a; font-size: var(--fs-base); font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.trsd-desc { color: #64748b; font-weight: 500; }
.trsd-t2 { color: #64748b; font-size: var(--fs-meta); overflow-wrap: anywhere; }
.trsd-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.trsd-badge { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: 800; white-space: nowrap; }
.trsd-badge.warn { background: #fef3c7; color: #92400e; }
.trsd-badge.ok { background: #dcfce7; color: #166534; }
.trsd-badge.tag { background: #ede9fe; color: #5b21b6; }
.trsd-amt { flex-shrink: 0; font-size: var(--fs-base); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trsd-amt.in { color: #047857; }
.trsd-amt.out { color: #dc2626; }
.trsd-empty { padding: 32px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #94a3b8; text-align: center; }
@media (max-width: 1100px) { .trsd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .trsd-queue { grid-template-columns: minmax(0, 1fr); } .trsd-q { min-height: 0; } }
@media (max-width: 640px) {
  /* 폰은 숫자 카드를 한 줄씩 — 2×2 칸에는 «-₩17,975,499» 같은 금액이 360px 폭에서 넘친다(경비청구 요약과 같은 방식) */
  .trsd-kpis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .trsd-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "basis val"; align-items: center; gap: 0 12px; padding: 12px 14px; }
  .trsd-kpi .fin-trs-summary-label { grid-area: label; }
  .trsd-kpi .fin-trs-summary-basis { grid-area: basis; }
  .trsd-kpi-val { grid-area: val; margin: 0; }
  .trsd-row { align-items: flex-start; padding: 12px 14px; }
}

/* 🖋 세금계산서 발행 요청 — fin-invoice-req.js (2026-10-28 실데이터 시안 v2). 묶음마다 한 상자, 줄은 요약 한 줄 + 누르면 상세·버튼. */
.ir-pill { min-height: 36px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569; font-size: var(--fs-meta); font-weight: 800; cursor: pointer; white-space: nowrap; }
.ir-pill.on { border-color: #1e293b; background: #1e293b; color: #fff; }
.ir-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px; padding: 18px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #64748b; font-size: var(--fs-meta); text-align: center; }
.ir-empty b { color: #1e293b; font-size: var(--fs-base); }
.ir-group-head { display: flex; justify-content: space-between; gap: 8px; margin: 16px 2px 8px; color: #334155; font-size: var(--fs-base); font-weight: 800; }
.ir-group-head span + span { color: #64748b; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
.ir-group { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.ir-group > .fin-ir-card + .fin-ir-card { border-top: 1px solid #f1f5f9; }
.ir-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ir-head:hover { background: #f8fafc; }
.ir-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-t1 { color: #1e293b; font-size: var(--fs-base); font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.ir-item { color: #64748b; font-size: var(--fs-meta); font-weight: 600; }
.ir-t2 { color: #64748b; font-size: var(--fs-meta); overflow-wrap: anywhere; }
.ir-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ir-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; color: #94a3b8; font-size: var(--fs-badge); }
.ir-step { padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-weight: 700; white-space: nowrap; }
.ir-step.done { background: #e0e7ff; color: #3730a3; }
.ir-step.now { background: #2563eb; color: #fff; }
.ir-step.bad { background: #fee2e2; color: #b91c1c; }
.ir-amt { text-align: right; white-space: nowrap; }
.ir-amt b { color: #1e293b; font-size: var(--fs-base); font-weight: 900; font-variant-numeric: tabular-nums; }
.ir-caret { margin-left: 6px; color: #94a3b8; font-size: var(--fs-meta); }
.ir-st { display: block; margin-top: 2px; color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.ir-st.rejected { color: #b91c1c; }
.ir-detail { padding: 2px 16px 14px; }
.ir-detail .fin-ir-card-meta { padding-top: 8px; border-top: 1px dashed #e2e8f0; }
@media (max-width: 640px) {
  .ir-head { gap: 10px; padding: 12px; }
  .ir-detail { padding: 2px 12px 12px; }
}

/* 결재 상신은 경비청구 공용 틀을 사용하고 종류 접기·폰 요약만 확장한다. */
.apvn-group + .apvn-group { margin-top: 10px; }
.apvn-group-title { margin-bottom: 6px; font-weight: 800; }
.apvn-picked { display: flex; align-items: center; gap: 10px; }
.apvn-picked > .ecf-ch { flex: 1; min-width: 0; }
.apvn-picked > .ecf-btn { flex-shrink: 0; }
.apvn-modal .ecf-ch:disabled { cursor: default; }
.apvn-modal textarea.ecf-in { height: auto; min-height: 88px; padding: 10px 12px; }
.apvn-modal .ecf-foot > .p { margin-left: auto; }
.apvn-step-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.apvn-route-summary { display: none; }
@media (max-width: 640px) {
    .apvn-route-summary { display: block; flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .apvn-modal .ecf-foot > .p { flex: 1; order: 0; }
}
.apvn-route { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apvn-route-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.apvn-route-steps span { padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: var(--fs-meta); font-weight: 800; white-space: nowrap; }
.apvn-route-steps span.me { background: #e0e7ff; color: #3730a3; }
.apvn-route-steps i { color: #94a3b8; font-style: normal; }
.apvn-route small { color: #64748b; font-size: var(--fs-meta); line-height: 1.4; word-break: keep-all; }
.apvn-route-steps span, .apvd-step { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.apvn-route-steps span.named { background: #ecfdf5; color: #065f46; }
.apvn-references { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: var(--fs-meta); }
.apvn-references .apvn-ref-chip { display: inline-flex; align-items: center; max-width: 100%; gap: 4px; padding: 2px 6px 2px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; word-break: keep-all; }
.apvn-ref-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; margin-top: 0; }
.apvn-ref-chip button { flex-shrink: 0; min-width: 32px; min-height: 32px; border: 0; background: transparent; color: inherit; font-size: var(--fs-base); cursor: pointer; }
.apvn-ref-add { min-height: 36px; padding: 4px 10px; border: 1px dashed #a5b4fc; border-radius: 999px; background: #fff; color: #3730a3; font-size: var(--fs-meta); cursor: pointer; }
.apvn-ref-list { max-height: min(180px, 22dvh); overflow: auto; border: 1px solid #e0e7ff; border-radius: 8px; padding: 4px 10px; }
.apvn-ref-list label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-base); overflow-wrap: anywhere; }
.apvn-ref-list input { flex: 0 0 auto; width: 18px; height: 18px; font-size: 16px; }
.apvn-leave-notice { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; color: #475569; font-size: var(--fs-meta); word-break: keep-all; overflow-wrap: anywhere; }


/* 결재 상세 — 단계 표시와 아래 고정 승인·반려(2026-10-28 v3 시안) */
.apvd-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 24px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.apvd-steps i { color: #94a3b8; font-style: normal; }
.apvd-step { padding: 3px 10px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 800; white-space: nowrap; }
.apvd-step.done { background: #e0e7ff; color: #3730a3; }
.apvd-step.now { background: #2563eb; color: #fff; }
.apvd-step.todo { background: #fff; color: #94a3b8; border: 1px solid #e2e8f0; }
.apvd-step.bad { background: #fef2f2; color: #b91c1c; }
.apvd-actions { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 12px; background: #fff; box-shadow: 0 -8px 12px -8px rgba(15, 23, 42, .12); }
@media (max-width: 768px) { .apvd-steps { padding: 8px 16px; } }
/* 폰 결재 목록 — «+ 새 결재 상신»을 아래에 띄운다(자금관리 «+ 추가»와 같은 모양). 결재 상세 패널(z60) 아래 층. */
@media (max-width: 768px) {
  #finApprovalContainer .fin-apv-new {
    position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 55;
    height: 56px; padding: 0 22px; border-radius: 28px; font-size: var(--fs-body); font-weight: 800;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .35);
  }
  #finApprovalContainer { padding-bottom: 88px; }
}

/* 재무 대시보드 v3(2026-10-28) — PC 두 칸: 왼쪽 프로젝트 표, 오른쪽 미수금·한 줄 진단·AI 사용량. 1100px 아래는 한 줄로 쌓는다. */
#finDashboardContainer .fin-overview-grid { display: block; }
@media (min-width: 1100px) {
  #finDashboardContainer .fin-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
}
#finDashboardContainer .fin-overview-main { min-width: 0; margin-bottom: 16px; }
#finDashboardContainer .fin-overview-side { min-width: 0; display: grid; gap: 16px; align-content: start; }
#finDashboardContainer .fin-overview-side > #aiUsageCard { margin: 0; }
#finDashboardContainer .fin-overview-box { padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
#finDashboardContainer .fin-overview-box-head { margin: 0 0 8px; color: #1e293b; font-size: var(--fs-title); font-weight: 800; }
#finDashboardContainer .fin-overview-box-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#finDashboardContainer .fin-overview-box-sum { color: #e11d48; font-size: var(--fs-body); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
#finDashboardContainer .fin-overview-recv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f1f5f9; font-size: var(--fs-base); }
#finDashboardContainer .fin-overview-recv span { min-width: 0; color: #334155; word-break: keep-all; overflow-wrap: anywhere; }
#finDashboardContainer .fin-overview-recv b { color: #e11d48; white-space: nowrap; font-variant-numeric: tabular-nums; }
#finDashboardContainer .fin-overview-proj-head th { background: #f8fafc; color: #64748b; border-bottom: 1px solid #e2e8f0; }
#finDashboardContainer .fin-overview-bar { height: 4px; margin-top: 6px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
#finDashboardContainer .fin-overview-bar i { display: block; height: 100%; background: #2563eb; }
#finDashboardContainer .fin-overview-bar.warn i { background: #f59e0b; }
#finDashboardContainer .fin-overview-bar.over i { background: #dc2626; }

/* 재무 v3 공용 상자(2026-10-28) — 머리줄 + 줄 목록. 알림 설정 등에서 쓴다. */
.fin3-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .fin3-grid2 { grid-template-columns: minmax(0, 1fr); } }
.fin3-box { min-width: 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.fin3-headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.fin3-head { margin: 0; color: #1e293b; font-size: var(--fs-title); font-weight: 800; }
.fin3-note { color: #64748b; font-size: var(--fs-meta); line-height: 1.5; word-break: keep-all; }
.fin3-foot { display: block; margin-top: 10px; }
.fin3-row { padding: 12px 0; border-top: 1px solid #f1f5f9; }
.fin3-row:first-of-type { border-top: 0; }
/* 숫자 넷 · 경고 한 줄 · 접는 기준 · 밝은 표 머리 — 예산관리 등 재무 v3 공용 */
.fin3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fin3-kpis.auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }   /* 카드 수가 4개가 아닐 때(부가세 5~6장) */
@media (max-width: 900px) { .fin3-kpis, .fin3-kpis.auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin3-kpi { min-width: 0; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow-wrap: anywhere; }
.fin3-kpi-l { color: #64748b; font-size: var(--fs-meta); font-weight: 700; }
.fin3-kpi-v { color: #1e293b; font-size: var(--fs-title); font-weight: 900; font-variant-numeric: tabular-nums; }
.fin3-kpi-s { margin-top: 4px; color: #64748b; font-size: var(--fs-meta); line-height: 1.4; }
.fin3-kpi.on { border-color: #2563eb; background: #2563eb; }
.fin3-kpi.bad { border-color: #dc2626; background: #fef2f2; }
.fin3-kpi.on :is(.fin3-kpi-l, .fin3-kpi-v, .fin3-kpi-s) { color: #fff; }
.fin3-kpi.bad .fin3-kpi-v { color: #b91c1c; }
.fin3-kpi.warn { border-color: #fcd34d; background: #fffbeb; }
.fin3-kpi.warn .fin3-kpi-v { color: #b45309; }
.fin3-warnline { margin-bottom: 16px; padding: 10px 14px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: var(--fs-base); font-weight: 700; line-height: 1.5; word-break: keep-all; }
.fin3-basis { margin: 0 0 16px; color: #64748b; font-size: var(--fs-meta); }
.fin3-basis > summary { width: fit-content; min-height: 32px; padding: 6px 0; cursor: pointer; font-weight: 700; }
.fin3-basis > div { padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; line-height: 1.7; }
.fin3-thead th { background: #f8fafc; color: #64748b !important; font-size: var(--fs-meta) !important; border-bottom: 1px solid #e2e8f0; }
/* 상태 거르기 칩(지출결의·견적서 관리) */
.fin3-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
/* 흰 보조 버튼(재무 v3) — 가져오기·엑셀 같은 두 번째 줄 버튼. 주 버튼(추가)만 진하게 */
.fin3-btn { min-height: 36px; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #334155; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; cursor: pointer; }
.fin3-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.fin3-pills button { min-height: 36px; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font-size: var(--fs-base); font-weight: 700; cursor: pointer; white-space: nowrap; }
.fin3-pills button[aria-pressed="true"] { border-color: #0f172a; background: #0f172a; color: #fff; }

/* 프로젝트 개요 맨 위 숫자 — 금액을 못 보는 역할은 «일정» 한 칸만 */
#projectKpiRow.proj-kpis-1 { grid-template-columns: minmax(0, 320px); }

/* 수주 현황 — 빈 열은 좁게(카드가 없으면 머리만), 넓은 화면에서 옆 스크롤을 줄인다(2026-10-28 v3) */
.pipe-col.pipe-col-empty { width: 132px !important; }
/* 🗂 수주 현황 5묶음(2026-10-28 v3, pipeline-views.js BOARD_GROUPS) — 묶음이 화면 폭을 나눠 쓴다. 단계가 여럿인 묶음의 카드엔 단계 칩 */
.pipe-col.pipe-grp { flex: 1 1 0; min-width: 220px; width: auto; }
.pipe-col.pipe-grp.pipe-grp-empty { flex: 0 1 180px; min-width: 160px; }
.pipe-grp-label { font-size: var(--fs-body); }
.pipe-grp-amt { margin-left: auto; color: #64748b; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
.pipe-grp-sub { margin-top: 2px; color: #94a3b8; font-size: var(--fs-meta); word-break: keep-all; }
.pipe-stage-chip { display: inline-block; margin-bottom: 4px; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: var(--fs-badge); font-weight: 700; }
.pipe-col.pipe-col-empty .pipe-col-head span:first-child { display: none; }

/* 상태 칩은 한 줄 — «진행 / 중»으로 쪼개지던 것(설명 글자용 .fin-overview-meta 의 white-space:normal !important 를 이긴다, 2026-10-28) */
#finDashboardContainer .fin-overview-meta.fop-badge { white-space: nowrap !important; display: inline-block; }

/* 💳 법인카드 사용내역 (fin-corp-card.js, 2026-10-29) — 한 상자 줄 목록. 1줄 = 가맹점 · 상태 칩 …… 금액, 2줄 = 날짜·카드 · 세목 · 프로젝트 · 메모 · 영수증.
   칸 폭을 고정해 줄마다 같은 자리에 선다(글자 길이로 밀리지 않게 — 자금관리 줄 목록 신고, 2026-10-29). */
.ccd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ccd-sp { flex: 1 1 auto; }
.ccd-month { min-height: 36px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: var(--fs-base); font-weight: 700; background: #fff; }
.ccd-btn { min-height: 36px; padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font-size: var(--fs-base); font-weight: 700; cursor: pointer; white-space: nowrap; }
.ccd-btn:disabled { opacity: .6; cursor: default; }
.ccd-list { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
.ccd-row { padding: 12px 16px; border-top: 1px solid #f1f5f9; }
.ccd-row:first-child { border-top: 0; }
.ccd-row.cancel, .ccd-row.cancel-orphan, .ccd-row.cancelled, .ccd-row.recorded { background: #f8fafc; }
.ccd-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ccd-store { min-width: 0; overflow: hidden; color: #1e293b; font-size: var(--fs-body); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.ccd-amt { margin-left: auto; padding-left: 12px; color: #1e293b; font-size: var(--fs-body); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccd-amt.neg { color: #dc2626; }
.ccd-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-badge); font-weight: 800; white-space: nowrap; }
.ccd-tag.warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.ccd-tag.info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.ccd-tag.mute { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.ccd-sub { display: grid; grid-template-columns: 200px 150px 220px minmax(120px, 1fr) auto auto; align-items: center; gap: 8px; margin-top: 6px; }
.ccd-row:not(.todo):not(.done):not(.claim) .ccd-sub { grid-template-columns: 200px minmax(0, 1fr) auto; }
@media (min-width: 901px) {   /* 경비청구와 짝인 줄 — 청구 비용의 프로젝트 칸을 다른 줄의 프로젝트 칸 자리에, 청구 설명은 메모 자리에 */
  .ccd-row.claim .ccd-sub > .ccd-cproj { grid-column: 3; grid-row: 1; }
  .ccd-row.claim .ccd-sub > .ccd-meta:nth-child(2) { grid-column: 4; grid-row: 1; }
}
.ccd-sub > .ccd-acts { grid-column: -2 / -1; }
.ccd-hold { grid-column: 1 / -1; color: #b45309; font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; word-break: keep-all; }
.ccd-meta { min-width: 0; color: #64748b; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccd-chip { width: 100%; min-width: 0; min-height: 30px; padding: 3px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #334155; font-size: var(--fs-meta); font-weight: 700; text-overflow: ellipsis; }
.ccd-bar .ccd-chip { width: auto; min-height: 36px; font-size: var(--fs-base); }
.ccd-chip.empty { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ccd-chip.soft { color: #64748b; font-weight: 600; }
.ccd-memo { width: 100%; min-width: 0; min-height: 30px; padding: 3px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: var(--fs-meta); }
.ccd-rc, .ccd-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; white-space: nowrap; }
.ccd-link { padding: 4px 0; border: 0; background: none; color: #2563eb; font-size: var(--fs-meta); font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ccd-link:disabled { color: #94a3b8; }
.ccd-back { display: block; margin-bottom: 12px; }
.ccd-note { margin: 12px 0; color: #64748b; font-size: var(--fs-meta); line-height: 1.6; word-break: keep-all; }
.ccd-note.bad { color: #b91c1c; font-weight: 700; }
.ccd-hint { margin: 0 0 12px; color: #64748b; font-size: var(--fs-base); line-height: 1.6; word-break: keep-all; }
.ccd-pick { display: flex; width: 100%; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; text-align: left; font-size: var(--fs-base); cursor: pointer; }
.ccd-pick:hover { border-color: #93c5fd; background: #eff6ff; }
.ccd-pick b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccd-cardset { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: var(--fs-base); font-weight: 700; }
.ccd-cardset .ccd-chip { width: 180px; }
@media (max-width: 900px) {
  .ccd-sub, .ccd-row:not(.todo):not(.done):not(.claim) .ccd-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ccd-sub > .ccd-meta, .ccd-sub > .ccd-memo, .ccd-sub > .ccd-acts, .ccd-sub > .ccd-rc { grid-column: 1 / -1; }
  .ccd-acts, .ccd-rc { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .ccd-row { padding: 12px; }
  .ccd-chip, .ccd-memo, .ccd-month { min-height: 40px; font-size: 16px; }   /* 아이폰은 16px 미만 입력칸을 확대하고 안 돌아온다 */
  .ccd-bar .ccd-chip { flex: 1 1 140px; }
}

/* 반차·반반차: 출근 시각과 쉬는 쪽으로 계산한 휴무 창 */
.apvn-half-fields { margin-bottom: 10px; min-width: 0; }
.apvn-half-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.apvn-half-start { flex: 0 1 140px; min-width: 0; }
.apvn-half-start .ecf-in { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.apvn-half-side { flex: 1 1 220px; min-width: 0; }
.apvn-half-buttons { display: flex; gap: 6px; }
.apvn-half-button { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.apvn-half-button[aria-pressed="true"] { border: 2px solid #4f46e5; background: #eef2ff; color: #3730a3; font-weight: 800; }
.apvn-half-button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.apvn-half-result { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; overflow-wrap: anywhere; }
.apvn-half-head { font-size: var(--fs-body); font-weight: 800; color: #1e3a8a; }
.apvn-half-sub { font-size: var(--fs-meta); font-weight: 600; color: #475569; margin-top: 3px; }
.apvn-half-hint, .apvn-half-prompt { font-size: var(--fs-meta); color: #64748b; overflow-wrap: anywhere; }
.apvn-half-prompt { margin-bottom: 6px; }