@font-face {
  font-family: "Pretendard";
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --accent: #303030;
  --accent-strong: #171717;
  --accent-soft: #ededed;
  --ink: #171717;
  --muted: #686868;
  --line: #d4d4d4;
  --line-soft: #e8e8e8;
  --paper: #fff;
  --ground: #f3f3f3;
  --content-width: 1180px;
  font-family: "Pretendard", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--ground);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

button { color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.brand-logo-link,
.brand-logo-button { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; }
.brand-logo-link { text-decoration: none; }
.brand-logo { display: block; width: auto; height: 20px; object-fit: contain; }
.brand-symbol { display: block; width: 36px; height: 36px; object-fit: contain; }

/* 뒤로·앞으로. 넓은 화면에서는 로고 옆, 좁은 화면에서는 위쪽 막대의 작은 단추가 같은 일을 한다. */
.history-nav { display: none; align-items: center; gap: 2px; }
.history-nav button {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.history-nav button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); }
.history-nav button:disabled { opacity: 0.28; cursor: default; }
.history-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compact-nav-button:disabled { opacity: 0.28; }

.app-shell,
.login-shell {
  width: min(100%, calc(var(--content-width) + 16px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -8px -8px 5px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 243, 243, 0.96);
  backdrop-filter: blur(10px);
}

.brand-lockup { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.brand-lockup strong { color: var(--ink); font-size: 14px; font-weight: 750; }

.user-pill {
  max-width: 140px;
  min-height: 28px;
  overflow: hidden;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-navigation {
  position: relative;
  z-index: 12;
  margin-bottom: 4px;
}

.main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.sub-tabs {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.main-tabs button,
.sub-tabs button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-weight: 720;
  white-space: nowrap;
}

.main-tabs button {
  min-height: 32px;
  border-radius: 5px;
  font-size: 12px;
}

.main-tabs button svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 120ms ease;
}

.main-tabs button[aria-expanded="true"] svg { transform: rotate(180deg); }

.sub-tabs button {
  min-height: 30px;
  border-color: transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 11.5px;
}

.main-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.sub-tabs button.active {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--ink);
}

.tab-count {
  display: inline-grid;
  min-width: 18px;
  height: 17px;
  place-items: center;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.main-tabs button.active .tab-count,
.sub-tabs button.active .tab-count { background: var(--accent); color: #fff; }

.payment-content { padding-top: 2px; }

.content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  margin: 2px 2px 5px;
}

.content-head h2 { margin: 0; font-size: 13px; font-weight: 780; }
.content-head p { display: none; }
.content-count { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
}

.entry-form-list { display: grid; gap: 6px; }
.entry-form-card { padding: 8px; overflow: visible; }

.entry-form-head {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: -1px 0 6px;
}

.entry-form-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 770;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-form-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.entry-form-actions button {
  min-height: 25px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 680;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}

.form-grid .field { grid-column: span 3; }
.form-grid .span-6 { grid-column: span 6; }
.form-grid .span-12,
.form-grid .note-field { grid-column: 1 / -1; }
.form-grid .invoice-field,
.form-grid .amount-field { grid-column: span 3; }

.field {
  display: block;
  min-width: 0;
  margin: 0;
  color: #444;
  font-size: 11px;
  font-weight: 690;
}

.field > span:first-child { display: block; margin: 0 0 3px; }

.field input,
.field select,
.field textarea,
.control,
.toolbar input,
.toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 570;
  outline: 0;
}

.field textarea { min-height: 52px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.toolbar input:focus,
.toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
.amount-field input { text-align: right; font-variant-numeric: tabular-nums; }

.lookup-combobox { position: relative; display: block; }
.lookup-suggestions {
  position: absolute;
  z-index: 45;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  max-height: min(320px, 44vh);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.lookup-suggestions button {
  display: grid;
  width: 100%;
  min-height: 38px;
  align-content: center;
  gap: 1px;
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
}
.lookup-suggestions button:hover,
.lookup-suggestions button.active { background: var(--accent-soft); }
.lookup-suggestions strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lookup-suggestions small { overflow: hidden; color: var(--muted); font-size: 9.5px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.lookup-suggestions-empty { display: block; padding: 9px 7px; color: var(--muted); font-size: 10.5px; font-weight: 560; }

.note-field {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #fafafa;
}

.note-field summary {
  min-height: 30px;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}
.note-field[open] summary { border-bottom: 1px solid var(--line-soft); }
.note-field .field { padding: 6px; }

.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 52px; }
.field-button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 48px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.primary-button,
.secondary-button,
.quiet-button,
.action-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 720;
  white-space: nowrap;
}

.primary-button,
.action-button.strong { border-color: var(--accent); background: var(--accent); color: #fff; }
.secondary-button { border-color: var(--accent); }
.quiet-button { color: var(--muted); }
.action-button { min-height: 29px; padding: 0 8px; font-size: 10.5px; }
button:disabled { opacity: 0.42; cursor: default; }

.form-toolbar {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 5px max(8px, calc((100vw - var(--content-width)) / 2)) calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(243, 243, 243, 0.97);
  backdrop-filter: blur(10px);
}

.form-toolbar > div { display: flex; gap: 5px; }
.form-submit-group .primary-button { min-width: 110px; }

.toolbar {
  display: grid;
  grid-template-columns: 108px 108px 118px minmax(160px, 1fr);
  gap: 4px;
  margin-bottom: 5px;
}
.toolbar.basic { grid-template-columns: 108px 108px minmax(160px, 1fr); }
.toolbar.with-dates { grid-template-columns: 104px 104px 114px minmax(150px, 1fr) 125px 125px; }
.toolbar input,
.toolbar select { min-height: 31px; padding: 4px 6px; border-radius: 4px; font-size: 11px; }
.project-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 4px; margin-bottom: 5px; }
.project-toolbar input,
.project-toolbar select { min-height: 31px; padding: 4px 6px; border-radius: 4px; font-size: 11px; }

.list-summary { display: none; }
.payment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.list-columns { display: none; }

.payment-row {
  position: relative;
  display: block;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.payment-row[data-selection-card] { cursor: pointer; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.payment-content.touch-selecting .payment-row[data-selection-card] { touch-action: none; }
.payment-row[data-payment-status="requested"] { border-color: #bfbfbf; background: #ebebeb; }
.payment-row[data-payment-status="requested"] .row-grid,
.payment-row[data-payment-status="requested"] .row-cell { border-color: #d5d5d5; background: #f0f0f0; }
.payment-row[data-payment-status="requested"] .row-cell.amount-cell { border-top-color: #d8d8d8; }
.payment-row[data-payment-status="requested"] .row-cell.amount-total { background: #e5e5e5; }
.payment-row[data-payment-status="requested"] .badge.emphasis { border-color: #b7b7b7; background: #dcdcdc; }
.payment-row.selected { border-color: #bcbcbc; background: #ededed; box-shadow: inset 3px 0 0 var(--accent); }
.payment-row.selected .row-grid,
.payment-row.selected .row-cell { background: #f2f2f2; }
.payment-row.selected .row-cell.amount-total { background: #e7e7e7; }
.payment-row[data-selection-card]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.payment-row-main { display: grid; min-width: 0; gap: 4px; }
.inline-payment-row { display: block; grid-column: 1 / -1; overflow: visible; padding: 8px; border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.inline-payment-form { display: grid; min-width: 0; gap: 7px; }
.inline-payment-actions { display: flex; justify-content: flex-end; gap: 5px; padding-top: 1px; }
.inline-payment-actions button { min-width: 76px; }

.row-title {
  display: flex;
  min-width: 0;
  min-height: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.row-title strong { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 19px;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7f7f7;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 690;
  white-space: nowrap;
}
.badge.emphasis { border-color: #c6c6c6; background: var(--accent-soft); color: var(--accent-strong); }

.row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  color: #404040;
  font-size: 10.5px;
  font-weight: 620;
}

.row-cell {
  display: flex;
  min-width: 0;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px 5px;
  border: 0;
  border-left: 1px solid var(--line-soft);
  background: var(--paper);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-cell:first-child,
.row-cell.trade,
.row-cell.amount-supply { border-left: 0; }
.row-cell.bank { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line-soft); border-left: 0; }
.row-cell.account { grid-column: 2 / 4; grid-row: 2; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.row-cell.amount-cell { grid-row: 3; justify-content: flex-end; border-top: 3px solid var(--ground); font-weight: 720; font-variant-numeric: tabular-nums; }
.row-cell.amount-supply { grid-column: 1; }
.row-cell.amount-vat { grid-column: 2; }
.row-cell.amount-total { grid-column: 3; background: #f7f7f7; }
.row-cell.copy-cell { cursor: copy; }

.row-foot {
  display: flex;
  min-height: 21px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 570;
}
.row-actions { display: flex; gap: 4px; }
.row-actions button { min-height: 23px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--accent-strong); font-size: 9.5px; font-weight: 690; }

.row-note,
.rejection-note {
  margin: 0;
  padding: 5px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #fafafa;
  color: var(--muted);
  font-size: 10px;
  white-space: pre-wrap;
}
.rejection-note b { margin-right: 5px; color: var(--accent-strong); }
.attachment-link { color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.group-label { margin: 8px 2px 4px; color: var(--accent-strong); font-size: 11px; font-weight: 720; }
.empty { padding: 28px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); text-align: center; font-size: 11.5px; font-weight: 600; }

.bulk-bar {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px max(8px, calc((100vw - var(--content-width)) / 2)) calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(243, 243, 243, 0.97);
  backdrop-filter: blur(10px);
}
.bulk-bar > span { display: grid; min-width: 0; margin-right: auto; font-variant-numeric: tabular-nums; }
.bulk-bar > span b { overflow: hidden; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-bar > span small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.quote-layout { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(360px, 1.2fr); gap: 6px; }
.quote-form { padding: 8px; }
.quote-form .form-grid .field { grid-column: span 6; }
.quote-form .form-grid .span-12 { grid-column: 1 / -1; }
.file-field input { padding: 5px; }
.quote-list h3 { margin: 0; padding: 8px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.quote-row { display: grid; grid-template-columns: 1.1fr 0.7fr 1fr auto; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); font-size: 10.5px; }
.quote-row:last-child { border-bottom: 0; }
.quote-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-row a { color: var(--accent-strong); font-weight: 700; }

.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.project-card { padding: 8px; }
.project-card.project-closed { border-color: #b9d8c5; background: #f5faf7; }
.project-head { display: flex; min-height: 25px; align-items: center; justify-content: space-between; gap: 8px; }
.project-head h3 { min-width: 0; margin: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.project-head > div { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.project-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 5px; border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.project-metrics span { min-width: 0; padding: 5px; border-left: 1px solid var(--line-soft); color: var(--muted); font-size: 9px; }
.project-metrics span:first-child { border-left: 0; }
.project-metrics b { display: block; overflow: hidden; margin-top: 2px; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.project-card .list-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.summary-chip { min-height: 24px; padding: 4px 6px; border: 1px solid var(--line-soft); border-radius: 4px; color: var(--muted); font-size: 9px; }
.summary-chip b { color: var(--ink); }
.summary-chip.status-done { border-color: #b9d8c5; background: #edf8f1; color: #287044; }
.summary-chip.status-missing { border-color: #e3b9b5; background: #fff3f2; color: #a33c34; }
.project-card details { margin-top: 5px; }
.project-card summary { color: var(--accent-strong); font-size: 10px; font-weight: 680; cursor: pointer; }
.project-detail { display: grid; gap: 6px; margin-top: 4px; }
.project-detail-group { display: grid; gap: 2px; }
.project-detail-group + .project-detail-group { padding-top: 5px; border-top: 2px solid var(--line); }
.project-detail-site { overflow: hidden; padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; background: #e8ebef; color: var(--ink); font-size: 9.5px; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.project-detail-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 48px 58px minmax(78px, 0.9fr); gap: 3px; align-items: center; min-height: 25px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--muted); font-size: 9.5px; }
.project-detail-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-detail-row > span:nth-child(3),
.project-detail-row > span:nth-child(4) { text-align: center; }
.project-detail-row > span:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.project-detail-head { min-height: 22px; background: #f0f1f3; color: var(--ink); font-weight: 750; text-align: center; }
.project-detail-head > span:nth-child(5) { text-align: center; }
.project-detail-total { border-color: #c8ccd2; background: #e3e5e8; color: var(--ink); font-weight: 750; }
.project-detail-total.grand { border-color: #aeb5bf; background: #d6dbe2; }
.project-detail-row b { color: var(--ink); }
.project-detail-link { width: 100%; min-height: 20px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.status-done { color: #287044; }
.status-missing { color: #a33c34; }
.project-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 5px; }
.project-actions .action-button { min-width: 38px; }
.project-transfer-notice { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; padding: 6px 8px; border: 1px solid #b9d8c5; border-radius: 5px; background: #edf8f1; color: #287044; font-size: 10.5px; }
.project-transfer-notice.warn { border-color: #e3b9b5; background: #fff3f2; color: #a33c34; }
.project-transfer-notice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.member-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.member-head.no-back { grid-template-columns: 1fr auto; }
.member-head > span { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.member-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 100px; gap: 4px; margin-bottom: 5px; }
.member-toolbar input,
.member-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11.5px;
  outline: 0;
}
.member-toolbar input:focus,
.member-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
.member-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.member-row { padding: 7px; }
.member-row.inactive { background: #f8f8f8; }
.member-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; }
.member-identity { display: grid; min-width: 0; gap: 1px; }
.member-identity > div { display: flex; min-width: 0; align-items: center; gap: 5px; }
.member-main strong { min-width: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.member-identity > small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.member-self { color: var(--accent-strong); font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-badge { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 9.5px; font-weight: 680; white-space: nowrap; }
.status-badge.active { border-color: var(--accent); color: var(--accent-strong); }
.status-badge.inactive { color: var(--muted); }
.member-meta { display: grid; grid-template-columns: 0.8fr 1fr 1.35fr 0.75fr; margin-top: 6px; border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.member-meta span { min-width: 0; padding: 5px 6px; border-left: 1px solid var(--line-soft); }
.member-meta span:first-child { border-left: 0; }
.member-meta small { display: block; color: var(--muted); font-size: 8.5px; }
.member-meta b { display: block; overflow: hidden; margin-top: 1px; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.member-row footer { display: flex; justify-content: flex-end; margin-top: 5px; }
.member-row footer button { min-height: 27px; padding: 0 8px; font-size: 10.5px; }
.empty-state { padding: 34px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); text-align: center; font-size: 11.5px; }
.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 6px; }
.check-field { display: flex; min-height: 36px; align-items: center; gap: 6px; color: var(--ink); font-size: 11.5px; font-weight: 650; }
.check-field input { width: 15px; height: 15px; accent-color: var(--accent); }
.dialog-help { margin: 8px 0 0; color: var(--muted); font-size: 10.5px; }
.install-dialog p { line-height: 1.65; }

.login-shell { padding-bottom: 8px; }
.login-topbar { position: static; }
.login-card { width: min(100%, 390px); margin: clamp(70px, 16vh, 150px) auto 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.login-card > header { margin: -2px 0 14px; }
.login-card h1 { margin: 0; font-size: 18px; font-weight: 740; }
.login-card form { display: grid; gap: 10px; }
.login-card .primary-button { width: 100%; margin-top: 2px; }
.form-error { margin: 0; color: var(--accent-strong); font-size: 10.5px; font-weight: 650; }

.account-menu {
  position: fixed;
  z-index: 50;
  top: 44px;
  right: max(8px, calc((100vw - var(--content-width)) / 2));
  width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.account-menu > div { display: flex; align-items: center; gap: 7px; padding: 7px; }
.account-menu > div > span:last-child { min-width: 0; }
.account-menu > div strong,
.account-menu > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu > div small { margin-top: 1px; color: var(--muted); font-size: 9.5px; }
.account-menu > button { width: 100%; min-height: 32px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--muted); text-align: left; font-size: 11px; font-weight: 650; }
.avatar { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: var(--accent-soft); color: var(--ink); font-size: 10px; font-weight: 750; }

.dialog { width: min(92vw, 400px); padding: 0; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16); }
.member-dialog { width: min(92vw, 520px); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
.dialog form,
.dialog > div { padding: 12px; }
.dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dialog h2 { margin: 0; font-size: 15px; }
.dialog header button { border: 0; background: transparent; color: var(--muted); font-size: 21px; }
.dialog p { margin: 0 0 12px; color: var(--muted); font-size: 11.5px; }
.dialog footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 12px; }
.dialog-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.project-dialog { width: min(94vw, 520px); }
.create-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.create-mode-tabs button { min-height: 31px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 680; }
.create-mode-tabs button.active { border-bottom-color: var(--ink); color: var(--ink); font-weight: 760; }
.create-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.create-fields[hidden] { display: none; }
.create-unavailable { min-height: 72px; padding: 22px 0; text-align: center; }
.prefixed-folder-input { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.prefixed-folder-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
.prefixed-folder-input output { padding-left: 8px; color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.field .prefixed-folder-input input { min-height: 34px; border: 0; box-shadow: none; }
.project-folder-rule-grid { display: grid; grid-template-columns: 72px minmax(110px, 1fr) 72px; gap: 8px; }
.project-folder-preview { display: block; min-height: 31px; margin-top: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }

/* NAS file browser */
.file-browser { position: relative; display: grid; gap: 6px; }
.file-drop-overlay {
  position: absolute;
  z-index: 30;
  inset: 38px 0 0;
  display: none;
  min-height: 160px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px dashed #777;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  pointer-events: none;
}
.file-drop-overlay strong { font-size: 14px; }
.file-drop-overlay span { color: var(--muted); font-size: 10.5px; }
.file-browser.is-dragging-files .file-drop-overlay { display: grid; }
.file-row.drop-target { outline: 2px solid #555; outline-offset: -2px; background: #ededed; }
.file-browser-head { position: sticky; top: calc(40px + env(safe-area-inset-top)); z-index: 12; display: grid; min-height: 34px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; background: var(--ground); }
.file-location { display: flex; min-width: 0; grid-column: 1; grid-row: 1; align-items: center; }
.file-back-button { display: inline-flex; width: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 3px; background: transparent; align-items: center; justify-content: center; }
.file-back-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.file-breadcrumbs { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.file-breadcrumbs::-webkit-scrollbar { display: none; }
.file-breadcrumbs button { flex: 0 0 auto; min-height: 28px; padding: 0 5px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 680; }
.file-breadcrumbs button:last-child { color: var(--ink); font-weight: 760; }
.file-breadcrumbs i { flex: 0 0 auto; color: #aaa; font-size: 10px; font-style: normal; }
.file-actions { display: flex; min-width: 0; grid-column: 2; grid-row: 1; align-items: center; justify-content: flex-end; gap: 4px; }
.file-actions > button { min-height: 30px; padding: 0 9px; border: 0; border-radius: 3px; background: transparent; font-size: 10.5px; font-weight: 680; }
.file-actions > .file-upload-button:hover { background: #e5e5e5; }
.file-actions > .file-create-button { width: 30px; min-width: 30px; padding: 0; color: var(--ink); font-size: 20px; font-weight: 400; line-height: 1; }
.file-actions > .file-create-button:hover { background: #e5e5e5; }
.file-actions .file-selection-summary { min-width: 0; }
.file-search { width: 100%; min-width: 0; min-height: 34px; grid-column: 1 / -1; grid-row: 2; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 11.5px; }
.file-selection-summary { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.file-selection-summary > strong { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; font-size: 10.5px; }
.file-selection-summary > strong small { color: var(--muted); font-size: 9px; font-weight: 600; }
.file-selection-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.file-selection-actions::-webkit-scrollbar { display: none; }
.file-selection-actions button { flex: 0 0 auto; min-height: 25px; padding: 0 7px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); font-size: 9.5px; font-weight: 650; }
.file-selection-actions button:hover:not(:disabled) { background: #e5e5e5; }
.file-selection-actions button:disabled { color: #aaa; }
.file-table { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.file-table-head,
.file-row { display: grid; grid-template-columns: minmax(220px, 1fr) 88px 94px; align-items: center; gap: 8px; }
.file-table-head { min-height: 30px; padding: 0 8px; border-bottom: 1px solid var(--line); background: #f8f8f8; color: var(--muted); font-size: 9.5px; font-weight: 720; }
.file-row { min-height: 42px; padding: 3px 8px; border-bottom: 1px solid var(--line-soft); cursor: default; user-select: none; touch-action: pan-y; }
.file-row:last-child { border-bottom: 0; }
.file-row.selected { background: #ededed; }
.file-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.file-browser.touch-selecting .file-row { touch-action: none; }
.file-entry-main { display: grid; min-width: 0; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; text-align: left; }
.file-entry-main svg { width: 21px; height: 21px; fill: none; stroke: #5d5d5d; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.file-entry-copy { min-width: 0; }
.file-entry-copy strong,
.file-entry-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-entry-copy strong { font-size: 11.5px; font-weight: 700; }
.file-entry-copy small { margin-top: 1px; color: var(--muted); font-size: 9.5px; }
.file-meta { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.file-empty { padding: 34px 12px; color: var(--muted); font-size: 11px; text-align: center; }
.file-read-only { padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 5px; background: #f8f8f8; color: var(--muted); font-size: 10px; }
.file-upload-status { color: var(--muted); font-size: 10px; }
.file-upload-status:empty { display: none; }

.toast { position: fixed; z-index: 100; right: 10px; bottom: 54px; max-width: min(360px, calc(100vw - 20px)); padding: 9px 11px; border-radius: 5px; background: var(--accent-strong); color: #fff; font-size: 11px; font-weight: 650; white-space: pre-line; }

@media (max-width: 720px) {
  .app-shell,
  .login-shell { width: 100%; }
  .payment-list,
  .project-list,
  .member-list { grid-template-columns: 1fr; }
  .quote-layout { grid-template-columns: 1fr; }
  .toolbar.with-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar.with-dates input[type="date"] { grid-column: span 2; }
}

@media (max-width: 520px) {
  body { font-size: 13px; }
  .app-shell,
  .login-shell { padding: 6px; }
  .topbar { min-height: 40px; margin: -6px -6px 4px; padding: calc(5px + env(safe-area-inset-top)) 8px 5px; }
  .brand-logo { height: 18px; }
  .brand-lockup strong { font-size: 13px; }
  .user-pill { min-height: 26px; max-width: 100px; padding: 0 8px; font-size: 11px; }
  .main-tabs button { min-height: 32px; font-size: 12px; }
  .sub-tabs button { min-height: 27px; padding: 0 2px; font-size: 10.5px; }
  .entry-form-card { padding: 7px; }
  .form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .form-grid .field { grid-column: span 3; }
  .form-grid .span-6,
  .form-grid .span-12,
  .form-grid .note-field,
  .form-grid .invoice-field { grid-column: 1 / -1; }
  .form-grid .amount-field { grid-column: span 2; }
  .field { font-size: 10.5px; }
  .field input,
  .field select,
  .field textarea { min-height: 35px; padding: 5px 7px; font-size: 12px; }
  .field textarea { min-height: 46px; }
  .toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar.basic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolbar.with-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar.with-dates input[type="date"] { grid-column: span 2; }
  .content-head { min-height: 25px; margin-top: 0; }
  .content-head h2 { font-size: 12px; }
  .payment-row { padding: 6px; }
  .form-toolbar,
  .bulk-bar { padding-right: 6px; padding-left: 6px; }
  .form-toolbar .primary-button { min-width: 92px; }
  .bulk-bar .action-button { padding: 0 7px; }
  .quote-form .form-grid .field,
  .quote-form .form-grid .span-12 { grid-column: 1 / -1; }
  .quote-row { grid-template-columns: 1fr 0.7fr 1fr auto; padding: 6px; }
  .project-detail-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 42px 50px minmax(72px, 0.9fr); gap: 2px; padding: 3px; font-size: 9px; }
  .login-card { margin-top: 52px; }
  .account-menu { top: 40px; right: 6px; }
  .member-head { grid-template-columns: auto 1fr auto; }
  .member-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-form-grid { grid-template-columns: 1fr; }
  .member-meta { grid-template-columns: 1fr 1fr; }
  .member-meta span:nth-child(odd) { border-left: 0; }
  .member-meta span:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .dialog-field-grid { grid-template-columns: 1fr; }
  .file-browser-head { gap: 3px; }
  .file-location { grid-column: 1; grid-row: 1; }
  .file-search { grid-column: 1 / -1; grid-row: 2; }
  .file-actions { grid-column: 2; grid-row: 1; gap: 3px; }
  .file-actions button { min-height: 28px; padding: 0 7px; }
  .file-table-head { display: none; }
  .file-table { display: block; border-right: 0; border-left: 0; border-radius: 0; overflow: visible; }
  .file-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "entry meta";
    min-height: 46px;
    gap: 5px;
    padding: 4px 3px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .file-entry-main { grid-area: entry; }
  .file-size { grid-area: meta; }
  .file-folder .file-size,
  .file-project .file-size,
  .file-collection .file-size { display: none; }
  .file-date { display: none; }
  .file-selection-summary { margin-right: -3px; }
  .file-selection-actions button:disabled { display: none; }
}

@media (max-width: 370px) {
  .sub-tabs button { font-size: 10px; }
  .row-cell { padding-right: 3px; padding-left: 3px; font-size: 10px; }
  .bulk-bar > span small { display: none; }
  .bulk-bar .action-button { padding: 0 6px; font-size: 10px; }
}

/* Scalable application shell */
.app-shell {
  width: min(100%, 1600px);
  padding-bottom: 8px;
}

.app-workspace { min-width: 0; }
.app-sidebar { display: none; }
.app-topbar { min-height: 40px; padding: calc(2px + env(safe-area-inset-top)) 6px 2px; }

.global-nav svg,
.mobile-top-nav svg,
.mobile-app-menu svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-top-nav {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 3px;
}

.mobile-nav-spacer { flex: 1 1 auto; }

.compact-nav-button,
.compact-account-button {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
}

.compact-nav-button { width: 34px; padding: 0; }
.compact-nav-button svg { width: 18px; height: 18px; }
.compact-nav-button.active { background: var(--accent-soft); color: var(--accent-strong); }

.compact-account-button {
  width: 34px;
  padding: 0;
}
.compact-account-button svg { width: 18px; height: 18px; }
.compact-account-button[aria-expanded="true"] { background: var(--accent-soft); color: var(--ink); }

.mobile-app-menu {
  position: fixed;
  z-index: 50;
  top: calc(40px + env(safe-area-inset-top));
  left: 6px;
  width: 176px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mobile-app-menu nav { display: grid; gap: 2px; }
.mobile-app-menu button {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 690;
  text-align: left;
}
.mobile-app-menu button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.payment-content.needs-action-space { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
.form-toolbar,
.bulk-bar { bottom: env(safe-area-inset-bottom); }
.toast { bottom: calc(52px + env(safe-area-inset-bottom)); }

.account-menu {
  top: calc(40px + env(safe-area-inset-top));
  right: 6px;
  bottom: auto;
}

/* Home workspace */
.home-page { display: grid; gap: 18px; padding: 4px 6px; }
.home-section { min-width: 0; }
.home-section > header { display: flex; min-height: 30px; align-items: center; border-bottom: 1px solid var(--line); }
.home-section h2 { margin: 0; font-size: 12px; }
.home-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-metric { display: flex; min-height: 58px; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 9px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.home-metric + .home-metric { border-left: 1px solid var(--line-soft); }
.home-metric span { color: var(--muted); font-size: 10.5px; }
.home-metric strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.home-recent-list { display: grid; }
.home-recent-row { display: grid; min-height: 46px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.home-recent-row > span { display: grid; min-width: 0; gap: 2px; }
.home-recent-row > span:last-child { justify-items: end; text-align: right; }
.home-recent-row strong { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-recent-row small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-empty { min-height: 64px; padding: 20px 8px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }

@media (max-width: 520px) {
  .home-page { gap: 14px; padding: 3px 0; }
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metric { min-height: 52px; padding: 8px; }
  .home-metric:nth-child(3) { border-left: 0; }
  .home-metric strong { font-size: 15px; }
  .home-recent-row { min-height: 44px; padding: 5px 2px; }
}

/* Calendar workspace */
.calendar-page { display: grid; min-width: 0; min-height: 0; gap: 7px; padding: 1px 0; }
.calendar-toolbar {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.calendar-month-control,
.calendar-toolbar-actions { display: flex; align-items: center; gap: 4px; }
.calendar-toolbar-leading { display: flex; min-width: 0; align-items: center; gap: 10px; }
.calendar-view-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f3f3f3;
}
.calendar-view-tabs button {
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}
.calendar-view-tabs button.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.calendar-month-jump {
  display: block;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.calendar-month-jump:hover { border-color: var(--line); background: #f6f6f6; }
.calendar-month-control h2 {
  min-width: 104px;
  margin: 0;
  font-size: 15px;
  font-weight: 780;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.calendar-month-control h2 .calendar-month-year { margin-right: 4px; }
.calendar-icon-button {
  display: grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
}
.calendar-icon-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-toolbar-actions .primary-button,
.calendar-toolbar-actions .secondary-button { min-height: 30px; padding: 0 9px; }
.calendar-layout { display: grid; min-width: 0; min-height: 0; gap: 7px; }
.calendar-viewport,
.calendar-agenda,
.calendar-all-schedules {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.calendar-weekdays {
  display: grid;
  min-height: 25px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f7f7f7;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.calendar-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.calendar-cell {
  position: relative;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  padding: 3px;
  background: var(--paper);
  cursor: pointer;
}
.calendar-cell.outside-month { background: #fafafa; color: #989898; }
.calendar-cell.selected { z-index: 1; box-shadow: inset 0 0 0 1px #c3c8ce; }
.calendar-cell.long-press-active { z-index: 1; box-shadow: inset 0 0 0 2px #555; }
.calendar-day-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 10.5px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.calendar-cell.today .calendar-day-number { background: var(--accent); color: #fff; font-weight: 780; }
.calendar-color-gray { --calendar-event-color: #c2c8d0; --calendar-event-accent: #5f6873; --calendar-event-soft: #f0f2f4; }
.calendar-color-slate { --calendar-event-color: #a9b8ca; --calendar-event-accent: #4c6075; --calendar-event-soft: #ebf0f7; }
.calendar-color-navy { --calendar-event-color: #7f99d8; --calendar-event-accent: #334e80; --calendar-event-soft: #e7ecfa; }
.calendar-color-blue { --calendar-event-color: #65a8ff; --calendar-event-accent: #2563a6; --calendar-event-soft: #e4f0ff; }
.calendar-color-sky { --calendar-event-color: #5ac7f0; --calendar-event-accent: #247da3; --calendar-event-soft: #e0f7ff; }
.calendar-color-cyan { --calendar-event-color: #4fd4dc; --calendar-event-accent: #1f7f89; --calendar-event-soft: #defbfc; }
.calendar-color-teal { --calendar-event-color: #4fc9ad; --calendar-event-accent: #237866; --calendar-event-soft: #e0f8f2; }
.calendar-color-mint { --calendar-event-color: #6ed9a3; --calendar-event-accent: #317a55; --calendar-event-soft: #e6faef; }
.calendar-color-green { --calendar-event-color: #72cf78; --calendar-event-accent: #3b7c3e; --calendar-event-soft: #e8f8e8; }
.calendar-color-lime { --calendar-event-color: #a8d94d; --calendar-event-accent: #6b842d; --calendar-event-soft: #f1f9df; }
.calendar-color-yellow { --calendar-event-color: #f4dd4f; --calendar-event-accent: #8b7700; --calendar-event-soft: #fff9cf; }
.calendar-color-amber { --calendar-event-color: #f6c84d; --calendar-event-accent: #926d00; --calendar-event-soft: #fff4d2; }
.calendar-color-orange { --calendar-event-color: #f7a04f; --calendar-event-accent: #a45616; --calendar-event-soft: #ffead6; }
.calendar-color-coral { --calendar-event-color: #f47f69; --calendar-event-accent: #a33f2a; --calendar-event-soft: #ffe3dc; }
.calendar-color-red { --calendar-event-color: #ef6f73; --calendar-event-accent: #9d2f2f; --calendar-event-soft: #ffe2e2; }
.calendar-color-rose { --calendar-event-color: #f276a0; --calendar-event-accent: #a23b5c; --calendar-event-soft: #ffe2ec; }
.calendar-color-pink { --calendar-event-color: #ec82bd; --calendar-event-accent: #9a3e73; --calendar-event-soft: #ffe4f3; }
.calendar-color-purple { --calendar-event-color: #b98aef; --calendar-event-accent: #684594; --calendar-event-soft: #f0e3ff; }
.calendar-event-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(var(--calendar-weeks, 6), minmax(0, 1fr));
  gap: 1px;
  pointer-events: none;
}
.calendar-event-segment {
  position: relative;
  display: flex;
  min-width: 0;
  height: 18px;
  align-self: start;
  align-items: center;
  margin-top: 25px;
  overflow: hidden;
  border-radius: 0;
  background: var(--calendar-event-color, #dedede);
  color: var(--ink);
  pointer-events: auto;
  user-select: none;
}
.calendar-row-1 { grid-row: 1; }
.calendar-row-2 { grid-row: 2; }
.calendar-row-3 { grid-row: 3; }
.calendar-row-4 { grid-row: 4; }
.calendar-row-5 { grid-row: 5; }
.calendar-row-6 { grid-row: 6; }
.calendar-column-start-1 { grid-column-start: 1; }
.calendar-column-start-2 { grid-column-start: 2; }
.calendar-column-start-3 { grid-column-start: 3; }
.calendar-column-start-4 { grid-column-start: 4; }
.calendar-column-start-5 { grid-column-start: 5; }
.calendar-column-start-6 { grid-column-start: 6; }
.calendar-column-start-7 { grid-column-start: 7; }
.calendar-column-end-2 { grid-column-end: 2; }
.calendar-column-end-3 { grid-column-end: 3; }
.calendar-column-end-4 { grid-column-end: 4; }
.calendar-column-end-5 { grid-column-end: 5; }
.calendar-column-end-6 { grid-column-end: 6; }
.calendar-column-end-7 { grid-column-end: 7; }
.calendar-column-end-8 { grid-column-end: 8; }
.calendar-column-1 { grid-column: 1; }
.calendar-column-2 { grid-column: 2; }
.calendar-column-3 { grid-column: 3; }
.calendar-column-4 { grid-column: 4; }
.calendar-column-5 { grid-column: 5; }
.calendar-column-6 { grid-column: 6; }
.calendar-column-7 { grid-column: 7; }
.calendar-lane-1 { margin-top: 44px; }
.calendar-lane-2 { margin-top: 63px; }
.calendar-lane-3 { margin-top: 82px; }
.calendar-entry-tag {
  display: inline-flex;
  width: 15px;
  height: 13px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--calendar-event-accent, #4c6075);
  color: #fff;
  cursor: pointer;
}
.calendar-entry-tag svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.calendar-entry-tag:hover { filter: brightness(1.25); }
.calendar-entry-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.calendar-process-toggle { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; }
.calendar-process-toggle.disabled { color: var(--muted); }
.calendar-process-toggle input { width: 15px; height: 15px; accent-color: var(--accent); }
.calendar-event-segment.starts-here { margin-left: 3px; border-radius: 3px 0 0 3px; }
.calendar-event-segment.ends-here { margin-right: 3px; border-radius: 0 3px 3px 0; }
.calendar-event-segment.starts-here.ends-here { border-radius: 3px; }
.calendar-event-body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.calendar-event-body time { flex: 0 0 auto; color: #4f4f4f; font-size: 8px; font-variant-numeric: tabular-nums; }
.calendar-event-body b { min-width: 0; overflow: hidden; flex: 1 1 auto; font-size: 9.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-body small { flex: 0 0 auto; padding-right: 1px; color: #4f4f4f; font-size: 7.5px; font-weight: 700; }
.calendar-event-segment.manageable .calendar-event-body { cursor: grab; touch-action: none; }
.calendar-event-segment.dragging .calendar-event-body,
.calendar-event-dragging .calendar-event-body { cursor: grabbing; }
.calendar-event-handle {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: ew-resize;
  touch-action: none;
}
.calendar-event-handle.start { left: 0; }
.calendar-event-handle.end { right: 0; }
.calendar-event-segment.starts-here .calendar-event-body { padding-left: 8px; }
.calendar-event-segment.ends-here .calendar-event-body { padding-right: 8px; }
.calendar-event-more {
  z-index: 3;
  align-self: end;
  margin: 0 3px 2px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 680;
  pointer-events: none;
}
/* 요일줄과 같은 높이여야 두 칸이 한 눈에 나란히 보인다. 눌러서 접고 편다. */
.calendar-agenda > summary,
.calendar-all-schedules > summary {
  display: flex;
  min-height: 25px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line);
  background: #f7f7f7;
  cursor: pointer;
  font-size: 11px;
  font-weight: 740;
  list-style: none;
}
.calendar-agenda > summary::-webkit-details-marker,
.calendar-all-schedules > summary::-webkit-details-marker { display: none; }
.calendar-agenda > summary span,
.calendar-all-schedules > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-agenda > summary small,
.calendar-all-schedules > summary small { margin-left: auto; color: var(--muted); font-size: 9.5px; font-weight: 600; }
.calendar-agenda:not([open]) > summary,
.calendar-all-schedules:not([open]) > summary { border-bottom: 0; }
.calendar-sidebar { display: grid; min-width: 0; min-height: 0; gap: 7px; }
.calendar-agenda[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.calendar-agenda-list { display: grid; min-height: 0; align-content: start; overflow-y: auto; }
.calendar-agenda-item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.calendar-agenda-item:last-child { border-bottom: 0; }
.calendar-agenda-item:hover { background: #fafbfc; }
/* 색은 점 하나로 충분하다. 줄 전체를 칠하면 제목이 묻힌다. */
.calendar-agenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--calendar-event-color, #c2c8d0);
}
.calendar-agenda-copy { display: grid; min-width: 0; gap: 2px; }
.calendar-agenda-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda-copy p { overflow: hidden; margin: 0; color: #444; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda-copy small { overflow: hidden; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda-actions { display: flex; align-items: center; gap: 2px; }
.calendar-row-button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.calendar-row-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.calendar-row-button:hover { background: #eef1f5; color: var(--ink); }
.calendar-row-button.danger:hover { background: #fdecea; color: #b3261e; }
.calendar-row-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-agenda-empty {
  display: grid;
  min-height: 82px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 12px;
  color: var(--muted);
  font-size: 10.5px;
}
.calendar-agenda-empty button { min-height: 27px; border: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 720; text-decoration: underline; }
.calendar-all-schedules-list { min-height: 0; overflow-y: auto; }
.calendar-color-field {
  min-width: 0;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
}
.calendar-color-field legend { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 680; }
.calendar-color-options {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 8px;
}
.calendar-color-options label { position: relative; display: grid; width: 24px; height: 24px; place-items: center; cursor: pointer; }
.calendar-color-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.calendar-color-swatch {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  background: var(--calendar-event-color);
}
.calendar-color-options input:checked + .calendar-color-swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--calendar-event-accent); }
.calendar-color-options input:focus-visible + .calendar-color-swatch { outline: 2px solid var(--ink); outline-offset: 3px; }
.calendar-dialog { width: min(94vw, 520px); }
.calendar-dialog form { max-height: min(90vh, 780px); overflow-y: auto; }
.calendar-dialog .calendar-date-fields,
.calendar-dialog .calendar-time-fields,
.calendar-dialog .calendar-note-field { margin-top: 9px; }
.calendar-invite-field { min-width: 0; margin: 10px 0 0; padding: 0; border: 0; }
.calendar-invite-field legend { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 680; }
.calendar-invite-options {
  display: grid;
  max-height: 138px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--paper);
}
.calendar-invite-option {
  display: grid;
  min-width: 0;
  min-height: 42px;
  grid-template-columns: 14px 25px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--paper);
  cursor: pointer;
}
.calendar-invite-option:nth-child(even) { border-left: 1px solid var(--line-soft); }
.calendar-invite-option input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.calendar-invite-option .avatar { width: 25px; height: 25px; }
.calendar-invite-option > span:last-child { min-width: 0; }
.calendar-invite-option strong,
.calendar-invite-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-invite-option strong { font-size: 10.5px; }
.calendar-invite-option small { margin-top: 1px; color: var(--muted); font-size: 8.5px; }
.calendar-invite-empty { grid-column: 1 / -1; padding: 15px 8px; background: var(--paper); text-align: center; }
.calendar-dialog footer .calendar-delete-button { margin-right: auto; }

.process-list-page,
.process-detail-page { min-height: 0; }
.process-list {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 12px;
  overflow: auto;
  padding-bottom: 7px;
}
.process-list-group { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.process-list-group > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  background: #f7f8fa;
}
.process-list-group > header h3 { overflow: hidden; margin: 0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.process-list-group > header small { flex: 0 0 auto; color: var(--muted); font-size: 9.5px; font-weight: 700; }
.process-list-group > header .quiet-button { flex: 0 0 auto; margin-left: auto; }
.process-list-done > summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 10px;
  background: #f7f8fa;
  cursor: pointer;
  list-style: none;
}
.process-list-done > summary::-webkit-details-marker { display: none; }
.process-list-done > summary::before { color: var(--muted); content: "B8"; font-size: 9px; }
.process-list-done[open] > summary::before { content: "BE"; }
.process-list-done > summary h3 { margin: 0; color: var(--muted); font-size: 12px; }
.process-list-done > summary small { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.process-list-done .process-list-card { opacity: 0.78; }
.process-list-target { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.process-list-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.process-list-group li + li { border-top: 1px solid var(--line-soft); }
.process-list-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.process-list-card:hover { background: #f4f7fb; }
.process-list-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.process-list-status { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 760; }
.process-list-status.active { background: #dff0e2; color: #2b6b39; }
.process-list-status.upcoming { background: #e6eefb; color: #2f5488; }
.process-list-status.done { background: #eceef1; color: #5f6873; }
.process-list-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.process-list-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.process-list-period { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.process-list-trades { overflow: hidden; color: #6b7280; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.process-list-count { display: grid; flex: 0 0 auto; justify-items: center; }
.process-list-count b { font-size: 14px; font-variant-numeric: tabular-nums; }
.process-list-count small { color: var(--muted); font-size: 8.5px; }
.process-list-empty { margin-top: 22px; }

.process-back-button { flex: 0 0 auto; }
.process-detail-heading { display: grid; min-width: 0; gap: 1px; }
.process-detail-heading h2 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.process-detail-heading p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.process-resize-handle {
  position: absolute;
  z-index: 8;
  touch-action: none;
}
.process-resize-handle.col { top: 0; right: -5px; bottom: 0; width: 11px; cursor: col-resize; }
.process-resize-handle.row { right: 0; bottom: -5px; left: 0; height: 11px; cursor: row-resize; }
.process-resize-handle:hover { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html.process-resizing-col, html.process-resizing-col * { cursor: col-resize !important; }
html.process-resizing-row, html.process-resizing-row * { cursor: row-resize !important; }
.process-range-toggle { height: 31px; border: 1px solid var(--line); border-radius: 4px; font-size: 10.5px; font-weight: 700; }
.process-range-toggle.on { border-color: var(--accent); background: #eef4ff; color: var(--accent); }

.process-time-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.process-time-presets button {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
}
.process-time-presets button:hover { border-color: var(--accent); background: #eef4ff; color: var(--accent); }
.process-time-summary {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.process-gantt-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  overscroll-behavior-x: contain;
}
.process-gantt { position: relative; display: grid; min-width: max-content; }
.process-gantt-head { position: sticky; z-index: 5; top: 0; display: flex; background: #f7f8fa; }
.process-gantt-corner {
  position: sticky;
  z-index: 6;
  left: 0;
  display: flex;
  width: 118px;
  min-width: 118px;
  align-items: center;
  padding: 0 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 720;
}
.process-gantt-axis { display: grid; border-bottom: 1px solid var(--line); }
.process-gantt-axis-days,
.process-gantt-axis-hours { display: flex; }
.process-gantt-day { box-sizing: border-box; border-right: 1px solid var(--line); }
.process-gantt-day-label {
  position: sticky;
  left: 118px;
  display: block;
  width: fit-content;
  padding: 4px 6px 2px;
  font-size: 10px;
  font-weight: 740;
  white-space: nowrap;
}
.process-gantt-tick {
  position: relative;
  box-sizing: border-box;
  padding: 1px 0 3px 3px;
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.process-gantt-tick.midnight { border-left: 1px solid var(--line); font-weight: 760; }
.process-gantt-row { display: flex; box-sizing: border-box; border-bottom: 1px solid var(--line-soft); }
.process-gantt-trade-grip {
  width: 8px;
  height: 12px;
  flex: 0 0 auto;
  margin-right: 6px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 4px 4px;
  cursor: grab;
}
.process-gantt-trade[data-process-trade-cell] { cursor: grab; touch-action: none; }
.process-gantt-trade.dragging { opacity: 0.45; }
.process-gantt-trade.drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
.process-gantt-trade {
  position: sticky;
  isolation: isolate;
  z-index: 4;
  left: 0;
  display: flex;
  width: 118px;
  min-width: 118px;
  align-items: center;
  padding: 0 9px;
  border-right: 1px solid var(--line);
  background: var(--paper);
  font-size: 10.5px;
  font-weight: 700;
}
.process-gantt-trade-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-gantt-trade button {
  padding: 3px 7px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9.5px;
}
.process-gantt-trade input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.process-gantt-lane { position: relative; cursor: crosshair; }
.process-gantt-band { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--line); }
.process-gantt-grid {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px var(--process-hour-px, 76px)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--process-hour-px, 76px) / 2), #eef0f3 calc(var(--process-hour-px, 76px) / 2) calc(var(--process-hour-px, 76px) / 2 + 1px), transparent calc(var(--process-hour-px, 76px) / 2 + 1px) var(--process-hour-px, 76px));
  pointer-events: none;
}
.process-gantt-now {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d9483c;
  pointer-events: none;
}
.process-gantt-bar {
  position: absolute;
  z-index: 2;
  top: 4px;
  bottom: 4px;
  display: flex;
  overflow: hidden;
  border-left: 3px solid var(--calendar-event-accent, #5f6873);
  border-radius: 3px;
  background: var(--calendar-event-soft, #f1f3f5);
}
.process-gantt-bar-body {
  display: grid;
  min-width: 0;
  width: 100%;
  height: 100%;
  align-content: center;
  gap: 1px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  text-align: left;
}
button.process-gantt-bar-body { cursor: grab; touch-action: none; }
.process-item-dragging button.process-gantt-bar-body { cursor: grabbing; }
button.process-gantt-bar-body:hover { background: color-mix(in srgb, var(--calendar-event-color) 22%, transparent); }
.process-gantt-bar b { overflow: hidden; color: var(--calendar-event-accent, #333); font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.process-gantt-bar time {
  color: var(--calendar-event-accent, #5f6873);
  font-size: 8.5px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.process-gantt-bar small { overflow: hidden; color: #555; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.process-gantt-handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  touch-action: none;
}
.process-gantt-handle.start { left: 0; }
.process-gantt-handle.end { right: 0; }
.process-gantt-handle:hover { background: color-mix(in srgb, var(--calendar-event-accent) 35%, transparent); }
.process-gantt-draft {
  z-index: 4;
  border-left-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.process-gantt-draft input {
  width: 100%;
  min-width: 0;
  height: 20px;
  padding: 0 3px;
  border: 0;
  border-bottom: 1px solid var(--accent);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
.process-gantt-draft input:focus { outline: none; }
.process-gantt-draft-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; padding-right: 4px; }
.process-gantt-draft-actions button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  font-size: 10px;
}
.process-gantt-row.process-gantt-new .process-gantt-lane,
.process-gantt-column.process-gantt-new .process-gantt-lane { cursor: cell; }

/* 세로 모드: 공종이 열, 시간이 아래로 흐른다. 출력 용지에 맞추기 좋다. */
.process-gantt-scroll.vertical { overscroll-behavior-y: contain; }
.process-gantt.vertical { position: relative; display: block; min-width: max-content; }
.process-gantt.vertical .process-gantt-head { align-items: stretch; border-bottom: 1px solid var(--line); }
.process-gantt.vertical .process-gantt-corner {
  width: 96px;
  min-width: 96px;
  border-bottom: 0;
  justify-content: center;
}
.process-gantt-trade-head { position: relative; box-sizing: border-box; flex: 0 0 auto; }
.process-gantt.vertical .process-gantt-trade {
  position: static;
  width: 100%;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  background: #f7f8fa;
}
.process-gantt-body { display: flex; align-items: stretch; }
.process-gantt-axis.vertical {
  position: sticky;
  z-index: 4;
  left: 0;
  display: flex;
  width: 96px;
  min-width: 96px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--paper);
}
.process-gantt-axis.vertical .process-gantt-tick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px;
  border-top: 1px solid var(--line-soft);
  border-left: 0;
}
.process-gantt-axis.vertical .process-gantt-tick.midnight,
.process-gantt-axis.vertical .process-gantt-tick.day-start { border-top: 1px solid var(--line); }
.process-gantt-axis.vertical .process-gantt-tick b { margin-right: 4px; font-size: 9.5px; font-weight: 760; color: var(--ink); }
.process-gantt-column { display: flex; box-sizing: border-box; flex: 0 0 auto; border-right: 1px solid var(--line); }
.process-gantt-lane.vertical { width: 100%; }
.process-gantt-lane.vertical .process-gantt-band { top: auto; right: 0; bottom: auto; left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
.process-gantt-lane.vertical .process-gantt-grid {
  background-image:
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px var(--process-hour-px, 76px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--process-hour-px, 76px) / 2), #eef0f3 calc(var(--process-hour-px, 76px) / 2) calc(var(--process-hour-px, 76px) / 2 + 1px), transparent calc(var(--process-hour-px, 76px) / 2 + 1px) var(--process-hour-px, 76px));
}
.process-gantt-lane.vertical .process-gantt-now { top: auto; right: 0; bottom: auto; left: 0; width: auto; height: 2px; }
.process-gantt-lane.vertical .process-gantt-bar {
  top: auto;
  right: 4px;
  bottom: auto;
  left: 4px;
  flex-direction: column;
  border-top: 3px solid var(--calendar-event-accent, #5f6873);
  border-left: 0;
}
.process-gantt-lane.vertical .process-gantt-bar-body { align-content: start; padding: 4px 6px; }
.process-gantt-lane.vertical .process-gantt-handle {
  top: auto;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 8px;
  cursor: ns-resize;
}
.process-gantt-lane.vertical .process-gantt-handle.start { top: 0; }
.process-gantt-lane.vertical .process-gantt-handle.end { bottom: 0; }
.process-gantt-lane.vertical .process-gantt-draft { box-shadow: 0 0 0 2px var(--accent); }
.process-gantt-lane.vertical .process-gantt-draft-actions { padding: 0 0 4px 6px; }

.process-empty-state {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.process-empty-state strong { color: var(--ink); font-size: 13px; }
.process-empty-state span { max-width: 390px; font-size: 10.5px; line-height: 1.55; }
.process-empty-state button { margin-top: 5px; }
.process-task-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #f7f7f7;
}
.process-task-context strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.process-task-context span { flex: 0 0 auto; color: var(--muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.process-time-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.process-time-editor fieldset { display: grid; min-width: 0; grid-template-columns: 92px minmax(0, 1fr); gap: 5px; margin: 0; padding: 0; border: 0; }
.process-time-editor legend { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 680; }
.process-time-editor select,
.process-time-editor input { min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 11px; }
.process-color-options { max-width: 100%; }

@media (max-width: 520px) {
  .calendar-toolbar { flex-wrap: wrap; gap: 4px; }
  .calendar-toolbar-leading { width: 100%; justify-content: space-between; gap: 4px; }
  .calendar-view-tabs button { padding-inline: 7px; font-size: 9.5px; }
  .calendar-month-control { gap: 0; }
  /* 좁은 화면에서는 연도까지 읽을 자리가 없다. 달만 남긴다. */
  .calendar-month-control h2 { min-width: 52px; font-size: 15px; }
  .calendar-month-control h2 .calendar-month-year { display: none; }
  .calendar-icon-button { width: 27px; min-height: 29px; }
  .calendar-toolbar-actions { gap: 3px; }
  .calendar-toolbar-actions .primary-button,
  .calendar-toolbar-actions .secondary-button { padding: 0 7px; font-size: 10.5px; }
  .calendar-cell { min-height: 86px; padding: 2px; }
  .calendar-day-number { width: 22px; height: 22px; font-size: 10px; }
  .calendar-grid { --calendar-process-step: 10px; --calendar-process-top: 24px; }
  .calendar-event-segment { height: 18px; margin-top: 24px; }
  .calendar-event-segment.calendar-lane-1 { margin-top: 43px; }
  .calendar-event-segment.calendar-lane-2 { margin-top: 62px; }
  .calendar-event-segment.calendar-lane-3 { margin-top: 81px; }
  .calendar-event-body { padding-right: 2px; padding-left: 2px; }
  .calendar-event-body { gap: 2px; }
  .calendar-event-body time { font-size: 7px; }
  .calendar-event-body b { font-size: 8.5px; }
  .calendar-event-handle { width: 8px; }
  .calendar-event-segment.starts-here .calendar-event-body { padding-left: 8px; }
  .calendar-event-segment.ends-here .calendar-event-body { padding-right: 8px; }
  .calendar-agenda-item { gap: 7px; padding: 8px 7px; }
  .calendar-invite-options { grid-template-columns: 1fr; }
  .calendar-invite-option:nth-child(even) { border-left: 0; }
  .process-toolbar-actions { width: 100%; justify-content: flex-end; }
  .process-day-control h2 { min-width: 114px; font-size: 12px; }
  .process-day-sheet { overflow: visible; }
  .process-sheet-header { min-height: 108px; align-items: stretch; flex-direction: column; gap: 7px; padding: 8px; }
  .process-project-picker { min-width: 0; width: 100%; }
  .process-table-scroll { max-height: calc(100vh - 260px); min-height: 360px; }
  .process-timetable thead th,
  .process-timetable td { width: 132px; min-width: 132px; }
  .process-time-editor { grid-template-columns: 1fr; }
  .process-color-options { width: 100%; grid-template-columns: repeat(6, 24px); justify-content: space-between; gap: 7px; }
}

/* Vendor workspace */
.vendor-page { display: grid; gap: 6px; }

.vendor-head {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vendor-head > span {
  color: var(--muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.vendor-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px);
  gap: 4px;
}

.vendor-toolbar input,
.vendor-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11.5px;
  outline: 0;
}

.vendor-toolbar input:focus,
.vendor-toolbar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.vendor-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.vendor-table-head,
.vendor-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(150px, 1.05fr) minmax(120px, 0.85fr) minmax(150px, 1fr) minmax(90px, 0.65fr) minmax(150px, 0.95fr) 52px;
  align-items: center;
  gap: 8px;
}

.vendor-table-head {
  min-height: 32px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line);
  background: #f7f7f7;
  color: var(--muted);
  font-size: 10px;
  font-weight: 690;
}

.vendor-row {
  min-height: 48px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.vendor-row:last-child { border-bottom: 0; }
.vendor-row > * { min-width: 0; }
.vendor-row strong,
.vendor-row span,
.vendor-row a { overflow: hidden; text-overflow: ellipsis; }
.vendor-row strong { display: block; font-size: 12px; white-space: nowrap; }
.vendor-row span { color: #444; }
.vendor-identity { display: grid; gap: 1px; }
.vendor-identity small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.vendor-row .vendor-contact { display: grid; gap: 2px; }
.vendor-row .vendor-contact small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.vendor-row .vendor-account { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.vendor-row .vendor-account small { color: var(--muted); font-size: 9.5px; }
.vendor-trade-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.vendor-trade-stats > span { min-width: 0; }
.vendor-trade-stats small { display: block; color: var(--muted); font-size: 8.5px; }
.vendor-trade-stats b { display: block; overflow: hidden; margin-top: 1px; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.vendor-row .secondary-button { min-height: 28px; padding: 0 8px; font-size: 10px; }
.vendor-mobile-details { display: none; }

.vendor-dialog { width: min(94vw, 720px); }
.vendor-dialog form { max-height: min(86vh, 760px); overflow: auto; }
.vendor-form-section { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.vendor-form-section:first-of-type { padding-top: 0; border-top: 0; }
.vendor-form-section h3 { margin: 0 0 7px; color: var(--muted); font-size: 10.5px; font-weight: 720; }
.vendor-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
.vendor-form-grid .span-2 { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .vendor-table { display: grid; gap: 6px; border: 0; background: transparent; overflow: visible; }
  .vendor-table-head { display: none; }
  .vendor-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity action"
      "status stats"
      "details details";
    gap: 4px 7px;
    min-height: 0;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
  }
  .vendor-row > .vendor-identity { grid-area: identity; }
  .vendor-row > .desktop-vendor-detail { display: none; }
  .vendor-row > .vendor-status { grid-area: status; align-self: center; color: var(--muted); font-size: 9.5px; }
  .vendor-row > .vendor-trade-stats { grid-area: stats; justify-self: end; }
  .vendor-row > button { grid-area: action; }
  .vendor-mobile-details { display: block; grid-area: details; padding-top: 3px; border-top: 1px solid var(--line-soft); }
  .vendor-mobile-details summary { min-height: 21px; color: var(--muted); font-size: 9.5px; line-height: 21px; cursor: pointer; }
  .vendor-mobile-details dl { display: grid; gap: 2px; margin: 1px 0 0; }
  .vendor-mobile-details dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 5px; font-size: 9.5px; }
  .vendor-mobile-details dt { color: var(--muted); }
  .vendor-mobile-details dd { overflow: hidden; margin: 0; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
  .vendor-form-grid { grid-template-columns: 1fr; }
  .vendor-form-grid .span-2 { grid-column: auto; }
}

@media (min-width: 768px) {
  :root {
    --shell-edge: 0px;
    --global-nav-width: 72px;
  }

  .app-shell {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: var(--global-nav-width) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: 0 6px 7px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
  }

  .sidebar-brand {
    display: flex;
    height: auto;
    min-height: 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line-soft);
  }

  .sidebar-brand .brand-symbol { width: 36px; height: 36px; }
  /* 좁은 사이드바(아이콘만)에서는 로고 아래 한 줄로 선다. */
  .sidebar-brand .history-nav { display: inline-flex; flex-basis: 100%; justify-content: center; padding-bottom: 5px; }
  .global-nav { display: grid; gap: 1px; margin-top: 6px; }
  .global-nav button {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 680;
    text-align: left;
  }
  .global-nav button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 760; }
  .global-nav button span { display: none; }

  .sidebar-user {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 5px;
    border: 0;
    border-top: 1px solid var(--line-soft);
    background: transparent;
  }
  .sidebar-user-copy { display: none; min-width: 0; text-align: left; }
  .sidebar-user-copy strong,
  .sidebar-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-user-copy strong { font-size: 11.5px; }
  .sidebar-user-copy small { color: var(--muted); font-size: 9px; }

  .mobile-top-nav,
  .mobile-app-menu { display: none !important; }
  .app-workspace { display: grid; min-width: 0; grid-template-rows: auto 0 minmax(0, 1fr); padding: 0 10px 56px; }
  .app-workspace.payment-workspace { grid-template-rows: auto 40px minmax(0, 1fr); }
  .app-topbar { display: none; }

  /* 작업 탭 — 넓은 화면의 맨 위 줄. 탭마다 화면의 기억을 따로 들고 즉시 오간다. */
  /* 접는 규칙(.work-tabs { display:none })이 파일 뒤쪽에 있어 여기서는 선택자를 한 단 높여 이긴다. */
  .app-workspace > .work-tabs { grid-area: 1 / 1; display: flex; align-items: flex-end; gap: 2px; min-height: 30px; margin: 0 -10px 4px; padding: 4px 10px 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
  .work-tabs::-webkit-scrollbar { display: none; }
  .work-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-width: 0; height: 26px; padding: 0 6px 0 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--muted); font-size: 11.5px; white-space: nowrap; cursor: pointer; }
  .work-tab span { overflow: hidden; text-overflow: ellipsis; }
  .work-tab:hover { color: var(--ink); }
  .work-tab.active { margin-bottom: -1px; border-color: var(--line-soft); background: var(--paper); color: var(--ink); }
  .work-tab b { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 4px; font-weight: 400; color: var(--muted); }
  .work-tab b:hover { background: var(--accent-soft); color: var(--accent-strong); }
  .work-tabs-add { width: 26px; height: 26px; flex: 0 0 auto; margin-bottom: 1px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
  .work-tabs-add:hover { background: var(--accent-soft); color: var(--accent-strong); }

  .payment-navigation { z-index: 21; display: flex; width: fit-content; max-width: 100%; height: 40px; grid-area: 2 / 1; align-items: center; margin: 0; }
  .main-tabs { overflow: hidden; grid-template-columns: repeat(3, 112px); gap: 0; padding: 2px; border: 1px solid var(--line-soft); border-radius: 4px; background: #f7f7f7; }
  .main-tabs button { min-height: 28px; padding: 0 9px; border: 0; border-radius: 3px; background: transparent; font-size: 11.5px; }
  .main-tabs button.active { border-color: transparent; background: var(--accent); color: #fff; }
  .payment-content { min-width: 0; grid-area: 3 / 1; padding-top: 5px; }
  .sub-tabs {
    right: auto;
    width: min(480px, calc(100vw - var(--global-nav-width) - 24px));
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
  #payment-entry-form { width: 100%; }
  .entry-form-list { gap: 0; }
  .entry-form-card { padding: 7px 2px 8px; border: 0; border-radius: 0; background: transparent; }
  .entry-form-card + .entry-form-card { border-top: 1px solid var(--line); }
  .entry-form-head { min-height: 22px; margin: 0 0 5px; }
  .entry-form-head strong { font-size: 12.5px; }
  .entry-form-actions button { min-height: 22px; }
  .form-grid { gap: 5px 6px; }
  .field { font-size: 10.5px; }
  .field > span:first-child { margin-bottom: 2px; }
  .field input,
  .field select,
  .field textarea { min-height: 32px; padding: 4px 7px; border-radius: 3px; font-size: 12px; }
  .note-field { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
  .note-field summary { min-height: 27px; padding: 6px 2px; }
  .primary-button,
  .secondary-button,
  .quiet-button { min-height: 29px; padding: 0 9px; border-radius: 3px; }
  .action-button { min-height: 26px; border-radius: 3px; }
  .file-browser { gap: 5px; }
  .file-browser-head { top: 0; min-height: 32px; }
  .file-breadcrumbs button { min-height: 27px; padding: 0 4px; font-size: 10.5px; }
  .file-actions button { min-height: 27px; }
  .file-search { min-height: 31px; padding: 4px 7px; border-radius: 3px; font-size: 11px; }
  .file-table-head,
  .file-row { grid-template-columns: minmax(360px, 1fr) 96px 112px; gap: 10px; }
  .file-table { border-right: 0; border-left: 0; border-radius: 0; }
  .file-table-head { min-height: 30px; padding: 0 8px; font-size: 9.5px; }
  .file-row { min-height: 40px; padding: 3px 8px; }
  .file-entry-copy strong { font-size: 11.5px; }
  .file-entry-copy small { font-size: 9.5px; }
  .file-meta { font-size: 10px; }

  .form-toolbar,
  .bulk-bar {
    right: 10px;
    bottom: 0;
    left: calc(var(--global-nav-width) + 10px);
    padding: 4px 0 5px;
  }
  .form-toolbar {
    width: auto;
  }
  .toast { bottom: 54px; }
  .account-menu { top: auto; right: auto; bottom: 48px; left: 6px; width: calc(var(--global-nav-width) - 12px); }
  .calendar-page { padding-top: 3px; }
  .calendar-toolbar { min-height: 34px; }
  .calendar-cell { min-height: 96px; padding: 4px; }
  .calendar-grid { --calendar-process-step: 13px; --calendar-process-top: 29px; }
  .calendar-event-segment { height: 21px; margin-top: 29px; }
  .calendar-event-segment.calendar-lane-1 { margin-top: 51px; }
  .calendar-event-segment.calendar-lane-2 { margin-top: 73px; }
  .calendar-event-segment.calendar-lane-3 { margin-top: 95px; }
  .calendar-event-body time { font-size: 8.5px; }
  .calendar-event-body b { font-size: 10.5px; }
  .calendar-event-body small { font-size: 8px; }
  .calendar-event-handle { width: 10px; }
  .calendar-event-segment.starts-here .calendar-event-body { padding-left: 10px; }
  .calendar-event-segment.ends-here .calendar-event-body { padding-right: 10px; }
}

@media (min-width: 768px) and (hover: hover) {
  .global-nav button:hover,
  .file-row:hover { background: #f7f7f7; }
  .calendar-icon-button:hover,
  .calendar-day-number:hover { background: var(--accent-soft); color: var(--ink); }
  .calendar-cell.today .calendar-day-number:hover { background: var(--accent-strong); color: #fff; }
  .calendar-event-segment:hover { filter: brightness(0.96); }
  .main-tabs button:hover:not(.active) { border-color: transparent; background: var(--accent-soft); color: var(--ink); }
  .sub-tabs button:hover { border-color: #bdbdbd; color: var(--ink); }
}

@media (min-width: 1100px) {
  .app-workspace.calendar-workspace { height: 100vh; padding-bottom: 7px; overflow: hidden; }
  .calendar-workspace .payment-content { height: 100%; min-height: 0; padding: 0; }
  .calendar-page { height: 100%; grid-template-rows: 40px minmax(0, 1fr); gap: 4px; padding: 0; }
  .calendar-layout { height: 100%; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
  .calendar-month { display: grid; height: 100%; min-height: 0; grid-template-rows: 25px minmax(0, 1fr); }
  .calendar-grid { height: 100%; min-height: 0; }
  .calendar-cell { min-height: 0; }
  .calendar-sidebar { display: flex; height: 100%; min-height: 0; flex-direction: column; }
  .calendar-agenda[open] { height: 300px; min-height: 300px; max-height: 300px; }
  .calendar-agenda:not([open]) { flex: 0 0 auto; }
  .calendar-all-schedules { flex: 0 0 auto; }
  .calendar-all-schedules[open] { display: grid; min-height: 0; flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  :root { --global-nav-width: 188px; }
  .app-sidebar { padding: 0 6px 7px; }
  .sidebar-brand { height: 40px; flex-wrap: nowrap; justify-content: flex-start; padding: 0 10px; }
  /* 넓은 사이드바에서는 로고 옆, 오른쪽 끝에 붙는다. */
  .sidebar-brand .history-nav { flex-basis: auto; margin-left: auto; padding-bottom: 0; }
  .sidebar-brand .brand-symbol { width: 36px; height: 36px; }
  .global-nav button { justify-content: flex-start; }
  .global-nav button span { display: inline; }
  .sidebar-user { justify-content: flex-start; padding: 6px; }
  .sidebar-user-copy { display: block; }
  .payment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .desktop-span-4 { grid-column: span 4; }
  .form-grid .desktop-span-2,
  .form-grid .invoice-field.desktop-span-2,
  .form-grid .amount-field.desktop-span-2 { grid-column: span 2; }
}

/* 인쇄: 공정표만 종이에 남기고 화면용 장치는 모두 걷어낸다. */
.process-print-title { display: none; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html,
  body,
  .app-shell,
  .app-workspace,
  .payment-content,
  .calendar-page,
  .process-detail-page {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .app-sidebar,
  .app-topbar,
  .mobile-top-nav,
  .mobile-app-menu,
  .account-menu,
  .payment-navigation,
  .bulk-bar,
  .calendar-sidebar,
  .process-toolbar,
  .toast,
  dialog { display: none !important; }

  .process-print-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
  }
  .process-print-title strong { font-size: 13pt; }
  .process-print-title span { color: #444; font-size: 9pt; }

  .process-gantt-scroll {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .process-gantt,
  .process-gantt.vertical { min-width: 0 !important; }
  .process-gantt-head { position: static !important; }
  .process-gantt-corner,
  .process-gantt-trade,
  .process-gantt-axis.vertical { position: static !important; }
  .process-gantt-day-label { position: static !important; left: auto !important; }

  /* 종이에서는 배경 색을 쓰지 않는다. 색은 막대 테두리와 글자로만 남긴다. */
  .process-gantt-band { background: none !important; }
  .process-gantt-now { display: none !important; }
  /* 배경 음영은 빼되 작업 카드 색은 종이에도 그대로 남긴다. */
  .process-gantt-bar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .process-print-guides,
  .process-gantt-handle,
  .process-resize-handle,
  .process-gantt-trade-grip,
  .process-gantt-new { display: none !important; }

  .process-gantt-row,
  .process-gantt-column,
  .process-gantt-bar { break-inside: avoid; }
}

/* 인쇄 쪽 경계를 화면에 겹쳐 보여 준다. */
.process-print-guides {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.process-print-guide { position: absolute; }
.process-print-guide.vertical { top: 0; bottom: 0; width: 0; border-left: 1px dashed #d9483c; }
.process-print-guide.horizontal { right: 0; left: 0; height: 0; border-top: 1px dashed #d9483c; }
.process-print-page {
  position: absolute;
  margin: 3px 0 0 3px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, #d9483c 88%, transparent);
  color: #fff;
  font-size: 8.5px;
  font-weight: 780;
}

/* 프로젝트 관리: 모든 탭의 기록을 프로젝트 하나로 모아 본다. */
.hub-page { display: grid; min-width: 0; min-height: 0; gap: 8px; align-content: start; }
.hub-toolbar { flex-wrap: wrap; gap: 8px; }
.hub-filter-tabs { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.hub-filter-tabs button {
  min-height: 29px;
  padding: 0 11px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.hub-filter-tabs button:last-child { border-right: 0; }
.hub-filter-tabs button.active { background: var(--accent); color: #fff; }
.hub-search {
  width: min(260px, 46vw);
  height: 31px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11.5px;
}

.hub-list { display: grid; min-height: 0; margin: 0; padding: 0; gap: 6px; align-content: start; grid-auto-rows: min-content; list-style: none; overflow-y: auto; }
.hub-card {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
}
.hub-card:hover { border-color: var(--accent); background: #f6f9ff; }
.hub-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hub-card-head { display: flex; min-width: 0; align-items: center; gap: 7px; }
.hub-card-head strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.hub-card-meta { color: var(--muted); font-size: 10px; }
.hub-card-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.hub-count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef1f5;
}
.hub-count small { color: var(--muted); font-size: 9px; }
.hub-count b { font-size: 10px; font-variant-numeric: tabular-nums; }
.hub-count-empty { color: var(--muted); font-size: 9.5px; }
.hub-card-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.hub-card-amount b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hub-card-amount small { color: var(--muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }

.hub-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eceef1;
  color: #5f6873;
  font-size: 9px;
  font-weight: 760;
}
.hub-chip.running { background: #dff0e2; color: #2b6b39; }
.hub-chip.pending { background: #fff1d6; color: #8a5b00; }
.hub-chip.done { background: #e6eefb; color: #2f5488; }
.hub-chip.empty { background: #f3f4f6; color: #9aa1a9; }

.hub-detail-heading { display: grid; min-width: 0; gap: 1px; }
.hub-detail-heading h2 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.hub-detail-heading p {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}

.hub-sections { display: grid; min-height: 0; gap: 8px; align-content: start; grid-auto-rows: min-content; overflow-y: auto; }
.hub-section { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.hub-section > header {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line-soft);
  background: #f7f8fa;
}
.hub-section > header h3 { margin: 0; font-size: 12px; }
.hub-section > header small { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.hub-section-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 10.5px; }

.hub-stat-row,
.hub-amount-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 11px; }
.hub-amount-row { border-top: 1px solid var(--line-soft); }
.hub-section > .hub-amount-row:first-child { border-top: 0; }
.hub-stat,
.hub-amount-row span {
  display: grid;
  min-width: 74px;
  gap: 1px;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
}
.hub-stat small,
.hub-amount-row small { color: var(--muted); font-size: 9px; }
.hub-stat b,
.hub-amount-row b { font-size: 12px; font-variant-numeric: tabular-nums; }

.hub-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.hub-rows li + li { border-top: 1px solid var(--line-soft); }
.hub-rows button,
.hub-row-static {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  text-align: left;
}
.hub-rows button { cursor: pointer; }
.hub-rows button:hover { background: #f4f7fb; }
.hub-row-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 1px; }
.hub-row-copy strong { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hub-row-copy small { color: var(--muted); font-size: 9.5px; }
.hub-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--calendar-event-color, #c2c8d0); }

/* 완료보고서 작성 */
.report-page {
  min-height: 0;
  align-content: stretch;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.report-tabs { width: fit-content; align-self: start; height: fit-content; }
.report-progress {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f5;
  font-size: 11px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}
.report-body { min-height: 0; display: grid; gap: 8px; align-content: start; grid-auto-rows: min-content; overflow-y: auto; }
.report-group { padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.report-group h4 { margin: 0 0 8px; font-size: 11.5px; }
.report-note { margin: 0 0 9px; color: var(--muted); font-size: 10.5px; }
.report-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.report-field { display: grid; min-width: 0; gap: 3px; }
.report-field.wide { grid-column: 1 / -1; }
.report-field > span { color: var(--muted); font-size: 9.5px; font-weight: 700; }
.report-field input,
.report-field select,
.report-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-size: 11.5px;
}
.report-field textarea { height: 62px; padding: 6px 8px; resize: vertical; }
.report-field input:focus,
.report-field select:focus,
.report-field textarea:focus { border-color: var(--accent); outline: none; }
.report-readonly {
  display: flex;
  height: 30px;
  align-items: center;
  padding: 0 8px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.report-work { display: grid; gap: 7px; margin-bottom: 9px; }
.report-work-row { display: flex; align-items: start; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 5px; }
.report-work-index {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 12px;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 760;
}
.report-work-fields { display: grid; min-width: 0; flex: 1 1 auto; gap: 7px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.report-work-fields .span-2 { grid-column: span 2; }
.report-work-fields .span-3 { grid-column: span 3; }
.report-work-fields .span-4 { grid-column: span 4; }
.report-work-remove { grid-column: span 2; height: 30px; }

@media (max-width: 860px) {
  .report-work-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .report-work-fields .span-3,
  .report-work-fields .span-4 { grid-column: span 6; }
  .report-work-fields .span-2 { grid-column: span 3; }
  .report-work-remove { grid-column: span 6; }
}

/* 달력: 쉬는 날, 좁은 화면 도구, 날짜 시트 */
.calendar-day-number.rest-day { color: #d9483c; }
.calendar-cell.today .calendar-day-number.rest-day { color: #fff; }
.calendar-holiday-name {
  position: absolute;
  top: 6px;
  left: 28px;
  overflow: hidden;
  max-width: calc(100% - 32px);
  color: #d9483c;
  font-size: 8.5px;
  font-weight: 720;
  text-overflow: clip;
  white-space: nowrap;
  pointer-events: none;
}
.calendar-month-page { grid-template-rows: auto minmax(0, 1fr); }
/* 넓은 화면에서는 연월이 보기 탭 바로 옆에 붙고 버튼은 오른쪽 끝으로 밀린다. */
.calendar-month-toolbar .calendar-month-control { margin-right: auto; }
.calendar-viewport { min-width: 0; min-height: 0; overflow: hidden; }
.calendar-track {
  --calendar-track-gap: 24px;
  display: grid;
  min-height: 0;
  height: 100%;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}
/* 양옆 달을 달고 있는 트랙은 가운데 판이 보이도록 한 칸 밀어 둔다. 달 사이의 틈만큼
   더 밀어야 가운데가 정확히 맞는다. */
.calendar-track.sliding {
  column-gap: var(--calendar-track-gap);
  transform: translate3d(calc(-100% - var(--calendar-track-gap)), 0, 0);
}
.calendar-month { min-width: 0; min-height: 0; }

.calendar-sheet-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  background: rgba(17, 17, 17, 0.34);
}
.calendar-sheet {
  position: fixed;
  z-index: 61;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  max-height: min(72vh, 560px);
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 12px 12px 0 0;
  background: var(--paper);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}
.calendar-sheet > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 9px;
  border-bottom: 1px solid var(--line-soft);
}
.calendar-sheet > header h3 { margin: 0; font-size: 13.5px; }
.calendar-sheet > header small { color: var(--muted); font-size: 10px; font-weight: 700; }
.calendar-sheet > header .quiet-button { margin-left: auto; }
.calendar-sheet-list { overflow-y: auto; padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); }
.calendar-sheet-empty { margin: 0; padding: 18px 14px; color: var(--muted); font-size: 11.5px; }
.calendar-sheet-item,
.calendar-sheet-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-left: 4px solid var(--calendar-event-color, #dedede);
}
.calendar-sheet-item + .calendar-sheet-item,
.calendar-sheet-toggle + .calendar-sheet-toggle { border-top: 1px solid var(--line-soft); }
.calendar-sheet-item > button:first-child {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  padding: 11px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.calendar-sheet-toggle { padding-block: 11px; cursor: pointer; }
.calendar-sheet-toggle input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); }
.calendar-sheet-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.calendar-sheet-copy strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-sheet-copy small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

.calendar-compact-only { display: none; }
@media (max-width: 767px) {
  .calendar-compact-only { display: inline-flex; }
  .calendar-wide-only { display: none !important; }
  .calendar-toolbar-leading { width: auto; justify-content: flex-start; gap: 6px; }
  /* 좁은 화면은 한 줄: 왼쪽 보기 탭, 가운데 연월, 오른쪽 버튼 셋. */
  .calendar-month-toolbar { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
  .calendar-month-toolbar .calendar-month-control { margin-right: 0; }
  .calendar-month-toolbar .calendar-toolbar-actions { gap: 2px; }
  .calendar-viewport { touch-action: pan-y; }

  /* 달력만 화면 높이를 물려받아 6주가 한 장에 들어오게 한다.
     다른 화면은 지금처럼 내용만큼 늘어나고 페이지가 스크롤된다. */
  /* 최소가 아니라 상한이어야 한다. 최소로 두면 안이 넘칠 때 화면 밖으로 자란다. */
  .app-shell { display: flex; height: 100dvh; max-height: 100dvh; flex-direction: column; padding-bottom: 0; }
  .app-workspace.calendar-workspace { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
  .calendar-workspace .payment-content { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding-bottom: 0; }
  .calendar-workspace .calendar-month-page { min-height: 0; flex: 1 1 auto; }
  .calendar-workspace .calendar-layout { min-height: 0; }
  .calendar-workspace .calendar-viewport { min-height: 0; flex: 1 1 auto; }
  .calendar-workspace .calendar-month { display: flex; min-height: 0; flex-direction: column; }
  .calendar-workspace .calendar-grid { min-height: 0; flex: 1 1 auto; }
  /* 칸은 남는 높이를 나눠 갖는다. 담을 줄 수는 자바스크립트가 칸 높이에 맞춰 정한다. */
  .calendar-cell { min-height: 0; }

  /* 좁은 화면에서는 색 띠와 공정표 아이콘을 빼고 글자를 키운다. 시각과 초대 인원도
     빼서 좁은 칸을 제목에 다 내준다 — 자세한 것은 날짜를 눌러 시트에서 본다. */
  .calendar-entry-tag { display: none; }
  .calendar-event-body time,
  .calendar-event-body small { display: none; }

  /* 말줄임표를 붙이면 그 자리에 글자 한 자가 더 들어갈 수 있다.
     좁은 칸에서는 두 줄까지 흘려 두고 넘치는 만큼만 그대로 잘라 낸다. */
  .calendar-event-body { align-items: flex-start; gap: 2px; padding: 3px 2px 0; }
  .calendar-event-segment.starts-here .calendar-event-body { padding-left: 2px; }
  .calendar-event-segment.ends-here .calendar-event-body { padding-right: 2px; }
  .calendar-event-segment.starts-here { margin-left: 2px; }
  .calendar-event-segment.ends-here { margin-right: 2px; }
  .calendar-event-body b {
    overflow: hidden;
    max-height: 24px;
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .calendar-event-segment { height: 26px; margin-top: 24px; }
  .calendar-event-segment.calendar-lane-1 { margin-top: 52px; }
  .calendar-event-segment.calendar-lane-2 { margin-top: 80px; }
  .calendar-weekdays { min-height: 0; }
}

/* 일정 창은 좁은 화면에서 스크롤 없이 한 장에 들어와야 한다. */
@media (max-width: 767px) {
  .calendar-dialog { width: min(96vw, 420px); }
  .calendar-dialog form { padding: 10px; }
  .calendar-dialog header { margin-bottom: 8px; }

  /* 날짜와 시간은 한 줄에 둘씩 세운다. 세로로 쌓으면 그것만 네 줄이 된다. */
  .calendar-dialog .dialog-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .calendar-dialog .calendar-date-fields,
  .calendar-dialog .calendar-time-fields,
  .calendar-dialog .calendar-note-field { margin-top: 6px; }

  .calendar-dialog .calendar-color-field { margin-top: 6px; }
  .calendar-dialog .calendar-color-options { width: 100%; grid-template-columns: repeat(9, 1fr); gap: 6px; justify-items: center; }
  .calendar-dialog .calendar-color-options label { width: 20px; height: 20px; }
  .calendar-dialog .calendar-color-swatch { width: 18px; height: 18px; }

  .calendar-dialog .calendar-invite-field { margin-top: 6px; }
  .calendar-dialog .calendar-invite-options { max-height: 76px; overflow-y: auto; }
  .calendar-dialog .calendar-invite-empty { padding: 9px 8px; }
  .calendar-dialog .calendar-location-row .quiet-button { min-height: 30px; padding: 0 8px; }
  .calendar-dialog .calendar-reminder-field { margin-top: 6px; }
  .calendar-dialog .calendar-color-field { margin-top: 6px; }
  .calendar-dialog .calendar-color-options { gap: 6px; }
  .calendar-dialog .calendar-note-field textarea { height: 40px; }
  .calendar-dialog .dialog-help { margin: 6px 0 0; font-size: 10px; }
  .calendar-dialog footer { margin-top: 8px; }
}

/* 일정 창의 장소·알림·초대 */
.calendar-location-row { display: flex; min-width: 0; gap: 5px; }
.calendar-location-row .lookup-combobox { min-width: 0; flex: 1 1 auto; }
.calendar-location-row input { width: 100%; min-width: 0; }
/* 고른 장소의 주소는 이름 아래 한 줄로만 남는다. */
.calendar-location-detail {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-location-detail[hidden] { display: none; }
.calendar-location-row .quiet-button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; }
.calendar-reminder-field select { width: 100%; }
.calendar-invite-field legend { display: flex; align-items: baseline; gap: 6px; }
.calendar-invite-field legend small { color: var(--muted); font-size: 9.5px; font-weight: 640; }
#calendar-invite-search { width: 100%; margin-bottom: 5px; }
#calendar-invite-search[hidden] { display: none; }
#calendar-reminder-help button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: inherit;
  font-weight: 720;
  text-decoration: underline;
}

/* 날짜 선택기: 해·달·일을 굴려 고른다. 가운데 한 줄이 고른 값이다. */
.wheel-dialog form { width: min(320px, 92vw); }
/* 고른 날짜가 이 창의 주인공이므로 가운데에 둔다. 닫기 단추가 자리를 밀지 않도록
   양옆에 같은 폭을 준다. */
.wheel-dialog header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  margin-bottom: 6px;
}
.wheel-dialog header h2 {
  grid-column: 2;
  font-size: 16px;
  font-weight: 780;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wheel-dialog header button { grid-column: 3; justify-self: end; }
/* 테두리 없는 두 칸을 가는 선 하나로 가른다. 휴대폰 날짜 선택기와 같은 마무리다. */
/* 칸 수는 「비우기」가 있느냐에 따라 둘이거나 셋이다. 사이는 가는 선으로 가른다. */
.wheel-dialog footer {
  display: flex;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  gap: 0;
}
.wheel-dialog footer button + button { border-left: 1px solid var(--line); }
.wheel-dialog footer button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
}
.wheel-dialog footer button[hidden] { display: none; }
.date-wheel {
  position: relative;
  display: grid;
  height: 220px;
  margin: 6px 0 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.date-wheel-selection {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 4px;
  left: 4px;
  height: 44px;
  border-radius: 8px;
  background: #f1f1f1;
  pointer-events: none;
  transform: translateY(-50%);
}
.date-wheel-column {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 88px 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.date-wheel-column::-webkit-scrollbar { display: none; }
.date-wheel-item {
  display: grid;
  width: 100%;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c4c4c4;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
}
.date-wheel-item.active { color: var(--ink); font-size: 20px; font-weight: 800; }


/* 날짜·시간 칸은 드럼을 여는 손잡이다. 입력칸과 같은 모양이어야 칸으로 읽힌다. */
.wheel-field {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 640;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.wheel-field:hover { border-color: #bdbdbd; }
.wheel-field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); outline: none; }

/* 지도 창은 화면을 넉넉히 쓴다. 좁은 지도에서는 위치를 고르기 어렵다. */
.map-dialog { width: min(92vw, 560px); }
.map-dialog form { display: grid; width: 100%; grid-template-rows: auto minmax(0, 1fr); }
.map-dialog iframe {
  width: 100%;
  height: min(560px, 72vh);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
@media (max-width: 767px) {
  .map-dialog iframe { height: min(520px, 68vh); }
}

/* 견적서 ------------------------------------------------------------------------
   구글 시트로 쓰던 네 장(표지·갑지·을지·뒷페이지)을 그대로 옮긴 화면이다. 종이에
   나갈 문서라 화면에서도 종이처럼 보여야 고칠 곳이 눈에 띈다. */
.quote-page { display: grid; min-width: 0; min-height: 0; gap: 9px; align-content: start; }
/* 격자 칸은 기본이 min-width:auto라 넓은 표가 들어오면 페이지째 늘어난다. 표는
   자기 상자 안에서만 굴러야 한다. */
.quote-page > *,
.quote-sheet { min-width: 0; }
.quote-toolbar { display: flex; min-height: 38px; align-items: center; gap: 8px; }
.quote-toolbar h2 { margin: 0; font-size: 15px; }
.quote-toolbar-actions { display: flex; margin-left: auto; gap: 5px; }
.quote-title-field { min-width: 0; flex: 1 1 auto; }
.quote-title-field input {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
}
.quote-list { display: grid; gap: 6px; align-content: start; }
.quote-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
.quote-card:hover { border-color: #bdbdbd; background: #fafbfc; }
.quote-card-copy { display: grid; min-width: 0; gap: 2px; }
.quote-card-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quote-card-copy small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.quote-card-amount { display: grid; margin-left: auto; gap: 2px; text-align: right; }
.quote-card-amount b { font-size: 13px; font-variant-numeric: tabular-nums; }
.quote-card-amount small { color: var(--muted); font-size: 9.5px; }
.quote-empty { padding: 28px 0; color: var(--muted); font-size: 11.5px; text-align: center; }

.quote-sheet-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: #f3f3f3; }
.quote-sheet-tabs button {
  min-height: 28px;
  flex: 1 1 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}
.quote-sheet-tabs button.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/* 종이 한 장. 인쇄하면 이 상자만 남는다. */
.quote-paper {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.quote-paper h1 { margin: 0 0 10px; font-size: 22px; letter-spacing: 0.24em; text-align: center; }
.quote-band {
  margin: 14px 0 0;
  padding: 5px 0;
  background: #d9d9d9;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-align: center;
}

.quote-cover { display: grid; min-height: 380px; place-content: center; gap: 12px; text-align: center; }
.quote-cover h1 { font-size: 46px; letter-spacing: 0.14em; }
.quote-cover-subtitle {
  width: min(420px, 100%);
  min-height: 34px;
  margin: 0 auto;
  padding: 0 8px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  text-align: center;
}
.quote-cover-date { margin: 0; color: var(--muted); font-size: 12px; }
.quote-cover-brand { margin: 24px 0 0; font-size: 12px; letter-spacing: 0.3em; }

.quote-back { display: grid; min-height: 380px; align-content: center; gap: 16px; }
.quote-back dl { display: grid; gap: 4px; margin: 0; justify-items: center; }
.quote-back dl div { display: flex; gap: 8px; font-size: 11.5px; }
.quote-back dt { min-width: 58px; color: var(--muted); font-weight: 700; }
.quote-back dd { margin: 0; }
.quote-back-brand { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.2em; text-align: center; }

.quote-summary-head { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.quote-head-fields { display: grid; gap: 4px; margin: 0; }
.quote-head-fields div { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 8px; }
.quote-head-fields dt { color: var(--ink); font-size: 11px; font-weight: 780; }
.quote-head-fields dd { display: flex; min-width: 0; align-items: center; gap: 5px; margin: 0; font-size: 11.5px; }
.quote-head-fields input { min-width: 0; flex: 1 1 auto; }
.quote-head-fields input {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--paper);
  font-size: 11.5px;
}
.quote-head-fields input:focus { border-color: var(--accent); outline: none; }
.quote-head-amount dd { display: grid; gap: 1px; }
.quote-korean { font-size: 12px; font-weight: 700; }
.quote-head-amount strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.quote-head-amount small { color: var(--muted); font-size: 10px; }
.quote-company { display: grid; gap: 2px; font-size: 10px; font-style: normal; text-align: right; }
.quote-company strong { font-size: 12px; letter-spacing: 0.14em; }
.quote-submit-note { margin: 12px 0 0; font-size: 10.5px; }
.quote-submit-note span { color: var(--muted); }

.quote-table { width: 100%; border-collapse: collapse; font-size: 10.5px; table-layout: fixed; }
.quote-table th,
.quote-table td { padding: 3px 5px; border: 1px solid #cfcfcf; overflow: hidden; }
.quote-table thead th { background: #f0f0f0; font-size: 10px; font-weight: 740; text-align: center; }
.quote-table .quote-amount { overflow: hidden; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-table input,
.quote-table select {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10.5px;
}
.quote-table input:focus,
.quote-table select:focus { outline: none; }
/* 고른 칸과 고쳐 쓰는 칸은 눈으로 갈린다 — 두 번 눌러 들어가야 커서가 보인다.
   고르기만 한 칸에서는 글자에 파란 칠이 서지 않는다. 칠이 보이면 글자를 고르는 중으로
   읽혀 칸을 고른 것과 헷갈린다. 글자는 속으로만 잡혀 있어 치면 그대로 바뀐다. */
.quote-detail-table input { caret-color: transparent; }
.quote-detail-table input::selection { background: transparent; color: inherit; }
.quote-detail-table td.is-editing input { caret-color: auto; }
.quote-detail-table td.is-editing input::selection { background: #b3d7ff; color: inherit; }
/* 커서가 든 칸은 칸 자체가 테를 두른다 — 칸 안에 상자가 하나 더 생기면 표가 아니라 서식이 된다. */
.quote-table td:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.quote-table .quote-num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-table .quote-unit { text-align: center; }

/* 견적서 탭의 도구 줄은 한 줄이다 — 검색 칸 옆에 「새 견적서」가 또렷하게 선다.
   자료 탭의 도구 줄 규칙을 그대로 쓰면 단추가 빈 윗줄 오른쪽 끝에 투명하게 붙어
   눈에 띄지 않는다. 만드는 단추는 눈에 먼저 들어와야 한다. */
.quote-list-head { grid-template-columns: minmax(0, 1fr) auto; }
.quote-list-head .file-search { grid-column: 1; grid-row: 1; }
.quote-list-head .file-actions { grid-column: 2; grid-row: 1; }
/* 업체관리의 「업체 추가」와 같은 단추다. 도구 줄의 투명 규칙이 덮어쓰지 않게
   자리를 콕 집어 되돌린다. */
/* 문서가 제 머리글을 선언하면 장 위에 선다(업체견적 리폼의 업체·공종·받은 날짜). */
.quote-doc-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.quote-doc-head label { display: grid; gap: 2px; }
.quote-doc-head span { color: var(--muted); font-size: 10px; font-weight: 700; }
.quote-doc-head input {
  min-height: 30px;
  min-width: 130px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-size: 12px;
}
/* 찾아 넣는 칸(프로젝트·업체)도 다른 칸과 같은 크기로 선다. */
.quote-doc-head .lookup-combobox { display: block; }
.quote-doc-head .lookup-combobox input { width: 100%; min-width: 160px; }
/* 파일 이름이나 기준처럼 긴 글이 드는 칸은 넓게 선다. */
.quote-doc-head label.is-wide { flex: 1 1 260px; }
.quote-doc-head label.is-wide input { width: 100%; }

/* 업체견적 리폼의 「전체 금액 요약」·「세부 견적 내용」은 묶음을 가르는 띠다. */
.quote-detail-table[data-quote-doc="vendor-reform"] .quote-row-group td { background: var(--accent-soft); }
.quote-detail-table[data-quote-doc="vendor-reform"] .quote-row-group input { letter-spacing: 0.02em; }

/* 어떤 문서를 만들지 고르는 작은 차림표. 표와 조작은 어느 쪽이든 같은 것을 쓴다. */
.quote-new-actions { position: relative; }
.quote-new-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  width: 210px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.quote-new-menu button {
  display: grid;
  min-height: 40px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
}
.quote-new-menu button:hover { background: var(--accent-soft); }
.quote-new-menu strong { font-size: 11.5px; font-weight: 720; }
.quote-new-menu small { color: var(--muted); font-size: 10px; }

.quote-list-head .file-actions > .primary-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 720;
  white-space: nowrap;
}
/* 넓은 화면에서는 업체관리와 같은 작은 치수로 선다. 같은 중단점을 뒤에 다시 적어야
   앞선 규칙에 지지 않는다. */
@media (min-width: 768px) {
  .quote-list-head .file-actions > .primary-button { min-height: 29px; padding: 0 9px; border-radius: 3px; }
}

/* 견적서 탭은 자료 탭과 같은 표다. 같은 일을 하는 화면이 서로 다르게 생기면
   사람은 같은 것을 두 번 배워야 한다. 문서 줄만 금액을 오른쪽에 세운다. */
.quote-browser .quote-row-document .file-size { font-variant-numeric: tabular-nums; font-weight: 700; }

.quote-summary-table { min-width: 520px; }
/* 갑지는 종이와 같이 본문 높이가 고정이라 간접공사비가 늘 표 아래쪽에 붙는다. */
.quote-summary-spacer td { height: 20px; }
.quote-summary-table td { height: 24px; }
/* 화면도 종이와 같은 모습이어야 고칠 곳이 보인다 — 점선, 옅은 띠, 굵기, 정렬 모두. */
.quote-table th,
.quote-table td { border-right: 1px dotted #d9d9d9; border-bottom: 1px dotted #d9d9d9; border-top: 0; border-left: 0; }
.quote-table thead th {
  border-right: 1px dotted #999999;
  border-bottom: 1px dotted #999999;
  background: #d9d9d9;
  font-weight: 700;
}
.quote-table thead th[rowspan],
.quote-table thead tr:last-child th { border-bottom: 1px solid #000; }
.quote-table thead tr:first-child th { border-top: 1px solid #000; }
.quote-table { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.quote-summary-group td,
.quote-summary-total td { background: transparent; font-weight: 800; }
.quote-summary-total td { background: #d9d9d9; }
.quote-summary-category td { font-weight: 400; }
.quote-summary-category td:first-child,
.quote-summary-category td:nth-child(2) { padding-left: 5px; }
.quote-summary-table td:first-child { text-align: center; }
.quote-basis { display: flex; align-items: center; gap: 4px; }
.quote-basis select { width: auto; flex: 0 0 auto; }
.quote-basis .quote-rate { width: 52px; flex: 0 0 auto; text-align: right; }
.quote-rounding { display: flex; align-items: center; gap: 4px; }
.quote-rounding select { width: auto; }
.quote-rounding input { width: 108px; text-align: right; font-variant-numeric: tabular-nums; }
.quote-closing { margin: 8px 0 0; }
.quote-closing input { width: 100%; min-height: 26px; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); font-size: 10.5px; }
.quote-closing input:hover { border-color: var(--line); }
/* PROJECT 한 줄: 공사명 검색 · 덧붙일 글 · 결과 */
.quote-project-row dd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 5px; }
.quote-project-row .lookup-combobox { min-width: 0; }
.quote-project-row .lookup-combobox input { width: 100%; }
.quote-project-result {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  overflow: hidden;
  padding: 0 7px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #fafafa;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 도구 줄은 늘 같은 높이다. 고른 줄이 생겼다 없어졌다 하며 표가 흔들리면 안 된다. */
.quote-detail-toolbar { display: flex; min-height: 28px; align-items: center; gap: 5px; margin-bottom: 8px; }
.quote-detail-hint { margin-left: auto; color: var(--muted); font-size: 10px; }
.quote-table-scroll { min-width: 0; overflow-x: auto; }
.quote-detail-table { min-width: 940px; }
.quote-detail-table td { height: 24px; }
.quote-row-group td,
.quote-row-category td,
.quote-row-subcategory td { background: transparent; }
.quote-row-group input,
.quote-row-category input { font-weight: 800; }
.quote-row-subcategory input { font-weight: 700; }
/* 번호는 저절로 붙는다. 눌러서 줄을 더하거나 지우는 손잡이다. */
.quote-table button.quote-code {
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}
.quote-table button.quote-code:hover { background: var(--accent-soft); }
.quote-row-subtotal td,
.quote-row-total td { background: #d9d9d9; font-weight: 800; text-align: right; }
.quote-row-subtotal td:first-child,
.quote-row-total td:first-child { letter-spacing: 0.06em; text-align: center; }
.quote-row-actions { display: flex; gap: 1px; }
.quote-row-actions button {
  width: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.quote-row-actions button:hover { border-color: var(--line); color: var(--ink); }

@media (max-width: 767px) {
  /* 좁은 화면에서 표가 페이지를 밀면 안 된다. 표만 자기 안에서 구른다. */
  .quote-page,
  .quote-paper,
  .quote-editor { min-width: 0; max-width: 100%; }
  .quote-paper { padding: 10px; }
  .quote-head-fields div { grid-template-columns: 76px minmax(0, 1fr); }
  .quote-toolbar-actions { margin-left: 0; }
  .quote-summary-head { grid-template-columns: minmax(0, 1fr); }
  .quote-company { text-align: left; }
  .quote-head-fields div { grid-template-columns: 84px minmax(0, 1fr); }
  .quote-cover h1 { font-size: 32px; }
  .quote-toolbar { flex-wrap: wrap; }
  .quote-title-field { order: 3; width: 100%; flex: 1 0 100%; }
}

/* 견적서 인쇄 --------------------------------------------------------------------
   원본 PDF에서 좌표를 그대로 읽어 옮겼다. PDF의 그리기 좌표는 96dpi 픽셀이고 CSS
   픽셀도 96dpi이므로 아래 숫자는 종이 위에서 1:1로 선다. */
.quote-print { display: none; }
.quote-print[hidden] { display: none; }

@media print {
  /* 시트의 인쇄 설정: A4 가로, 배율 100%. 여백은 페이지가 직접 잡으므로 0이다. */
  @page { size: A4 landscape; margin: 0; }

  .app-shell,
  .toast,
  dialog { display: none !important; }

  html,
  body {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .quote-print {
    display: block !important;
    color: #000;
    font-family: Pretendard, Arial, "Apple SD Gothic Neo", sans-serif;
  }

  .quote-print-page {
    position: relative;
    width: 1122.67px;
    height: 793.33px;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }
  .quote-print-page:last-child { break-after: auto; page-break-after: auto; }
  /* 을지는 줄이 넘치면 다음 장으로 흐른다. 높이를 묶어 두면 잘려 나간다. */
  .quote-print-flow { height: auto; overflow: visible; }

  /* 인쇄 영역은 위에서 72px 내려온 자리에서 시작하고 가로로는 가운데에 선다. */
  .quote-print-body { position: relative; margin: 0 auto; padding-top: 72px; }
  .quote-print-wide { width: 1065px; }
  .quote-print-narrow { width: 1050px; }

  .quote-pdf-text {
    position: absolute;
    line-height: 1;
    white-space: pre;
  }
  .quote-pdf-center { right: 0; left: 0; text-align: center; }
  .quote-pdf-right { text-align: right; }
  /* 자간을 주면 마지막 글자 뒤에도 자간이 붙어 가운데가 그만큼 왼쪽으로 밀린다.
     절반을 되밀어 글자 자체가 가운데에 서게 한다. */
  .quote-pdf-spaced { text-indent: 1.8px; }
  .quote-pdf-image { height: auto; }
  .quote-pdf-title { font-weight: 800; letter-spacing: 0; }
  .quote-pdf-label { font-weight: 800; }
  .quote-pdf-image { position: absolute; }

  /* 원본의 선은 거의 전부 1px 점선이다(PDF의 `[1 1] 0 d`). 검은 실선은 액자와 띠의
     경계에만 쓴다 — 위쪽 테두리, 제목 띠 아래, 열 머리글 아래, 그리고 맨 아래.
     대분류·중분류·소계 줄에는 검은 선을 두르지 않는다. 두르면 표가 격자로 보인다. */
  .quote-pdf-table-band {
    position: absolute;
    display: flex;
    height: 19px;
    align-items: center;
    justify-content: center;
    background: #999999;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quote-pdf-static { position: static; width: 100%; }

  .quote-print-table {
    position: absolute;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 7.8px;
    line-height: 1;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .quote-print-flow .quote-print-table { position: static; }
  .quote-print-table th,
  .quote-print-table td {
    height: 13px;
    padding: 0 2px;
    overflow: hidden;
    vertical-align: middle;
    word-break: break-all;
  }
  .quote-print-table td {
    border-right: 1px dotted #d9d9d9;
    border-bottom: 1px dotted #d9d9d9;
  }
  .quote-print-table td:last-child { border-right: 0; }
  .quote-print-table thead th {
    height: 13.5px;
    border-right: 1px dotted #999999;
    border-bottom: 1px dotted #999999;
    background: #d9d9d9;
    font-weight: 700;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quote-print-table thead tr:first-child th { border-top: 1px solid #000; }
  /* 머리글 전체의 아래끝만 검은 실선이다. 「재료비」 아래는 옅은 점선. */
  .quote-print-table thead th[rowspan],
  .quote-print-table thead tr:last-child th { border-bottom: 1px solid #000; }
  .quote-print-table thead th:last-child { border-right: 0; }
  .quote-print-table thead { display: table-header-group; }
  /* 업체견적 리폼은 표 위에 어디서 온 문서인지 한 줄로 적는다. */
  .quote-print-head { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 8px; font-size: 8.5px; }
  .quote-print-head b { margin-right: 5px; color: #555; font-weight: 700; }
  .quote-print-table tfoot { display: table-footer-group; }
  .quote-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  .quote-print-table .quote-amount { text-align: right; font-variant-numeric: tabular-nums; }
  .quote-print-table .quote-center { text-align: center; }
  .quote-print-table td:first-child { text-align: center; }

  /* 묶음 줄은 굵은 글씨로만 구분한다. 소계·합계만 옅은 회색 띠를 깐다. */
  .quote-print-group td,
  .quote-print-category td { font-weight: 800; }
  .quote-print-subcategory td { font-weight: 700; }
  /* 갑지의 1. 2. 는 얇은 글자다. 굵은 것은 A. B. C. 뿐. */
  .quote-print-table[data-quote-columns="summary"] .quote-print-category td { font-weight: 400; }
  .quote-print-blank td { height: 13px; }
  .quote-print-subtotal td,
  .quote-print-total td {
    background: #d9d9d9;
    font-weight: 800;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* 갑지의 「C. 총 공사비」 줄만 위에 검은 선을 얹는다. */
  .quote-print-grand td { height: 18px; border-top: 1px solid #000; }
  /* 소계·합계 글자는 품명 열(B)에 선다. */
  .quote-print-subtotal td:nth-child(2),
  .quote-print-total td:nth-child(2) { text-align: center; letter-spacing: 0.06em; }
  /* 머리 묶음을 닫는 검은 선. */
  .quote-pdf-rule { position: absolute; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 번호 칸을 누르면 여기서 묶음을 더한다. Ctrl·Shift로는 여러 줄을 고른다. */
.quote-number-cell { position: relative; cursor: pointer; touch-action: none; user-select: none; }
.quote-table .quote-code { text-align: center; }
.quote-table tbody tr.selected td { background: #eef2f8; }
/* 엑셀처럼 네모나게 고른 칸. 고른 자리가 복사·붙여넣기·지우기의 대상이다. */
.quote-detail-table tbody td.in-range { background: #dbe7f6; }
.quote-detail-table td.is-cursor { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 왼쪽 줄머리와 위쪽 열머리 — 엑셀의 행 번호와 열 문자다. */
.quote-detail-table col[data-quote-col="gutter"] { width: 30px; }
.quote-detail-table .quote-gutter,
.quote-detail-table .quote-corner,
.quote-detail-table .quote-column-head {
  background: #eef0f3;
  color: #6b7280;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.quote-detail-table .quote-column-head { height: 13px; }
.quote-detail-table .quote-gutter.is-lit,
.quote-detail-table .quote-column-head.is-lit { background: #c7d5e8; color: #1f2937; }
.quote-detail-table .quote-code-cell { text-align: center; font-weight: 700; }
/* 소계·합계 글자는 품명 열(B)에 선다. */
.quote-detail-table .quote-total-label { text-align: center; letter-spacing: 0.04em; }
.quote-row-menu {
  position: absolute;
  z-index: 30;
  display: grid;
  width: 104px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.quote-row-menu button {
  min-height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  text-align: left;
}
.quote-row-menu button:hover { background: var(--accent-soft); }
.quote-row-menu button.danger { margin-top: 2px; border-top: 1px solid var(--line-soft); color: #a4343a; }
.quote-row-count { display: flex; gap: 3px; padding: 3px 0; }
.quote-row-count input {
  width: 52px;
  min-height: 24px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 10.5px;
  text-align: right;
}
.quote-row-count button { min-height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 10.5px; font-weight: 700; }
.quote-detail { position: relative; }
.quote-bulk { display: flex; align-items: center; gap: 5px; margin-left: auto; visibility: hidden; }
.quote-bulk.is-active { visibility: visible; }
.quote-bulk b { font-size: 10.5px; }
.quote-bulk input {
  width: 84px;
  min-height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px;
}
.quote-bulk button { min-height: 26px; padding: 0 7px; font-size: 10.5px; }
.quote-row-blank td { height: 24px; }
/* 갑지 화면의 번호 칸도 가운데에 선다. */
.quote-summary-table td:first-child input { text-align: center; }
.quote-detail-table td:nth-child(2) { text-align: center; }

/* 고른 줄을 끌면 놓일 자리를 선으로 알려 준다. */
.quote-detail-table tr.drop-before td { border-top: 2px solid var(--accent); }
.quote-detail-table tr.selected .quote-number-cell { cursor: grab; }

/* --- 단가 장부 -------------------------------------------------------------------- */
/* 품목 한 줄에 제출가와 업체가가 나란히 선다. 둘을 갈라 보는 것이 이 화면의 이유다. */
.ledger-page { display: grid; gap: 10px; }
.ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ledger-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.ledger-tabs button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; }
.ledger-tabs button.active { background: var(--accent); color: #fff; }
.ledger-summary-text { color: var(--muted); font-size: 12px; }
.ledger-backlog-text { flex-basis: 100%; color: var(--muted); font-size: 12px; }

/* 계정 메뉴의 기기 설정과 링크 — 단추와 같은 줄 높이로 */
.account-menu .account-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; cursor: pointer; }
.account-menu .account-toggle input { margin: 0; }
.account-menu .account-link { display: block; padding: 8px 10px; color: var(--ink); font-size: 12.5px; text-decoration: none; }
.account-menu .account-link:hover { background: var(--accent-soft); }

/* 파일 보기 — 사진·PDF·엑셀을 화면 안에서 */
.file-thumb { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 3px; object-fit: cover; background: var(--accent-soft); }
.file-viewer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 20, 20, 0.62); }
.file-viewer[hidden] { display: none; }
.file-viewer-frame { display: flex; width: min(100%, 1200px); height: min(100%, 92vh); flex-direction: column; overflow: hidden; border-radius: 8px; background: var(--paper); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); }
.file-viewer-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.file-viewer-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer-head small { color: var(--muted); white-space: nowrap; }
.file-viewer-actions { display: flex; flex: 0 0 auto; gap: 4px; margin-left: auto; }
.file-viewer-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: #f1f1ee; }
.file-viewer-image { display: flex; align-items: center; justify-content: center; }
.file-viewer-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.15s; }
.file-viewer-pdf iframe { display: block; width: 100%; height: 100%; border: 0; }
.file-viewer-sheet { padding: 10px; background: var(--paper); }
.file-viewer-sheet h3 { margin: 8px 0 6px; font-size: 12px; }
.file-viewer-sheet h3 small { font-weight: 400; color: var(--muted); }
.file-viewer-table { max-height: 70vh; overflow: auto; border: 1px solid var(--line-soft); }
.file-viewer-table table { border-collapse: collapse; font-size: 11px; }
.file-viewer-table td { max-width: 260px; padding: 2px 6px; border: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .file-viewer { padding: 0; }
  .file-viewer-frame { height: 100%; border-radius: 0; }
}

/* 작업 탭은 좁은 화면에서 접는다 — 탭 하나로 산다. */
.work-tabs { display: none; }

/* 속도 — 관리자 화면 구석의 재는 장치 */
.perf-panel { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 8px; font-size: 12px; color: var(--muted); }
.perf-panel summary { cursor: pointer; }
.perf-grid { display: grid; gap: 12px; margin-top: 8px; }
.perf-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.perf-table caption { text-align: left; padding: 2px 0 4px; font-weight: 600; color: var(--ink); }
.perf-table th, .perf-table td { padding: 2px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
.perf-table td:last-child, .perf-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.perf-table tr.is-slow td { color: #b45309; }
.perf-note { margin: 0 0 6px; font-size: 11.5px; }
.ledger-head > .quiet-button { margin-left: auto; }
.ledger-toolbar { display: flex; gap: 8px; }
.ledger-toolbar input[type="search"] { flex: 1 1 auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 13px; }
.ledger-toolbar select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 13px; }
.ledger-list { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); overflow: hidden; }
.ledger-row { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) 58px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:hover, .ledger-row:focus-visible { background: #f5f5f5; outline: none; }
.ledger-name { display: grid; gap: 1px; min-width: 0; }
.ledger-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ledger-name small, .ledger-side small, .ledger-side em, .ledger-side i { color: var(--muted); font-size: 10.5px; font-style: normal; }
.ledger-side { display: grid; gap: 0; line-height: 1.25; }
.ledger-side b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ledger-side.is-vendor b { color: #7a4b00; }
.ledger-side.is-empty b { color: var(--line); }
.ledger-status { justify-self: end; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--muted); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ledger-status-confirmed { background: #dfeee2; color: #1f5a2b; }
.ledger-status-noise { background: #f3e2e2; color: #7a1f1f; }
.ledger-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ledger-item-head h2 { margin: 0; font-size: 18px; }
.ledger-item-head h2 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.ledger-item-actions { display: flex; gap: 6px; margin-left: auto; }
.ledger-item-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); }
.ledger-item-summary .ledger-side b { font-size: 16px; }
.ledger-aliases { margin: 0; font-size: 11px; color: var(--muted); }
.ledger-aliases code { padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); }
.ledger-points-scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); }
.ledger-points { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12px; }
.ledger-points th { position: sticky; top: 0; padding: 7px 8px; border-bottom: 1px solid var(--line); background: #f5f5f5; text-align: left; font-size: 11px; color: var(--muted); }
.ledger-points td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ledger-points td small { display: block; color: var(--muted); font-size: 10.5px; }
.ledger-points tr.is-vendor td:nth-child(2) { color: #7a4b00; font-weight: 700; }
.ledger-points tr.is-client td:nth-child(2) { font-weight: 700; }
.ledger-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-hint { margin: 0; color: var(--muted); font-size: 12px; }
.ledger-pairs { display: grid; gap: 8px; }
.ledger-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--paper); }
.ledger-pair-side { display: grid; gap: 2px; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: left; font: inherit; }
.ledger-pair-side:hover { border-color: var(--line); }
.ledger-pair-side strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-pair-side small { color: var(--muted); font-size: 10.5px; }
.ledger-pair-middle { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ledger-pair-middle em { color: var(--muted); font-size: 11px; font-style: normal; }
@media (max-width: 767px) {
  .ledger-row { grid-template-columns: 1fr 1fr; }
  .ledger-row .ledger-name { grid-column: 1 / -1; }
  .ledger-row .ledger-status { grid-column: 1 / -1; justify-self: start; }
  .ledger-pair { grid-template-columns: 1fr; }
}

/* 을지의 장부 제안 — 칸 밑에 서는 후보와, 도구 줄의 힌트. 단가는 채우지 않고 보여 준다. */
.quote-detail { position: relative; }
.quote-suggest { top: auto; right: auto; width: max-content; max-width: 480px; }
.quote-suggest button { display: grid; gap: 1px; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; text-align: left; font: inherit; }
.quote-suggest button.active, .quote-suggest button:hover { background: var(--accent-soft); }
.quote-suggest strong { font-size: 12.5px; }
.quote-suggest small, .quote-suggest span { color: var(--muted); font-size: 10.5px; }
.quote-suggest span b { color: #7a4b00; font-weight: 700; }
.quote-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fbfaf6; font-size: 12px; }
.quote-hint-name { display: inline-flex; align-items: baseline; gap: 6px; }
.quote-hint-name small, .quote-hint-side small, .quote-hint-side em { color: var(--muted); font-size: 10.5px; font-style: normal; }
.quote-hint-side { display: inline-flex; align-items: baseline; gap: 6px; }
.quote-hint-side b { font-variant-numeric: tabular-nums; }
.quote-hint .quiet-button { min-height: 22px; padding: 0 6px; font-size: 10.5px; }
.quote-hint-recent { display: grid; gap: 2px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; }
.quote-hint-recent li { display: grid; grid-template-columns: 84px 36px 110px 1fr 1.4fr; gap: 8px; font-size: 11px; color: var(--muted); }
.quote-hint-recent li b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 자동견적서의 보조 줄과 장부 대조, 업체 비교표 */
.quote-assist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #f6f8fb; font-size: 12px; }
.quote-assist label { display: inline-flex; align-items: center; gap: 6px; }
.quote-assist select, .quote-assist input, .quote-compare-markup input { min-height: 28px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: inherit; font-size: 12px; }
.quote-assist select { max-width: 360px; }
.quote-assist input[type="number"], .quote-compare-markup input { width: 72px; }
.quote-assist-margin { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.quote-assist-check { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; font-size: 12px; }
.quote-assist-check-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.quote-assist-check-head small { color: var(--muted); }
.quote-assist-check-head .quiet-button { margin-left: auto; }
.quote-assist-check table { width: 100%; border-collapse: collapse; }
.quote-assist-check th, .quote-assist-check td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; font-variant-numeric: tabular-nums; vertical-align: top; }
.quote-assist-check td small { display: block; color: var(--muted); font-size: 10.5px; }
.quote-assist-check td .quiet-button { min-height: 22px; margin-top: 2px; padding: 0 6px; font-size: 10.5px; }
.quote-assist-check tr.is-unlinked td { color: var(--muted); }
.quote-hint-source { display: inline-flex; align-items: baseline; gap: 6px; }
.quote-hint-source small { color: var(--muted); font-size: 10.5px; }
.quote-hint-source b { font-variant-numeric: tabular-nums; }
.quote-compare .quote-toolbar { gap: 12px; }
.quote-compare-title { margin: 0; font-size: 15px; }
.quote-compare-title small { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: 12px; }
.quote-compare-markup { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; }
.quote-compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.quote-compare-table th, .quote-compare-table td { padding: 6px 8px; border: 1px solid var(--line-soft); vertical-align: top; }
.quote-compare-table thead th { background: #f3f4f6; text-align: left; }
.quote-compare-table thead th strong { display: block; }
.quote-compare-table thead th small { display: block; color: var(--muted); font-weight: 400; }
.quote-compare-table thead th .quiet-button { min-height: 22px; margin-top: 4px; padding: 0 6px; font-size: 10.5px; }
.quote-compare-table .quote-compare-section th { background: #fbfaf6; text-align: left; font-weight: 700; }
.quote-compare-table td.is-name small, .quote-compare-table td.is-cell small { display: block; color: var(--muted); font-size: 10.5px; }
.quote-compare-table td.is-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-compare-table td.is-cell.is-low { background: #e8f5e9; }
.quote-compare-table td.is-missing { text-align: center; color: var(--muted); background: #fafafa; }
.quote-compare-table tfoot th { text-align: left; background: #f3f4f6; }
.quote-compare-table tfoot td { text-align: right; font-variant-numeric: tabular-nums; }
.quote-compare-table tfoot small { display: block; color: var(--muted); font-size: 10.5px; }
.quote-compare-menu-wrap { position: relative; display: inline-block; }

/* 읽기 확인 — 왼쪽 원본, 오른쪽 옮겨 쓴 것, 아래 코멘트와 승인 */
.quote-review-layout { display: grid; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); gap: 12px; align-items: start; }
/* 원본은 칸(cell) 안에서 붙어 따라온다. 칸은 문서 줄의 높이만큼 늘어나므로 원본은 문서가 끝나는 곳에서 멈추고
   아래 코멘트 칸을 덮지 않는다 — 격자 항목에 바로 sticky 를 주면 붙박이의 울타리가 격자 전체라 아래 줄까지 내려온다. */
.quote-review-original-cell { min-width: 0; align-self: stretch; }
.quote-review-original { position: sticky; top: 8px; max-height: calc(100vh - 110px); overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; }
.quote-review-original img { display: block; width: 100%; height: auto; }
.quote-review-original iframe { display: block; width: 100%; height: calc(100vh - 130px); border: 0; }
.quote-review-original .quote-review-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.quote-review-original .quote-review-file a { margin-left: auto; }
.quote-review-editor { min-width: 0; }
.quote-review-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fbfaf6; }
.quote-review-bar textarea { flex: 1 1 320px; min-height: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 12px; resize: vertical; }
.quote-review-bar .quote-review-note { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--muted); }
.quote-review-bar .quote-review-actions { display: flex; gap: 8px; align-items: center; }
.quote-review-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #b45309; color: #fff; font-size: 11px; text-align: center; }
@media (max-width: 900px) {
  .quote-review-layout { grid-template-columns: 1fr; }
  .quote-review-original { position: static; max-height: 50vh; }
  .quote-review-original iframe { height: 50vh; }
}
.quote-review-head { justify-content: flex-start; gap: 12px; }
.quote-review-head > button { flex: 0 0 auto; }
.quote-review-head > strong { flex: 0 0 auto; }
.quote-review-head > .quote-review-hint { flex: 1 1 240px; color: var(--muted); font-size: 11.5px; }

/* 업체 목록의 세금 방식 표 — 원천징수 3.3%를 얹어 받는 곳 */
.vendor-tax-badge { display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 999px; background: #eef3ff; color: #2b4dc0; font-size: 0.72rem; font-weight: 600; vertical-align: middle; }