/* All artwork is static. No controls, cursor simulation, motion, or app chrome. */
.concept-ui {
  --concept-ink: #1d1d1f;
  --concept-muted: #737373;
  --concept-line: #e7e7e7;
  --concept-soft: #f6f6f6;
  --concept-ok: #27715b;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 20px;
  color: var(--concept-ink);
  background: #fff;
  border: 1px solid var(--concept-line);
  border-radius: 10px;
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.035em;
  text-align: left;
}
.concept-ui *, .concept-ui *::before, .concept-ui *::after { box-sizing: border-box; }
.concept-ui h3, .concept-ui h4, .concept-ui p { margin: 0; }
.concept-ui h3 { color: var(--concept-ink); font: inherit; font-size: 23px; font-weight: 700; line-height: 1.25; letter-spacing: -.04em; }
.concept-ui h4 { font: inherit; font-weight: 700; }
.concept-ui strong { color: inherit; font-weight: 650; }
.concept-ui .concept-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.concept-ui .concept-title-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #4c4c4c; background: var(--concept-soft); border-radius: 7px; flex: 0 0 auto; }
.concept-ui .concept-symbol { display: inline-block; font-size: 22px; line-height: 1; font-weight: 400; font-style: normal; letter-spacing: 0; vertical-align: middle; flex: 0 0 auto; }
.concept-ui .concept-title-icon .concept-symbol { font-size: 20px; }
.concept-ui .concept-body { min-width: 0; }
.concept-ui .concept-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.concept-ui .concept-row, .concept-ui .concept-footer, .concept-ui .concept-rule-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.concept-ui .concept-row > .concept-symbol { margin-right: 2px; }
.concept-ui .concept-row > strong:last-child { margin-left: auto; }
.concept-ui .concept-footer { min-height: 36px; }
.concept-ui .concept-muted { display: block; color: var(--concept-muted); font-size: 16px; font-weight: 500; }
.concept-ui .concept-focus-area { min-width: 0; border-radius: 8px; }
.concept-ui .is-focused { background: #eff6f3; box-shadow: 0 0 0 2px #80ad9b; }
.concept-ui .concept-inset { padding: 14px; background: var(--concept-soft); border: 1px solid #efefef; border-radius: 8px; }
.concept-ui .concept-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 4px 8px; border-radius: 5px; background: #f0f0f0; color: #575757; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.concept-ui .concept-badge.is-ok { background: #eaf5ef; color: var(--concept-ok); }
.concept-ui .concept-badge.is-pending { background: #fff3df; color: #996522; }
.concept-ui .concept-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 9px 12px; border-radius: 7px; color: #fff; background: #242424; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.concept-ui .concept-action .concept-symbol { color: #fff; font-size: 18px; }
.concept-ui .concept-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.concept-ui .concept-person > div { display: flex; flex-direction: column; gap: 2px; }
.concept-ui .concept-person strong { font-size: 17px; }
.concept-ui .concept-person .concept-muted { font-size: 16px; }
.concept-ui .concept-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #e6e6e6; border-radius: 50%; color: #5a5a5a; background: #f2f2f2; font-size: 16px; font-weight: 700; }
.concept-ui .concept-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.concept-ui .concept-kv strong { text-align: right; white-space: nowrap; }
.concept-ui .concept-two-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.concept-ui .concept-two-columns > .concept-kv { align-items: flex-start; flex-direction: column; gap: 5px; }
.concept-ui .concept-highlight { color: #247158; }
.concept-ui .concept-large-number { display: block; font-size: 34px; font-weight: 750; line-height: 1.15; letter-spacing: -.05em; white-space: nowrap; }
.concept-ui .concept-large-number > span { margin-left: 5px; font-size: 17px; font-weight: 600; }
.concept-ui .concept-medium-number { font-size: 24px; font-weight: 750; white-space: nowrap; }
.concept-ui .concept-stat-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.concept-ui .concept-stat-line > div { display: flex; flex-direction: column; gap: 6px; }
.concept-ui .concept-rule { padding: 13px 14px; border: 1px solid var(--concept-line); }
.concept-ui .concept-rule-formula { margin-top: 8px; color: #454545; font-size: 18px; font-weight: 600; }
.concept-ui .concept-rules { gap: 12px; }
.concept-ui .concept-rules .concept-footer { margin-top: 0; }
.concept-ui .concept-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.concept-ui .concept-chips > span { display: inline-flex; padding: 5px 10px; border: 1px solid #e6e6e6; border-radius: 5px; background: #fff; font-size: 16px; }
.concept-ui .concept-rule .concept-chips, .concept-ui .concept-inset > .concept-chips { margin-top: 12px; }
.concept-ui .concept-document-heading { display: flex; align-items: center; gap: 10px; }
.concept-ui .concept-document-heading > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.concept-ui .concept-document-heading > .concept-badge { margin-left: auto; }
.concept-ui .concept-approval { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 6px; }
.concept-ui .concept-approval-person { display: flex; align-items: center; gap: 6px; flex-direction: column; flex: 1; color: #676767; }
.concept-ui .concept-approval-person > .concept-symbol { color: var(--concept-ok); font-size: 26px; }
.concept-ui .concept-approval-person > span:last-child { font-size: 14px; }
.concept-ui .concept-approval-person.is-current > .concept-symbol { display: grid; place-items: center; width: 35px; height: 35px; margin-top: -5px; margin-bottom: -4px; color: #424242; border: 1px solid #d5d5d5; border-radius: 50%; }
.concept-ui .concept-connector { color: #c0c0c0; }
.concept-ui .concept-source-grid { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 10px; }
.concept-ui .concept-source { display: flex; align-items: center; gap: 8px; flex-direction: column; padding: 12px 8px; border: 1px solid var(--concept-line); }
.concept-ui .concept-source > .concept-symbol { color: #666; font-size: 25px; }
.concept-ui .concept-source > strong { font-size: 16px; white-space: nowrap; }
.concept-ui .concept-plus { color: #aaa; font-size: 24px; font-weight: 400; text-align: center; }
.concept-ui .concept-flow-down { display: flex; align-items: center; justify-content: center; margin: -8px 0; color: #aaa; }
.concept-ui .concept-flow-down .concept-symbol { font-size: 22px; }
.concept-ui .concept-calculation-pair > div { display: flex; flex-direction: column; gap: 5px; padding: 3px 8px; }
.concept-ui .concept-calculation-pair strong { font-size: 18px; white-space: nowrap; }
.concept-ui .concept-calculation-inputs { display: flex; flex-direction: column; gap: 10px; }
.concept-ui .concept-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px; background: #f2f6f4; border-radius: 8px; }
.concept-ui .concept-result > span { color: #4f645b; flex: 0 0 auto; }
.concept-ui .concept-result > strong { color: #235e47; font-size: 32px; font-weight: 750; letter-spacing: -.055em; line-height: 1.1; white-space: nowrap; }
.concept-ui .concept-result > strong > span { margin-left: 3px; font-size: 17px; font-weight: 600; }
.concept-ui .concept-result > .concept-badge { font-size: 14px; }
.concept-ui .concept-paper-rule { height: 1px; margin: 14px 0; background: var(--concept-line); }
.concept-ui .concept-payslip-columns { gap: 22px; margin-bottom: 16px; }
.concept-ui .concept-payslip-columns > div { display: flex; flex-direction: column; gap: 9px; }
.concept-ui .concept-payslip-columns h4 { margin-bottom: 3px; font-size: 17px; }
.concept-ui .concept-payslip-columns .concept-kv { gap: 6px; }
.concept-ui .concept-payslip-columns .concept-muted, .concept-ui .concept-payslip-columns strong { font-size: 16px; }
.concept-ui .concept-payslip-paper .concept-result { padding: 14px; }
.concept-ui .concept-recipient-list { border-top: 1px solid var(--concept-line); }
.concept-ui .concept-recipient { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--concept-line); }
.concept-ui .concept-recipient .concept-avatar { width: 34px; height: 34px; }
.concept-ui .concept-separated { margin-top: 18px; }
.concept-ui .concept-contract-conditions { display: flex; flex-direction: column; gap: 12px; }
.concept-ui .concept-signature { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 10px 14px; border: 1px dashed #d6d6d6; border-radius: 7px; }
.concept-ui .concept-signature-copy { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 1; }
.concept-ui .concept-signature-name { font-family: Pretendard, sans-serif; font-size: 29px; font-style: italic; font-weight: 500; letter-spacing: .05em; }
.concept-ui .concept-signature > .concept-symbol { color: #929292; }
.concept-ui .concept-notice { padding: 18px; background: #f8f8f8; border: 1px solid #e9e9e9; }
.concept-ui .concept-notice-heading { display: flex; align-items: center; gap: 9px; }
.concept-ui .concept-notice-heading > strong { font-size: 19px; font-weight: 700; }
.concept-ui .concept-notice-lines { display: flex; flex-direction: column; gap: 17px; margin-top: 17px; color: #555; line-height: 1.65; }
.concept-ui .concept-attachment { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 9px; color: #555; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; font-size: 16px; line-height: 1.2; }
.concept-ui .concept-attachment .concept-symbol { font-size: 18px; }
.concept-ui .concept-board-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.concept-ui .concept-board-footer > span:first-child { display: flex; align-items: center; gap: 7px; color: #666; }
.concept-ui .concept-message-box { padding: 15px; border: 1px solid var(--concept-line); border-radius: 8px 8px 8px 0; }
.concept-ui .concept-message { margin-top: 13px; font-size: 18px; line-height: 1.55; }
.concept-ui .concept-answer { padding: 15px; background: #f2f6f4; border-radius: 8px 8px 0 8px; }
.concept-ui .concept-answer-label { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.concept-ui .concept-answer-label .concept-badge { margin-left: auto; }
.concept-ui .concept-answer p { font-size: 16px; line-height: 1.5; }
.concept-ui .concept-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.concept-ui .concept-channel-grid > span { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 17px 10px; border: 1px solid var(--concept-line); border-radius: 8px; }
.concept-ui .concept-expense-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.concept-ui .concept-expense-amount > strong { font-size: 36px; line-height: 1.2; font-weight: 750; letter-spacing: -.05em; white-space: nowrap; }
.concept-ui .concept-expense-amount > strong > span { margin-left: 4px; font-size: 18px; }
.concept-ui .concept-receipt { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 14px; background: #fafafa; border: 1px dashed #d7d7d7; border-radius: 7px; }
.concept-ui .concept-receipt > .concept-symbol { font-size: 34px; color: #777; }
.concept-ui .concept-receipt > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.concept-ui .concept-checklist { display: flex; flex-direction: column; gap: 0; }
.concept-ui .concept-checklist > .concept-focus-area { padding: 10px 2px; border-bottom: 1px solid var(--concept-line); border-radius: 0; }
.concept-ui .concept-check { display: flex; align-items: center; gap: 12px; }
.concept-ui .concept-check > div { display: flex; flex-direction: column; gap: 2px; }
.concept-ui .concept-check-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #e8f4ed; color: #33765b; }
.concept-ui .concept-check-icon > .concept-symbol { font-size: 19px; }
.concept-ui .concept-check-icon.is-pending { background: #f2f2f2; color: #929292; }
.concept-ui .concept-materials { display: flex; flex-direction: column; gap: 0; }
.concept-ui .concept-materials > div { display: flex; align-items: center; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--concept-line); }
.concept-ui .concept-materials .concept-badge { margin-left: auto; }
.concept-ui .concept-handoff { display: flex; align-items: center; gap: 10px; }
.concept-ui .concept-handoff > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.concept-ui .concept-handoff > .concept-symbol:nth-last-child(2) { color: #aaa; }
.concept-ui .concept-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.concept-ui .concept-system-grid > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 5px; border: 1px solid var(--concept-line); border-radius: 8px; }
.concept-ui .concept-system-grid .concept-symbol { color: #727272; font-size: 26px; }
.concept-ui .concept-connection-hub { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 12px; border: 1px solid #d4e2da; border-radius: 8px; background: #f1f6f3; }
.concept-ui .concept-connection-hub .concept-symbol { color: #397254; font-size: 24px; }
.concept-ui .concept-destination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 10px; border: 1px solid var(--concept-line); border-radius: 8px; }
.concept-ui .concept-dot { width: 3px; height: 3px; background: #aaa; border-radius: 50%; }
.concept-ui .concept-mapping-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; }
.concept-ui .concept-mapping-head .concept-symbol { color: #aaa; }
.concept-ui .concept-mapping { border: 1px solid var(--concept-line); }
.concept-ui .concept-field-map { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 12px; padding: 14px; }
.concept-ui .concept-field-map + .concept-field-map { border-top: 1px solid var(--concept-line); }
.concept-ui .concept-field-map .concept-symbol { color: #b2b2b2; font-size: 20px; }
.concept-ui .concept-field-map > strong { color: #3a6a53; }
.concept-ui .concept-delivery { display: flex; align-items: center; gap: 12px; }
.concept-ui .concept-delivery > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.concept-ui .concept-file-icon { display: grid; place-items: center; width: 42px; height: 46px; border: 1px solid #dedede; border-radius: 5px; background: #fff; }
.concept-ui .concept-delivery > .concept-symbol:last-child { color: var(--concept-ok); }
.concept-ui .concept-diff { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.concept-ui .concept-diff > div { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 14px 16px; border: 1px solid var(--concept-line); border-radius: 8px; }
.concept-ui .concept-diff strong { font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -.04em; }
.concept-ui .concept-diff .concept-diff-new { border-color: #dce9e1; background: #f1f7f3; color: #2b6c4e; }
.concept-ui .concept-diff-arrow { color: #aaa; }
.concept-ui .concept-reason { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.concept-ui .concept-history { position: relative; display: flex; flex-direction: column; gap: 21px; padding: 8px 0 8px 5px; }
.concept-ui .concept-history::before { content: ""; position: absolute; top: 23px; bottom: 26px; left: 10px; width: 1px; background: #dedede; }
.concept-ui .concept-history > div { position: relative; display: flex; align-items: center; gap: 14px; }
.concept-ui .concept-history > div > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.concept-ui .concept-history-dot { z-index: 1; width: 11px; height: 11px; flex: 0 0 auto; border: 2px solid #bdbdbd; border-radius: 50%; background: #fff; }
.concept-ui .concept-history-dot.is-current { border-color: #4b886a; background: #4b886a; box-shadow: 0 0 0 4px #edf4ef; }
.concept-ui .concept-permission { display: flex; align-items: center; gap: 10px; }
.concept-ui .concept-permission .concept-symbol { color: #616161; font-size: 28px; }
.concept-ui .concept-permission-list { display: flex; flex-direction: column; gap: 0; }
.concept-ui .concept-permission-list > div { padding: 10px 1px; border-bottom: 1px solid var(--concept-line); }
.concept-ui .concept-exception-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--concept-line); }
.concept-ui .concept-exception-list .concept-person .concept-muted { display: none; }
.concept-ui .concept-closing-summary { display: flex; align-items: center; gap: 10px; }
.concept-ui .concept-closing-summary > .concept-symbol { font-size: 29px; color: #4c6e59; }
.concept-ui .concept-closing-summary > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.concept-ui.is-compact { padding: 18px; }
.concept-ui.is-compact .concept-header { margin-bottom: 16px; }
.concept-ui.is-compact .concept-stack { gap: 10px; }
.concept-ui.is-compact .concept-inset, .concept-ui.is-compact .concept-rule { padding: 11px 12px; }
.concept-ui.is-compact .concept-checklist > .concept-focus-area { padding-top: 8px; padding-bottom: 8px; }
.concept-ui.is-compact .concept-approval { padding: 10px 3px; }
.concept-ui.is-compact .concept-notice { padding: 15px; }
.concept-ui.is-compact .concept-notice-lines { gap: 12px; margin-top: 12px; }
.concept-ui.is-compact .concept-recipient { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 420px) {
  .concept-ui { padding: 18px; }
  .concept-ui .concept-header { margin-bottom: 16px; }
  .concept-ui h3 { font-size: 22px; }
  .concept-ui .concept-two-columns { gap: 12px; }
  .concept-ui .concept-result { gap: 8px; padding: 13px 10px; flex-wrap: wrap; }
  .concept-ui .concept-result > strong { font-size: 30px; }
  .concept-ui .concept-result > .concept-badge { margin-left: auto; }
  .concept-ui .concept-payslip-columns { grid-template-columns: 1fr; gap: 14px; }
  .concept-ui .concept-payslip-columns > div { padding: 10px; border: 1px solid var(--concept-line); }
  .concept-ui .concept-notice-heading { flex-wrap: wrap; }
  .concept-ui .concept-receipt { gap: 9px; padding: 14px 10px; flex-wrap: wrap; }
  .concept-ui .concept-receipt .concept-badge { margin-left: auto; }
  .concept-ui .concept-source-grid { gap: 6px; }
  .concept-ui .concept-source { padding: 10px 5px; }
  .concept-ui .concept-connection-hub { flex-wrap: wrap; gap: 8px; }
  .concept-ui .concept-handoff { flex-wrap: wrap; }
  .concept-ui .concept-handoff > div { min-width: 185px; }
  .concept-ui .concept-system-grid { gap: 6px; }
  .concept-ui .concept-system-grid > div { padding: 13px 4px; }
}