/* Business screens on the tablet (business-tablet.js). Pages are authored at
   the mock's 1440 px width and scaled into the 1148 × 831 screen. */
.biz-layer { position: absolute; inset: 0; z-index: 20; visibility: hidden; background: #fff; letter-spacing: -.03em; text-align: left; line-height: 1.4; }
.biz-page {
  position: absolute; left: 0; top: 0; width: 1440px; overflow: hidden;
  transform-origin: 0 0; background: #fff; will-change: transform; color: #191f28;
}
.biz-bg { position: absolute; left: 0; top: 0; width: 1440px; height: auto; display: block; max-width: none; }
.biz-sprite { display: block; flex: none; background-repeat: no-repeat; }

/* Toggle */
.biz-toggle { position: relative; display: block; width: 32px; height: 18px; border-radius: 9px; background: #cbced4; transition: background 220ms; }
.biz-toggle > i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 43, .2); transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1); }
[data-on] > .biz-toggle, [data-on] .biz-toggle { background: #7517d6; }
[data-on] > .biz-toggle > i, [data-on] .biz-toggle > i { transform: translateX(14px); }

/* 상품/단가 관리 */
.biz-products { background: #f8fafc; }
.biz-price {
  position: absolute; left: 932px; width: 112px; height: 28px; box-sizing: border-box;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: 26px; text-align: right; padding-right: 9px;
  transition: border-color 160ms, box-shadow 160ms; overflow: hidden;
}
.biz-price > span { position: absolute; right: 9px; top: 0; transition: opacity 200ms, transform 260ms; }
.biz-price-new { opacity: 0; transform: translateY(10px); color: #5f16ab; }
.biz-price[data-edited] .biz-price-old { opacity: 0; transform: translateY(-10px); }
.biz-price[data-edited] .biz-price-new { opacity: 1; transform: none; }
.biz-price[data-focus] { border-color: #7517d6; box-shadow: 0 0 0 3px rgba(117, 23, 214, .16); }
.biz-caret { position: absolute; right: 7px; top: 6px; width: 1.5px; height: 15px; background: #7517d6; opacity: 0; }
.biz-price[data-focus] .biz-caret { animation: biz-caret 520ms steps(2) infinite; }
@keyframes biz-caret { 0% { opacity: 1; } 100% { opacity: 0; } }
.biz-rate { position: absolute; left: 1222px; width: 66px; height: 40px; background: #ecfdf5; font-size: 13px; font-weight: 600; color: #009966; line-height: 40px; text-align: center; opacity: 0; transition: opacity 240ms; }
.biz-rate[data-edited] { opacity: 1; }
.biz-row-toggle { position: absolute; left: 1303px; width: 32px; height: 18px; transition: transform 380ms cubic-bezier(.2, .9, .3, 1.2), filter 380ms; }
.biz-row-toggle[data-pop] { transform: translateY(-5px) scale(1.55); filter: drop-shadow(0 6px 8px rgba(83, 22, 160, .28)); }
.biz-bulk { position: absolute; left: 1196px; top: 104px; }
.biz-bulk-card {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; margin-left: -0px;
  border-radius: 10px; background: #f8fafc; font-size: 12px; color: #191f28; white-space: nowrap;
  transform-origin: 30% 50%; transition: transform 420ms cubic-bezier(.2, .9, .3, 1.15), box-shadow 420ms, background 420ms;
}
.biz-bulk-card b { font-weight: 500; }
.biz-bulk[data-pop] .biz-bulk-card { transform: translate(-40px, 18px) scale(1.7); background: #fff; box-shadow: 0 14px 34px rgba(64, 20, 122, .22), 0 0 0 1px rgba(117, 23, 214, .12); }

/* 공고함 맞춤 */
.biz-notices { background: #f8fafc; }
.biz-tabs { position: absolute; left: 58px; top: 172px; width: 812px; height: 43px; display: flex; gap: 0; padding-left: 12px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.biz-tabs > span { position: relative; padding: 13px 13px 0; font-size: 14px; color: #314158; font-weight: 500; }
.biz-tabs em { font-style: normal; color: #90a1b9; font-weight: 400; margin-left: 2px; }
.biz-tabs .is-active { color: #7517d6; font-weight: 600; }
.biz-tabs .is-active em { color: #9333ea; }
.biz-tabs .is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #7517d6; }
.biz-chips { position: absolute; left: 58px; top: 216px; width: 1324px; height: 46px; display: flex; align-items: center; gap: 6px; padding-left: 15px; background: #fff; border-bottom: 1px solid #eef2f6; }
.biz-chips small { font-size: 11px; color: #90a1b9; margin-right: 6px; }
.biz-chips > i { width: 1px; height: 18px; background: #e2e8f0; margin: 0 10px; }
.biz-chip { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid #e2e8f0; font-size: 12px; line-height: 24px; color: #314158; background: #fff; }
.biz-chip em { font-style: normal; color: #90a1b9; }
.biz-chip.is-active { background: #7517d6; border-color: #7517d6; color: #fff; }
.biz-notice-list { position: absolute; left: 58px; top: 262px; width: 1324px; height: 820px; margin: 0; padding: 0; list-style: none; background: #fff; }
.biz-notice {
  display: flex; align-items: center; height: 97px; padding: 0 20px 0 29px; box-sizing: border-box;
  border-bottom: 1px solid #f1f5f9; opacity: 0; transform: translateY(14px);
  transition: opacity 360ms, transform 480ms cubic-bezier(.2, .8, .2, 1);
}
.biz-notice[data-shown] { opacity: 1; transform: none; }
.biz-due { width: 88px; margin-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.biz-due b { font-size: 16px; font-weight: 600; color: #0f172b; }
.biz-due b.is-urgent { color: #e5484d; }
.biz-due span { font-size: 11px; color: #62748e; }
.biz-notice-main { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.biz-notice-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #90a1b9; }
.biz-src { padding: 3px 7px; border-radius: 6px; font-weight: 500; }
.biz-src.is-semo { background: #f3e8ff; color: #7517d6; }
.biz-src.is-g2b { background: #e8f1fd; color: #1f5fbf; }
.biz-match { padding: 3px 7px; border-radius: 6px; background: #ecfdf5; color: #007a55; font-weight: 500; }
.biz-notice-main strong { font-size: 15px; font-weight: 600; color: #0f172b; }
.biz-org { font-size: 12px; color: #45556c; }
.biz-pay { display: flex; flex-direction: column; align-items: flex-end; margin-right: 22px; font-size: 11px; color: #90a1b9; }
.biz-pay b { font-size: 13px; font-weight: 600; color: #1d293d; }
.biz-outline-btn { width: 101px; height: 36px; box-sizing: border-box; border: 1px solid #cad5e2; border-radius: 10px; font-size: 13px; font-weight: 600; color: #314158; line-height: 34px; text-align: center; background: #fff; }

/* 채팅 */
.biz-chat { background: #f8fafc; }
.biz-chat-side { position: absolute; left: 0; top: 0; width: 320px; height: 100%; overflow: hidden; background: #fff; border-right: 1px solid #e2e8f0; }
.biz-chat-side img { width: 1440px; max-width: none; display: block; }
.biz-chat-view { position: absolute; left: 321px; right: 0; top: 0; bottom: 96px; overflow: hidden; }
.biz-chat-column { position: absolute; left: 24px; right: 72px; top: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; transition: transform 560ms cubic-bezier(.2, .8, .2, 1); }
.biz-chat-item { opacity: 0; transform: translateY(16px); transition: opacity 360ms, transform 480ms cubic-bezier(.2, .8, .2, 1); }
.biz-chat-item[data-shown] { opacity: 1; transform: none; }
.biz-date { display: flex; justify-content: center; font-size: 12px; color: #62748e; }
.biz-date span { display: flex; align-items: center; gap: 22px; }
.biz-date span::before, .biz-date span::after { content: ''; width: 124px; height: 1px; background: #e2e8f0; }
.biz-msg { display: flex; align-items: flex-end; gap: 8px; }
.biz-msg p { margin: 0; max-width: 470px; padding: 12px 16px; font-size: 14px; line-height: 1.55; border-radius: 18px; }
.biz-msg.is-seller { justify-content: flex-end; }
.biz-msg.is-seller p { background: #7517d6; color: #fff; border-bottom-right-radius: 6px; }
.biz-msg.is-buyer p { background: #fff; color: #0f172b; border: 1px solid #e2e8f0; border-bottom-left-radius: 6px; }
.biz-msg.is-buyer > div { display: flex; flex-direction: column; gap: 6px; }
.biz-msg.is-buyer small { font-size: 11px; color: #62748e; }
.biz-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #f3e8ff; color: #7517d6; font-style: normal; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.biz-meta { font-size: 11px; line-height: 1.4; color: #90a1b9; text-align: right; white-space: nowrap; }
.is-buyer .biz-meta { text-align: left; }
.biz-card-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.biz-quote-card { border-radius: 14px; overflow: hidden; }
.biz-contract {
  width: 382px; box-sizing: border-box; padding: 16px; border-radius: 14px; background: #fff;
  border: 1px solid #e6ceff; box-shadow: 0 2px 8px rgba(71, 22, 122, .06); font-size: 13px; color: #45556c;
}
.biz-contract-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.biz-contract-head b { font-size: 15px; font-weight: 600; color: #191f28; }
.biz-badge { position: relative; display: grid; font-size: 11px; font-weight: 500; }
.biz-badge > span, .biz-seller-sign > span, .biz-contract-actions .is-primary > span { grid-area: 1 / 1; transition: opacity 300ms; }
.biz-badge .is-wait { padding: 3px 7px; border-radius: 6px; background: #fff4e5; color: #b45309; }
.biz-badge .is-done { padding: 3px 7px; border-radius: 6px; background: #ecfdf5; color: #007a55; }
.biz-contract .is-done { opacity: 0; }
.biz-contract[data-signed] .is-done { opacity: 1; }
.biz-contract[data-signed] .is-wait { opacity: 0; }
.biz-contract-amount { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 8px; }
.biz-contract-amount b { font-size: 18px; font-weight: 600; color: #191f28; }
.biz-contract dl { display: grid; grid-template-columns: 40px 1fr; gap: 6px 8px; margin: 0 0 12px; font-size: 12px; }
.biz-contract dt { color: #90a1b9; }
.biz-contract dd { margin: 0; color: #314158; }
.biz-sign { display: flex; gap: 8px; margin-bottom: 14px; font-size: 11px; }
.biz-sign > span { padding: 4px 8px; border-radius: 6px; background: #f1f5f9; color: #45556c; }
.biz-sign .is-signed { background: #ecfdf5; color: #007a55; }
.biz-seller-sign { display: grid; }
.biz-contract[data-signed] .biz-seller-sign { background: #ecfdf5; color: #007a55; }
.biz-contract-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.biz-contract-actions > span { height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #191f28; }
.biz-contract-actions .is-primary { background: #7517d6; border-color: #7517d6; color: #fff; transition: background 300ms, border-color 300ms; }
.biz-contract[data-signed] .biz-contract-actions .is-primary { background: #009966; border-color: #009966; }
.biz-chat-input { position: absolute; left: 495px; bottom: 26px; }