:root {
  --navy: #172443;
  --navy-2: #22345f;
  --blue: #3d67e8;
  --blue-soft: #eef3ff;
  --ink: #182132;
  --muted: #738096;
  --line: #e5e9f1;
  --bg: #f6f7fa;
  --panel: #ffffff;
  --green: #169b6b;
  --green-soft: #e9f8f2;
  --orange: #e48a21;
  --orange-soft: #fff4e6;
  --red: #d94c55;
  --red-soft: #fff0f1;
  --shadow: 0 12px 32px rgba(24, 33, 50, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; z-index: 20; display: flex; flex-direction: column; background: var(--navy); color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; height: 82px; padding: 0 24px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--navy); font-weight: 800; }
.brand b, .brand small { display: block; }
.brand b { font-size: 18px; }
.brand small { margin-top: 2px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.main-nav { display: grid; gap: 6px; padding: 22px 14px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.68); text-align: left; }
.nav-item span { display: grid; place-items: center; width: 22px; font-size: 17px; }
.nav-item:hover, .nav-item.is-active { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-bottom { margin-top: auto; padding: 15px; }
.org-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.org-avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: #627fde; font-weight: 700; }
.org-card b, .org-card small { display: block; }
.org-card b { font-size: 13px; }
.org-card small { margin-top: 3px; color: rgba(255,255,255,.55); font-size: 11px; }
.org-card button { margin-left: auto; border: 0; background: transparent; color: rgba(255,255,255,.7); }
.main-area { width: calc(100% - 238px); margin-left: 238px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 14px 32px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.top-title span { color: var(--muted); font-size: 11px; }
.top-title h1 { margin: 4px 0 0; font-size: 22px; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .mobile-menu { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.icon-button { position: relative; font-size: 19px; }
.icon-button.has-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.notification-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: var(--red); color: #fff; font-size: 8px; font-weight: 800; }.notification-count[hidden] { display: none; }#notification-button.has-dot::after { display: none; }
.notification-panel { position: absolute; top: 70px; right: 30px; z-index: 45; width: min(410px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 22px 60px rgba(11,19,38,.2); }.notification-panel[hidden] { display: none; }.notification-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 19px 13px; }.notification-panel > header span { color: var(--blue); font-size: 9px; font-weight: 800; }.notification-panel > header h2 { margin: 3px 0 0; font-size: 17px; }.notification-panel > header button, .notification-panel > footer button { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 800; }.notification-filters { display: flex; gap: 6px; padding: 0 19px 12px; border-bottom: 1px solid var(--line); }.notification-filters button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 8px; }.notification-filters button.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }.notification-list { max-height: 390px; overflow-y: auto; }.notification-item { display: grid; grid-template-columns: 35px 1fr auto; align-items: start; gap: 10px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; }.notification-item:hover { background: #fafbfe; }.notification-item.is-unread { background: #f7f9ff; }.notification-item > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-style: normal; font-weight: 800; }.notification-item p { margin: 0; }.notification-item b, .notification-item small, .notification-item time { display: block; }.notification-item b { font-size: 11px; }.notification-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }.notification-item time { margin-top: 5px; color: #a1aabc; font-size: 8px; }.notification-item > em { color: var(--blue); font-size: 7px; font-style: normal; }.notification-empty { padding: 35px; color: var(--muted); font-size: 10px; text-align: center; }.notification-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--bg); }.notification-panel > footer span { color: var(--muted); font-size: 8px; }
.mobile-menu { display: none; }
.primary-button, .secondary-button { border-radius: 9px; padding: 10px 16px; font-weight: 700; }
.primary-button { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.primary-button:hover { background: #315bd6; }
.primary-button.large { padding: 13px 20px; }
.secondary-button { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.content { padding: 30px 32px 48px; }
.view { display: none; }
.view.is-active { display: block; animation: enter .25s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 32px; margin-bottom: 22px; overflow: hidden; border-radius: 18px; background: linear-gradient(120deg, var(--navy) 0%, #29437d 100%); color: #fff; box-shadow: var(--shadow); }
.hero-kicker { margin: 0 0 8px !important; color: #aabbea !important; font-size: 12px; }
.hero-row h2 { margin: 0 0 9px; font-size: clamp(22px, 2.5vw, 30px); }
.hero-row p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.lifecycle-section, .panel, .wide-panel { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.lifecycle-section { margin-bottom: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.section-heading span, .page-intro span { color: var(--blue); font-size: 11px; font-weight: 700; }
.section-heading h3 { margin: 4px 0 0; font-size: 17px; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.text-button:hover { color: var(--blue); }
.count-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red-soft); color: var(--red) !important; }
.lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); }
.lifecycle button { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 18px 12px 0; border: 0; background: transparent; text-align: left; }
.lifecycle button:not(:last-child)::after { content: "→"; position: absolute; right: 10px; color: #c2cad7; }
.lifecycle i { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-style: normal; font-weight: 800; }
.lifecycle b, .lifecycle small { display: block; white-space: nowrap; }
.lifecycle b { font-size: 13px; }
.lifecycle small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.lifecycle em { margin-left: auto; color: var(--green); font-size: 10px; font-style: normal; }
.lifecycle em.warning { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: 1.55fr .9fr; gap: 22px; margin-bottom: 22px; }
.dashboard-grid.lower { grid-template-columns: 1.55fr .9fr; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.category-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.category-card:hover { border-color: #9fb2ed; background: var(--blue-soft); }
.category-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.category-card b, .category-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-card b { font-size: 13px; }
.category-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.task-list { display: grid; }
.task-list button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.task-list button:last-child { border-bottom: 0; }
.task-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 10px; font-weight: 800; }
.task-icon.sign, .task-icon.renew { color: var(--blue); background: var(--blue-soft); }
.task-icon.pay { color: var(--red); background: var(--red-soft); }
.task-icon.check { color: var(--green); background: var(--green-soft); }
.task-list b, .task-list small { display: block; }
.task-list b { font-size: 12px; }
.task-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.task-list time { color: var(--muted); font-size: 10px; }
.task-list time.late { color: var(--red); font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 9px 12px; color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #fafbfe; }
.status { display: inline-block; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status.signed { background: var(--green-soft); color: var(--green); }
.status.wait { background: var(--blue-soft); color: var(--blue); }
.status.draft { background: var(--orange-soft); color: var(--orange); }
.status.late { background: var(--red-soft); color: var(--red); }
.payment-total span, .payment-total small { display: block; color: var(--muted); font-size: 11px; }
.payment-total strong { display: block; margin: 8px 0 5px; font-size: 25px; }
.payment-bar { height: 8px; margin: 17px 0; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.payment-bar span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.payment-stats { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 10px; }
.payment-stats span { display: flex; align-items: center; gap: 5px; }
.payment-stats i { width: 7px; height: 7px; border-radius: 50%; }
.payment-stats i.green { background: var(--green); }.payment-stats i.orange { background: var(--orange); }.payment-stats i.red { background: var(--red); }
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-intro h2 { margin: 4px 0 8px; font-size: 28px; }
.page-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.filter-row, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row { margin-bottom: 18px; }
.chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; }
.chip.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.template-card { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(24,33,50,.04); }
.template-card:hover { border-color: #9fb2ed; transform: translateY(-2px); transition: .2s; }
.template-card header { display: flex; align-items: center; justify-content: space-between; }
.template-card .template-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.template-card header span { color: var(--muted); font-size: 10px; }
.template-card h3 { margin: 16px 0 7px; font-size: 16px; }
.template-card p { min-height: 38px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.template-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.template-card footer span { color: var(--green); font-size: 10px; }
.template-card footer button { border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 800; }
.summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.summary-row > div { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.summary-row span, .summary-row strong { display: block; }
.summary-row span { color: var(--muted); font-size: 11px; }
.summary-row strong { margin-top: 7px; font-size: 22px; }
.summary-row .danger strong { color: var(--red); }
.wide-panel { padding: 22px; }
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.search-box { display: flex; align-items: center; gap: 8px; width: min(360px, 100%); padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; }
.payment-list { display: grid; gap: 10px; }
.payment-row { display: grid; grid-template-columns: 82px 1.5fr 1fr 120px 100px; align-items: center; gap: 16px; width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-align: left; transition: .18s ease; }
.payment-row:hover { border-color: #9fb2ed; box-shadow: 0 7px 18px rgba(61,103,232,.08); transform: translateY(-1px); }
.payment-row time { color: var(--muted); font-size: 11px; }.payment-row b { font-size: 12px; }.payment-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.payment-row strong { text-align: right; font-size: 13px; }
.obligation-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.board-column { padding: 17px; border-radius: 14px; background: #eef1f6; }
.board-column header { display: flex; justify-content: space-between; margin-bottom: 12px; }.board-column header b { font-size: 13px; }.board-column header span { color: var(--muted); font-size: 11px; }
.obligation-card { width: 100%; margin-top: 10px; padding: 15px; border: 0; border-radius: 11px; background: #fff; color: var(--ink); box-shadow: 0 5px 15px rgba(24,33,50,.05); text-align: left; transition: .18s ease; }.obligation-card:hover { box-shadow: 0 8px 20px rgba(61,103,232,.12); transform: translateY(-1px); }.obligation-card span { color: var(--blue); font-size: 9px; font-weight: 800; }.obligation-card b, .obligation-card small { display: block; }.obligation-card b { margin: 8px 0 5px; font-size: 12px; }.obligation-card small { color: var(--muted); font-size: 10px; }.obligation-card footer { display: flex; justify-content: space-between; margin-top: 13px; color: var(--muted); font-size: 9px; }
.vault-grid { display: grid; grid-template-columns: .9fr 1.2fr; gap: 20px; }
.profile-panel, .document-panel { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.profile-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800; }.profile-head b, .profile-head small { display: block; }.profile-head small { margin-top: 4px; color: var(--muted); font-size: 10px; }.profile-head em { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-style: normal; }
.profile-panel dl { margin: 14px 0 0; }.profile-panel dl div { display: grid; grid-template-columns: 130px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }.profile-panel dt { color: var(--muted); font-size: 10px; }.profile-panel dd { margin: 0; font-size: 12px; }
.secure-label { color: var(--green) !important; }.document-panel > button { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.document-panel > button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 800; }.document-panel b { font-size: 12px; }.document-panel small { color: var(--muted); font-size: 10px; }.document-panel em { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: 9px; font-style: normal; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(11,19,38,.45); backdrop-filter: blur(2px); }
.payment-drawer { position: fixed; inset: 0 0 0 auto; z-index: 65; display: flex; flex-direction: column; width: min(640px, 100%); background: #fff; box-shadow: -20px 0 60px rgba(11,19,38,.2); transform: translateX(105%); transition: transform .25s ease; }
.payment-drawer.is-open { transform: translateX(0); }
.payment-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 23px 26px 17px; border-bottom: 1px solid var(--line); }
.payment-drawer > header span { color: var(--blue); font-size: 10px; font-weight: 800; }.payment-drawer > header h2 { margin: 4px 0 0; font-size: 21px; }.payment-drawer > header button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--bg); font-size: 22px; }
.payment-detail-body { flex: 1; overflow-y: auto; padding: 22px 26px 36px; }
.payment-detail-hero { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px; padding: 20px; border-radius: 14px; background: var(--navy); color: #fff; }.payment-detail-hero div > span { color: #afc0ef; font-size: 9px; font-weight: 800; }.payment-detail-hero h3 { margin: 5px 0; font-size: 18px; }.payment-detail-hero p { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; }.payment-detail-hero strong { align-self: center; font-size: 20px; }.payment-detail-hero em { grid-column: 2; justify-self: end; }
.payment-progress { display: grid; grid-template-columns: repeat(4,1fr); margin: 20px 0; }.payment-progress div { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.payment-progress div:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 62%; width: 76%; height: 2px; background: var(--line); }.payment-progress i { position: relative; z-index: 1; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #edf0f5; font-size: 9px; font-style: normal; }.payment-progress .is-done { color: var(--green); font-weight: 800; }.payment-progress .is-done i, .payment-progress .is-done:not(:last-child)::after { background: var(--green); color: #fff; }
.payment-alert { padding: 14px 16px; margin-bottom: 16px; border: 1px solid #ffd5d8; border-radius: 11px; background: var(--red-soft); }.payment-alert b { color: var(--red); font-size: 11px; }.payment-alert p { margin: 5px 0 0; color: #87656a; font-size: 9px; line-height: 1.55; }
.payment-facts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.payment-facts div { padding: 13px 15px; border-bottom: 1px solid var(--line); }.payment-facts div:nth-child(odd) { border-right: 1px solid var(--line); }.payment-facts div:nth-last-child(-n+2) { border-bottom: 0; }.payment-facts span, .payment-facts b { display: block; }.payment-facts span { color: var(--muted); font-size: 9px; }.payment-facts b { margin-top: 5px; font-size: 11px; }
.payment-action-card { padding: 17px; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }.payment-action-card .section-heading { margin-bottom: 13px; }.payment-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.payment-action-grid #confirm-received, .payment-action-grid .trigger-confirm { grid-column: 1 / -1; }.payment-action-grid .trigger-confirm { border-color: #aebce1; background: var(--blue-soft); color: var(--blue); }.payment-action-grid .trigger-confirm[hidden] { display: none; }.payment-action-grid button:disabled { opacity: .45; cursor: not-allowed; }.receipt-upload { display: grid; align-content: center; min-height: 39px; padding: 8px 12px; overflow: hidden; border: 1px dashed #aebce1; border-radius: 9px; color: var(--blue); font-size: 10px; font-weight: 800; cursor: pointer; }.receipt-upload input { display: none; }.receipt-upload small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.promise-field { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }.promise-field input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }.payment-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }.payment-secondary-actions button { flex: 1; padding-left: 9px; padding-right: 9px; font-size: 10px; }
.payment-timeline { display: grid; }.payment-timeline > div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.payment-timeline > div:last-child { border-bottom: 0; }.payment-timeline time { color: var(--blue); font-size: 9px; font-weight: 800; }.payment-timeline p { margin: 0; }.payment-timeline b, .payment-timeline small { display: block; }.payment-timeline b { font-size: 10px; }.payment-timeline small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.obligation-drawer { position: fixed; inset: 0 0 0 auto; z-index: 65; display: flex; flex-direction: column; width: min(620px, 100%); background: #fff; box-shadow: -20px 0 60px rgba(11,19,38,.2); transform: translateX(105%); transition: transform .25s ease; }.obligation-drawer.is-open { transform: translateX(0); }.obligation-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 23px 26px 17px; border-bottom: 1px solid var(--line); }.obligation-drawer > header span { color: var(--blue); font-size: 10px; font-weight: 800; }.obligation-drawer > header h2 { margin: 4px 0 0; font-size: 21px; }.obligation-drawer > header button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--bg); font-size: 22px; }.obligation-detail-body { flex: 1; overflow-y: auto; padding: 22px 26px 36px; }.obligation-detail-hero { position: relative; padding: 20px; border-radius: 14px; background: linear-gradient(120deg,var(--navy),#29437d); color: #fff; }.obligation-detail-hero > span { color: #afc0ef; font-size: 9px; font-weight: 800; }.obligation-detail-hero h3 { margin: 5px 0; font-size: 18px; }.obligation-detail-hero p { margin: 0; color: rgba(255,255,255,.64); font-size: 10px; }.obligation-detail-hero em { position: absolute; top: 20px; right: 20px; }
.obligation-flow { display: grid; grid-template-columns: repeat(4,1fr); margin: 20px 0; }.obligation-flow div { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.obligation-flow div:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 62%; width: 76%; height: 2px; background: var(--line); }.obligation-flow i { position: relative; z-index: 1; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #edf0f5; font-size: 9px; font-style: normal; }.obligation-flow .is-done { color: var(--green); font-weight: 800; }.obligation-flow .is-done i, .obligation-flow .is-done:not(:last-child)::after { background: var(--green); color: #fff; }.obligation-rule { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }.obligation-rule div { padding: 13px 15px; border-bottom: 1px solid var(--line); }.obligation-rule div:nth-child(odd) { border-right: 1px solid var(--line); }.obligation-rule div:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }.obligation-rule span, .obligation-rule b { display: block; }.obligation-rule span { color: var(--muted); font-size: 9px; }.obligation-rule b { margin-top: 5px; font-size: 10px; line-height: 1.45; }
.obligation-action-card { padding: 17px; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }.obligation-action-card .section-heading { margin-bottom: 12px; }.obligation-note { display: grid; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 700; }.obligation-note textarea { width: 100%; padding: 10px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: none; }.obligation-note textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.evidence-upload { display: grid; gap: 4px; padding: 11px; margin-bottom: 10px; border: 1px dashed #aebce1; border-radius: 9px; color: var(--blue); font-size: 10px; font-weight: 800; cursor: pointer; }.evidence-upload input { width: 100%; color: var(--muted); font-size: 9px; }.evidence-upload small { color: var(--muted); font-size: 8px; font-weight: 400; }.obligation-action-card .block-button { width: 100%; }.review-card[hidden] { display: none; }.review-card > p { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.55; }.review-card > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
.payment-condition-builder { padding: 16px; margin: 4px 0 18px; border: 1px solid #ccd7f5; border-radius: 12px; background: #f8faff; }.payment-condition-builder[hidden], #regular-payday-field[hidden] { display: none !important; }.condition-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.condition-builder-head span { color: var(--blue); font-size: 9px; font-weight: 800; }.condition-builder-head h4 { margin: 4px 0 0; font-size: 13px; }.condition-builder-head button { padding: 7px 10px; font-size: 9px; }.condition-hint { padding: 10px 12px; margin: 12px 0; border-radius: 8px; background: var(--blue-soft); color: #4d5f91; font-size: 9px; line-height: 1.5; }
.allocation-summary { display: grid; grid-template-columns: repeat(3,1fr) auto; align-items: center; gap: 8px; padding: 12px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.allocation-summary div { padding-right: 8px; border-right: 1px solid var(--line); }.allocation-summary span, .allocation-summary strong { display: block; }.allocation-summary span { color: var(--muted); font-size: 8px; }.allocation-summary strong { margin-top: 4px; font-size: 11px; }.allocation-summary em { padding: 6px 8px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }.allocation-summary em.is-valid { background: var(--green-soft); color: var(--green); }.allocation-summary em.is-invalid { background: var(--red-soft); color: var(--red); }
.allocation-presets { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }.allocation-presets span { margin-right: 3px; color: var(--muted); font-size: 8px; }.allocation-presets button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 8px; }.allocation-presets button:hover { border-color: var(--blue); color: var(--blue); }.payment-stage-labels, .payment-stage { display: grid; grid-template-columns: .72fr 52px 82px 1fr .86fr 28px; gap: 7px; }.payment-stage-labels { padding: 0 7px 5px; color: var(--muted); font-size: 8px; }.payment-stage-list { display: grid; gap: 8px; }.payment-stage input, .payment-stage select { min-width: 0; padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 9px; }.payment-stage output { display: flex; align-items: center; justify-content: flex-end; color: var(--navy); font-size: 9px; font-weight: 800; }.payment-stage button { border: 0; border-radius: 7px; background: var(--red-soft); color: var(--red); }.allocation-error { margin: 10px 0 0; color: var(--red); font-size: 9px; font-weight: 700; }.allocation-error[hidden] { display: none; }.paper-payment-stages { padding-left: 18px; margin: 9px 0 0; }.paper-payment-stages li { margin: 5px 0; font-size: 9px; line-height: 1.5; }
@media (max-width: 620px) { .allocation-summary { grid-template-columns: 1fr 1fr; }.allocation-summary div:nth-child(2) { border-right: 0; }.payment-stage-labels { display: none; }.payment-stage { grid-template-columns: 1fr 70px 28px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }.payment-stage output { justify-content: flex-start; }.payment-stage select, .payment-stage input:nth-of-type(3) { grid-column: span 1; }.payment-stage button { grid-column: 3; grid-row: 1; }.payment-facts { grid-template-columns: 1fr; }.payment-facts div, .payment-facts div:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); }.payment-facts div:last-child { border-bottom: 0; } }

.allocation-summary { grid-template-columns: repeat(4,1fr) auto; }
.paper-payment-table-wrap { margin-top: 10px; overflow-x: auto; }
.paper-payment-table-wrap[hidden] { display: none; }
.paper-payment-table { width: 100%; border: 1px solid #bcc3d0; border-collapse: collapse; white-space: normal; }
.paper-payment-table th, .paper-payment-table td { padding: 6px 4px; border: 1px solid #cbd1dc; color: #252b37; font-size: 7px; line-height: 1.35; text-align: center; vertical-align: middle; }
.paper-payment-table thead th, .paper-payment-table tfoot th { background: #f0f2f6; font-weight: 800; }
.paper-payment-table td:last-child { min-width: 76px; text-align: left; }
.paper-payment-table tfoot td { background: #fafbfc; font-weight: 800; }
@media (max-width: 620px) { .allocation-summary { grid-template-columns: 1fr 1fr; }.allocation-summary div:nth-child(2), .allocation-summary div:nth-child(4) { border-right: 0; } }
.wizard { position: fixed; inset: 0 0 0 auto; z-index: 60; display: flex; flex-direction: column; width: min(560px, 100%); background: #fff; box-shadow: -20px 0 60px rgba(11,19,38,.2); transform: translateX(105%); transition: transform .25s ease; }
.wizard.is-open { transform: translateX(0); }
.wizard > header { display: flex; justify-content: space-between; padding: 24px 26px 17px; }.wizard > header span { color: var(--blue); font-size: 10px; font-weight: 800; }.wizard > header h2 { margin: 4px 0 0; font-size: 21px; }.wizard > header button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--bg); font-size: 22px; }
.wizard-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 0 26px 20px; border-bottom: 1px solid var(--line); }.wizard-progress span { height: 4px; border-radius: 999px; background: #e7eaf0; }.wizard-progress span.is-active { background: var(--blue); }
.wizard-body { flex: 1; overflow-y: auto; padding: 26px; }.wizard-step { display: none; }.wizard-step.is-active { display: block; }.step-caption { color: var(--blue); font-size: 10px; font-weight: 800; }.wizard-step h3 { margin: 8px 0 20px; font-size: 21px; }.wizard-categories { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.wizard-choice { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }.wizard-choice.is-selected { border-color: var(--blue); background: var(--blue-soft); }.wizard-choice b, .wizard-choice small { display: block; }.wizard-choice b { font-size: 12px; }.wizard-choice small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.wizard label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--muted); font-size: 10px; font-weight: 700; }.wizard input, .wizard select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); outline: none; }.wizard input:focus, .wizard select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.helper-box, .completion-note { padding: 14px; border-radius: 10px; background: var(--blue-soft); color: #405384; font-size: 11px; line-height: 1.6; }.review-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.review-box div { padding: 15px; border-bottom: 1px solid var(--line); }.review-box div:last-child { border-bottom: 0; }.review-box span, .review-box b { display: block; }.review-box span { color: var(--muted); font-size: 9px; }.review-box b { margin-top: 5px; font-size: 12px; }.completion-note { margin-top: 16px; background: var(--green-soft); color: #25664f; }
.wizard > footer { display: flex; justify-content: space-between; padding: 18px 26px; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 80; padding: 12px 18px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .2s; }.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 1150px) { .lifecycle { grid-template-columns: repeat(3,1fr); row-gap: 8px; }.lifecycle button::after { display:none; }.dashboard-grid, .dashboard-grid.lower { grid-template-columns: 1fr; }.template-grid { grid-template-columns: repeat(2,1fr); }.payment-row { grid-template-columns: 70px 1.5fr 1fr 100px; }.payment-row > :last-child { grid-column: 4; }.category-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px) { .sidebar { transform: translateX(-100%); transition: .25s; }.sidebar.is-open { transform: translateX(0); }.main-area { width: 100%; margin-left: 0; }.mobile-menu { display: block; }.topbar { padding: 12px 16px; }.content { padding: 20px 16px 40px; }.hero-row, .page-intro { align-items: flex-start; flex-direction: column; }.lifecycle { grid-template-columns: 1fr 1fr; }.template-grid, .summary-row, .obligation-board, .vault-grid { grid-template-columns: 1fr; }.category-grid { grid-template-columns: repeat(2,1fr); }.table-tools { align-items: flex-start; flex-direction: column; }.payment-row { grid-template-columns: 70px 1fr auto; }.payment-row > :nth-child(3) { grid-column: 2 / -1; }.payment-row > :last-child { grid-column: 3; }.top-actions .icon-button { display:none; } }
@media (max-width: 800px) { .top-actions #notification-button { display: block; }.notification-panel { top: 66px; right: 12px; } }
@media (max-width: 520px) { .top-title span { display:none; }.top-title h1 { font-size: 18px; }.primary-button { padding: 9px 12px; }.hero-row { padding: 24px 20px; }.lifecycle { grid-template-columns: 1fr; }.category-grid, .wizard-categories, .field-row { grid-template-columns: 1fr; }.profile-panel dl div { grid-template-columns: 1fr; gap: 5px; }.document-panel > button { grid-template-columns: 40px 1fr; }.document-panel em { display:none; } }

/* Contract editor and two-party room */
.workspace-heading { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 18px; margin-bottom: 20px; }
.workspace-heading > div > span { color: var(--blue); font-size: 10px; font-weight: 800; }
.workspace-heading h2 { margin: 5px 0 0; font-size: 23px; }
.back-button { justify-self: start; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.workspace-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.save-state { color: var(--green) !important; font-size: 10px !important; font-weight: 600 !important; }
.editor-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.editor-steps button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; }
.editor-steps button:last-child { border-right: 0; }
.editor-steps button.is-active { background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.editor-steps i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #edf0f5; font-style: normal; font-size: 9px; }
.editor-steps button.is-active i { background: var(--blue); color: #fff; }
.contract-workspace { display: grid; grid-template-columns: minmax(400px, .84fr) minmax(440px, 1.16fr); gap: 18px; align-items: start; }
.editor-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.editor-tab { display: none; min-height: 640px; padding: 25px; }
.editor-tab.is-active { display: block; animation: enter .2s ease; }
.editor-section-title { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.editor-section-title > span { color: var(--blue); font-size: 9px; font-weight: 800; }
.editor-section-title h3 { margin: 5px 0 6px; font-size: 19px; }
.editor-section-title p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.editor-field { display: grid; gap: 7px; margin-bottom: 15px; color: var(--muted); font-size: 10px; font-weight: 700; }
.editor-field input, .editor-field select, .editor-field textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); outline: none; resize: vertical; }
.editor-field input:focus, .editor-field select:focus, .editor-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.editor-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.party-block { padding: 16px; margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.party-block.unverified { background: #fff; border-style: dashed; }
.party-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.party-block-head b { font-size: 11px; }
.party-block-head span { padding: 5px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 8px; }
.party-block.unverified .party-block-head span { background: var(--orange-soft); color: var(--orange); }
.party-block dl { margin: 0; }
.party-block dl div { display: grid; grid-template-columns: 70px 1fr; padding: 6px 0; }
.party-block dt { color: var(--muted); font-size: 9px; }
.party-block dd { margin: 0; font-size: 10px; }
.clause-list { display: grid; gap: 9px; margin-top: 8px; }
.clause-list label { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.clause-list input { margin-top: 3px; accent-color: var(--blue); }
.clause-list b, .clause-list small { display: block; }
.clause-list b { font-size: 10px; }
.clause-list small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.upload-zone { display: grid; place-items: center; padding: 25px; border: 1px dashed #bcc6d7; border-radius: 12px; background: #fafbfe; text-align: center; }
.upload-zone > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 18px; }
.upload-zone b, .upload-zone small { display: block; }
.upload-zone b { font-size: 11px; }
.upload-zone small { margin: 5px 0 13px; color: var(--muted); font-size: 9px; }
.attachment-list { display: grid; gap: 8px; margin-top: 12px; }
.attachment-list > div { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.attachment-list > div > span { display: grid; place-items: center; height: 36px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 8px; font-weight: 800; }
.attachment-list p { margin: 0; }
.attachment-list b, .attachment-list small { display: block; }
.attachment-list b { font-size: 10px; }
.attachment-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.attachment-list button { border: 0; background: transparent; color: var(--muted); }
.validation-list { display: grid; gap: 10px; }
.validation-list > div { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border-radius: 10px; background: #fafbfe; }
.validation-list > div > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; font-size: 10px; font-weight: 800; }
.validation-list .ok > span { background: var(--green-soft); color: var(--green); }
.validation-list .notice > span { background: var(--orange-soft); color: var(--orange); }
.validation-list p { margin: 0; }
.validation-list b, .validation-list small { display: block; }
.validation-list b { font-size: 10px; }
.validation-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.block-button { width: 100%; margin-top: 17px; }
.editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-top: 1px solid var(--line); }
.editor-footer span { color: var(--muted); font-size: 10px; }
.document-preview { position: sticky; top: 102px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #e9edf3; box-shadow: var(--shadow); }
.document-preview > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.document-preview > header span, .document-preview > header b { display: block; }
.document-preview > header span { color: var(--muted); font-size: 8px; }
.document-preview > header b { margin-top: 3px; font-size: 11px; }
.document-preview > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.document-preview > header button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.document-preview > header em { color: var(--muted); font-size: 9px; font-style: normal; }
.paper-wrap { max-height: 760px; overflow: auto; padding: 28px; }
.contract-paper, .room-paper { width: min(100%, 680px); min-height: 900px; padding: 52px 58px; margin: 0 auto; background: #fff; color: #262626; box-shadow: 0 8px 24px rgba(24,33,50,.12); font-family: "Noto Serif KR", "Batang", serif; }
.paper-number { color: #8a8a8a; font-family: sans-serif; font-size: 8px; letter-spacing: .08em; text-align: right; }
.contract-paper > h1, .room-paper > h1 { margin: 38px 0 30px; font-size: 26px; letter-spacing: .08em; text-align: center; }
.contract-paper p, .room-paper p { font-size: 11px; line-height: 1.9; }
.paper-intro { margin-bottom: 30px; }
.contract-paper section { margin-top: 20px; }
.contract-paper section h2, .room-paper h2 { margin: 0 0 6px; font-size: 12px; }
.contract-paper section p { margin: 0; }
.paper-special { padding: 13px; border: 1px solid #d8d8d8; }
.paper-date { margin: 42px 0 25px; text-align: center; }
.signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.signature-grid > div { position: relative; padding: 14px; border-top: 1px solid #aaa; }
.signature-grid b { display: block; margin-bottom: 10px; font-size: 10px; }
.signature-grid p { margin: 3px 0; font-size: 9px; }
.signature-grid span { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px dashed #bbb; border-radius: 50%; color: #999; font-family: sans-serif; font-size: 8px; }
.paper-attachment { padding: 10px; margin-top: 25px; border-radius: 5px; background: #f4f4f4; font-size: 9px; }
.room-status { padding: 6px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange) !important; font-size: 9px !important; }
.room-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; padding: 15px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.room-progress > div { display: flex; align-items: center; gap: 9px; }
.room-progress i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf0f5; color: var(--muted); font-style: normal; font-size: 9px; }
.room-progress .done i { background: var(--green-soft); color: var(--green); }
.room-progress .current i { background: var(--blue); color: #fff; }
.room-progress b, .room-progress small { display: block; white-space: nowrap; }
.room-progress b { font-size: 10px; }
.room-progress small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.room-progress em { height: 1px; margin: 0 12px; background: var(--line); }
.room-layout { display: grid; grid-template-columns: minmax(520px, 1fr) 330px; gap: 16px; align-items: start; }
.room-main { min-width: 0; }
.party-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.party-status-row article { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.party-avatar { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; }
.party-avatar.a { background: var(--navy); }.party-avatar.b { background: var(--blue); }
.party-status-row b, .party-status-row small { display: block; }
.party-status-row b { font-size: 10px; }.party-status-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.party-status-row em { margin-left: auto; color: var(--green); font-size: 8px; font-style: normal; }
.room-document-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: #fff; }
.room-document-head span { color: var(--blue); font-size: 8px; }.room-document-head h3 { margin: 4px 0 0; font-size: 13px; }
.room-paper { width: 100%; min-height: 820px; box-shadow: none; border: 1px solid var(--line); border-top: 0; }
.change-block { padding: 14px; margin: 18px -14px; border-left: 3px solid var(--blue); background: var(--blue-soft); }
.change-block > span { color: var(--blue); font-family: sans-serif; font-size: 8px; font-weight: 800; }
.change-block div { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid #cfd9fa; color: #55668c; font-family: sans-serif; font-size: 8px; }
.change-block button { border: 0; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 8px; }
.room-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 45px; }
.room-signatures div { padding: 15px; border: 1px dashed #bbb; text-align: center; }
.room-signatures b, .room-signatures span { display: block; }.room-signatures b { font-size: 9px; }.room-signatures span { margin-top: 6px; color: #999; font-family: sans-serif; font-size: 8px; }
.activity-panel { position: sticky; top: 102px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.activity-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.activity-tabs button { padding: 13px; border: 0; background: #fff; color: var(--muted); font-size: 10px; }
.activity-tabs button.is-active { color: var(--blue); box-shadow: inset 0 -2px var(--blue); font-weight: 800; }
.activity-list { min-height: 260px; padding: 16px; }
.activity-list article { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px; }
.activity-list article > div { flex: 1; }
.activity-list b { font-size: 9px; }.activity-list time { margin-left: 5px; color: var(--muted); font-size: 8px; }.activity-list p { padding: 9px; margin: 6px 0 0; border-radius: 9px; background: #f3f5f8; font-size: 9px; line-height: 1.55; }
.system-activity { padding: 8px; margin: 8px 0 15px; border-radius: 8px; background: var(--blue-soft); color: #536695; font-size: 8px; text-align: center; }
.comment-box { padding: 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comment-box textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; resize: none; font: inherit; font-size: 10px; }
.comment-box > div { display: flex; justify-content: space-between; margin-top: 8px; }
.room-side-section { padding: 15px; border-bottom: 1px solid var(--line); }
.room-side-section > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.room-side-section > button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 10px 0 0; border: 0; background: transparent; text-align: left; }
.room-side-section i { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 8px; font-style: normal; font-weight: 800; }
.room-side-section p { margin: 0; }.room-side-section b, .room-side-section small { display: block; }.room-side-section b { font-size: 9px; }.room-side-section small { margin-top: 3px; color: var(--muted); font-size: 8px; }.room-side-section em { color: var(--muted); font-style: normal; }
.schedule-summary { padding: 9px 0; border-bottom: 1px solid var(--line); }.schedule-summary:last-child { border-bottom: 0; }.schedule-summary b, .schedule-summary small { display: block; }.schedule-summary b { font-size: 9px; }.schedule-summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
@media (max-width: 1180px) { .contract-workspace { grid-template-columns: 1fr; }.document-preview { position: static; }.paper-wrap { max-height: none; }.room-layout { grid-template-columns: 1fr; }.activity-panel { position: static; }.workspace-heading { grid-template-columns: auto 1fr; }.workspace-actions { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 800px) { .editor-steps { grid-template-columns: 1fr 1fr; }.editor-steps button:nth-child(2) { border-right: 0; }.editor-steps button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.contract-paper, .room-paper { padding: 35px 28px; }.room-progress { grid-template-columns: 1fr 1fr; gap: 12px; }.room-progress em { display: none; }.party-status-row { grid-template-columns: 1fr; }.workspace-heading { grid-template-columns: 1fr; }.back-button { order: -1; }.workspace-actions { grid-column: auto; flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 520px) { .editor-field-row, .signature-grid, .room-signatures { grid-template-columns: 1fr; }.contract-paper, .room-paper { padding: 28px 20px; }.contract-paper > h1, .room-paper > h1 { font-size: 21px; }.paper-wrap { padding: 12px; }.editor-tab { padding: 20px; }.room-document-head { align-items: flex-start; flex-direction: column; } }

/* Electronic signature and completed contract package */
.sign-modal { position: fixed; top: 50%; left: 50%; z-index: 70; display: flex; flex-direction: column; width: min(620px, calc(100% - 28px)); max-height: calc(100vh - 28px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 28px 80px rgba(11,19,38,.28); opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.98); transition: .2s ease; }
.sign-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.sign-modal > header { display: flex; align-items: center; justify-content: space-between; padding: 21px 24px 16px; border-bottom: 1px solid var(--line); }
.sign-modal > header span { color: var(--blue); font-size: 9px; font-weight: 800; }
.sign-modal > header h2 { margin: 4px 0 0; font-size: 20px; }
.sign-modal > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--bg); color: var(--muted); font-size: 21px; }
.sign-body { overflow-y: auto; padding: 20px 24px; }
.sign-contract-summary { padding: 14px; border-radius: 10px; background: var(--blue-soft); }
.sign-contract-summary span, .sign-contract-summary b, .sign-contract-summary small { display: block; }
.sign-contract-summary span { color: var(--blue); font-size: 8px; font-weight: 800; }
.sign-contract-summary b { margin-top: 5px; font-size: 13px; }
.sign-contract-summary small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.identity-check { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.identity-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.identity-check b, .identity-check small { display: block; }.identity-check b { font-size: 10px; }.identity-check small { margin-top: 4px; color: var(--muted); font-size: 8px; }.identity-check em { margin-left: auto; color: var(--green); font-size: 8px; font-style: normal; }
.sign-consent { display: flex; align-items: flex-start; gap: 9px; padding: 14px 0; color: #536075; font-size: 10px; line-height: 1.6; cursor: pointer; }
.sign-consent input { margin-top: 3px; accent-color: var(--blue); }
.signature-pad-wrap { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfe; }
.signature-pad-wrap > div { display: flex; justify-content: space-between; margin-bottom: 10px; }.signature-pad-wrap b { font-size: 10px; }.signature-pad-wrap button { border: 0; background: transparent; color: var(--blue); font-size: 9px; }
#signature-pad { display: block; width: 100%; height: 170px; border: 1px dashed #bcc6d7; border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none; }
.signature-pad-wrap > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; text-align: center; }
.sign-security { padding: 11px; margin-top: 12px; border-radius: 9px; background: var(--green-soft); color: #376a59; font-size: 8px; line-height: 1.6; }
.sign-modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 24px; border-top: 1px solid var(--line); }
.completed-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px 26px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(120deg, #0f6f55 0%, #179d70 100%); color: #fff; box-shadow: var(--shadow); }
.complete-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 22px; }
.completed-hero span { color: rgba(255,255,255,.75); font-size: 9px; }
.completed-hero h2 { margin: 5px 0 6px; font-size: 23px; }.completed-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; }
.completed-actions { display: flex; gap: 8px; }.completed-actions .secondary-button { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; }.completed-actions .primary-button { border-color: #fff; background: #fff; color: #0f6f55; }
.completed-grid { display: grid; grid-template-columns: minmax(520px, 1fr) 320px; gap: 18px; align-items: start; }
.completed-main { display: grid; gap: 18px; }
.completed-side { display: grid; gap: 12px; }
.completion-panel { padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.contract-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.contract-facts div { padding: 14px 8px; border-bottom: 1px solid var(--line); }.contract-facts div:nth-child(odd) { border-right: 1px solid var(--line); }
.contract-facts dt { color: var(--muted); font-size: 8px; }.contract-facts dd { margin: 5px 0 0; font-size: 10px; font-weight: 700; }
.hash-box { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 12px; margin-top: 15px; border-radius: 9px; background: #f5f7fa; }
.hash-box span { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }.hash-box code { overflow: hidden; color: #536075; font-size: 9px; text-overflow: ellipsis; }.hash-box button { border: 0; background: transparent; color: var(--blue); font-size: 8px; }
.generated-schedule { display: grid; }
.schedule-row { display: grid; grid-template-columns: 48px 1fr 110px 80px; align-items: center; gap: 10px; padding: 12px 5px; border-bottom: 1px solid var(--line); }
.schedule-row:last-child { border-bottom: 0; }.schedule-row time { color: var(--muted); font-size: 9px; }.schedule-row b, .schedule-row small { display: block; }.schedule-row b { font-size: 9px; }.schedule-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }.schedule-row strong { font-size: 10px; text-align: right; }.schedule-row em { padding: 5px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-style: normal; text-align: center; }
.audit-timeline { display: grid; padding-left: 7px; }
.audit-timeline > div { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 0 0 19px; }.audit-timeline > div:not(:last-child)::before { content: ""; position: absolute; top: 21px; left: 10px; width: 1px; height: calc(100% - 4px); background: #cfe9df; }
.audit-timeline i { z-index: 1; display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; }
.audit-timeline p { margin: 1px 0 0; }.audit-timeline b, .audit-timeline small { display: block; }.audit-timeline b { font-size: 9px; }.audit-timeline small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.signer-panel > span, .package-panel > span, .notice-setting > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 800; }
.signer-panel > div { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }.signer-panel > div:last-child { border-bottom: 0; }.signer-panel p { margin: 0; }.signer-panel b, .signer-panel small { display: block; }.signer-panel b { font-size: 9px; }.signer-panel small { margin-top: 3px; color: var(--muted); font-size: 8px; }.signer-panel em { margin-left: auto; color: var(--green); font-size: 8px; font-style: normal; }
.package-panel > button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.package-panel > button:last-child { border-bottom: 0; }.package-panel i { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 7px; font-style: normal; font-weight: 800; }.package-panel p { margin: 0; }.package-panel b, .package-panel small { display: block; }.package-panel b { font-size: 9px; }.package-panel small { margin-top: 3px; color: var(--muted); font-size: 8px; }.package-panel em { color: var(--muted); font-style: normal; }
.notice-setting > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }.notice-setting > div:last-child { border-bottom: 0; }.notice-setting p { margin: 0; }.notice-setting b, .notice-setting small { display: block; }.notice-setting b { font-size: 9px; }.notice-setting small { margin-top: 3px; color: var(--muted); font-size: 8px; }.toggle-on { padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; }
.side-action { width: 100%; }
@media (max-width: 1100px) { .completed-grid { grid-template-columns: 1fr; }.completed-side { grid-template-columns: repeat(2, 1fr); }.side-action { align-self: stretch; } }
@media (max-width: 800px) { .completed-hero { grid-template-columns: auto 1fr; }.completed-actions { grid-column: 1 / -1; }.completed-side { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .completed-hero { grid-template-columns: 1fr; }.complete-mark { width: 42px; height: 42px; }.completed-actions { flex-direction: column; }.contract-facts { grid-template-columns: 1fr; }.contract-facts div:nth-child(odd) { border-right: 0; }.schedule-row { grid-template-columns: 42px 1fr auto; }.schedule-row strong { grid-column: 2; text-align: left; }.schedule-row em { grid-column: 3; grid-row: 1 / 3; }.sign-modal > header, .sign-body, .sign-modal > footer { padding-left: 17px; padding-right: 17px; } }

/* Progressive onboarding */
.app-shell.is-locked { display: none; }
.auth-gate { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 24px; background: radial-gradient(circle at 18% 16%, #e8eeff 0, transparent 35%), radial-gradient(circle at 84% 82%, #e8f8f2 0, transparent 30%), #f7f8fb; }
.auth-gate.is-hidden { display: none; }
.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--navy); }.auth-brand .brand-mark { background: var(--navy); color: #fff; }.auth-brand b, .auth-brand small { display: block; }.auth-brand b { font-size: 15px; }.auth-brand small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.auth-card { align-self: center; justify-self: center; width: min(480px, 100%); padding: 34px; border: 1px solid rgba(229,233,241,.9); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(24,33,50,.1); }
.auth-step { display: none; }.auth-step.is-active { display: block; animation: enter .25s ease; }.auth-kicker { color: var(--blue); font-size: 9px; font-weight: 800; }.auth-step h1 { margin: 8px 0 9px; font-size: 25px; }.auth-step > p { margin: 0 0 23px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-choice-list { display: grid; gap: 10px; }.auth-choice-list > button { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }.auth-choice-list > button:hover { border-color: #9fb2ed; background: var(--blue-soft); }.auth-choice-list i { display: grid; place-items: center; height: 42px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); font-size: 17px; font-style: normal; }.auth-choice-list b, .auth-choice-list small { display: block; }.auth-choice-list b { font-size: 11px; }.auth-choice-list small { margin-top: 5px; color: var(--muted); font-size: 9px; }.auth-choice-list em { color: var(--muted); font-style: normal; }
.auth-login-link { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--blue); font-size: 10px; }.auth-back { padding: 0; margin-bottom: 18px; border: 0; background: transparent; color: var(--muted); font-size: 9px; }
.auth-field { display: grid; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 9px; font-weight: 700; }.auth-field > input, .auth-field > div { width: 100%; }.auth-field input, .auth-field select { padding: 12px; border: 1px solid var(--line); background: #fff; outline: 0; }.auth-field > input { border-radius: 9px; }.auth-field > div { display: grid; grid-template-columns: 78px 1fr; }.auth-field > div select { border-radius: 9px 0 0 9px; }.auth-field > div input { border-left: 0; border-radius: 0 9px 9px 0; }.auth-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.auth-consent { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0 16px; color: var(--muted); font-size: 9px; line-height: 1.5; }.auth-consent input { margin-top: 2px; accent-color: var(--blue); }.auth-primary { width: 100%; padding: 12px; }
.otp-field { position: relative; display: block !important; }.otp-field input { width: 100%; border: 1px solid var(--line) !important; border-radius: 9px !important; font-size: 20px; font-weight: 700; letter-spacing: .35em; text-align: center; }.otp-field span { position: absolute; right: 11px; top: 50%; color: var(--red); font-size: 8px; transform: translateY(-50%); }.auth-helper { padding: 10px; margin: -4px 0 15px; border-radius: 8px; background: var(--blue-soft); color: #536695; font-size: 8px; }
.persona-list { display: grid; gap: 9px; margin-bottom: 16px; }.persona-list button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }.persona-list button.is-selected { border-color: var(--blue); background: var(--blue-soft); }.persona-icon { display: grid; place-items: center; height: 38px; border-radius: 10px; background: #edf0f5; color: var(--navy); font-size: 8px; font-weight: 800; }.persona-icon.business { background: var(--orange-soft); color: var(--orange); }.persona-icon.company { background: var(--green-soft); color: var(--green); }.persona-list b, .persona-list small { display: block; }.persona-list b { font-size: 10px; }.persona-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }.persona-list em { color: var(--blue); font-size: 10px; font-style: normal; }
.auth-gate > footer { align-self: end; color: var(--muted); font-size: 8px; text-align: center; }

/* Relationship-scoped contract archive */
.relationship-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; margin-bottom: 16px; border: 1px solid #cfdafa; border-radius: 13px; background: var(--blue-soft); }.relationship-strip > div { display: flex; align-items: center; gap: 11px; }.relationship-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; }.relationship-strip p { margin: 0; }.relationship-strip b, .relationship-strip small { display: block; }.relationship-strip b { font-size: 11px; }.relationship-strip small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.relationship-hero { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 15px; padding: 19px 22px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.relationship-parties { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 8px; }.relationship-logo.large { width: 42px; height: 42px; border-radius: 12px; background: var(--navy); }.relationship-logo.mono { background: var(--blue); }.relation-symbol { color: var(--muted); font-size: 13px; }.relationship-parties > div { margin-left: 6px; }.relationship-parties > div > span { color: var(--blue); font-size: 8px; font-weight: 800; }.relationship-parties h2 { margin: 4px 0 4px; font-size: 17px; }.relationship-parties p { margin: 0; color: var(--muted); font-size: 8px; }.relationship-session { padding-left: 16px; border-left: 1px solid var(--line); text-align: right; }.relationship-session span, .relationship-session b { display: block; }.relationship-session span { color: var(--green); font-size: 8px; }.relationship-session b { margin: 4px 0 5px; font-size: 17px; font-variant-numeric: tabular-nums; }.relationship-session button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 8px; }
.relationship-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }.relationship-summary > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.relationship-summary span, .relationship-summary strong, .relationship-summary small { display: block; }.relationship-summary span { color: var(--muted); font-size: 8px; }.relationship-summary strong { margin: 5px 0 3px; font-size: 19px; }.relationship-summary small { color: var(--muted); font-size: 8px; }.relationship-summary .warning strong { color: var(--red); }
.relationship-layout { display: grid; grid-template-columns: minmax(560px, 1fr) 310px; gap: 16px; align-items: start; }.relation-main-panel, .relation-side > section { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.relation-side { display: grid; gap: 12px; }.contract-family { position: relative; padding: 4px 0 9px; }.contract-family.second { padding-top: 16px; margin-top: 7px; border-top: 1px solid var(--line); }.family-root, .family-child { position: relative; display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.family-child { width: calc(100% - 38px); margin: 9px 0 0 38px; background: #fafbfe; }.family-child::before { content: ""; position: absolute; left: -20px; top: -10px; width: 20px; height: 34px; border-left: 1px solid #cbd3e1; border-bottom: 1px solid #cbd3e1; border-radius: 0 0 0 8px; }.family-icon { display: grid; place-items: center; height: 38px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-weight: 800; }.family-root > div > span, .family-child > div > span { color: var(--blue); font-size: 8px; font-weight: 700; }.family-root h4, .family-child h4 { margin: 4px 0 3px; font-size: 11px; }.family-root p, .family-child p { margin: 0; color: var(--muted); font-size: 8px; }.family-root > button, .family-child > button { border: 0; background: transparent; color: var(--blue); font-size: 8px; }
.relation-payment { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }.relation-payment > span { color: var(--muted); font-size: 8px; }.relation-payment p { margin: 0; }.relation-payment b, .relation-payment small { display: block; }.relation-payment b { font-size: 9px; }.relation-payment small { margin-top: 3px; color: var(--muted); font-size: 8px; }.relation-payment em { padding: 4px 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-style: normal; }.relation-payment.warning em { background: var(--red-soft); color: var(--red); }
.relation-file { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.relation-file i { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 7px; font-style: normal; font-weight: 800; }.relation-file p { margin: 0; }.relation-file b, .relation-file small { display: block; }.relation-file b { font-size: 9px; }.relation-file small { margin-top: 3px; color: var(--muted); font-size: 8px; }.relation-file em { color: var(--muted); font-style: normal; }.relation-security { background: var(--green-soft) !important; border-color: #c7e8dc !important; box-shadow: none !important; }.relation-security span { color: var(--green); font-size: 8px; font-weight: 800; }.relation-security p { margin: 6px 0 0; color: #376a59; font-size: 8px; line-height: 1.65; }
.unlock-modal { position: fixed; top: 50%; left: 50%; z-index: 70; width: min(470px, calc(100% - 28px)); overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 28px 80px rgba(11,19,38,.28); opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.98); transition: .2s ease; }.unlock-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }.unlock-modal > header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 20px; border-bottom: 1px solid var(--line); }.lock-symbol { display: grid; place-items: center; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 17px; }.unlock-modal > header div span { color: var(--blue); font-size: 8px; font-weight: 800; }.unlock-modal > header h2 { margin: 4px 0 0; font-size: 17px; }.unlock-modal > header button { width: 31px; height: 31px; border: 0; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 19px; }.unlock-body { padding: 20px; }.unlock-scope { padding: 13px; margin-bottom: 15px; border-radius: 9px; background: var(--blue-soft); }.unlock-scope span, .unlock-scope b, .unlock-scope small { display: block; }.unlock-scope span { color: var(--blue); font-size: 8px; }.unlock-scope b { margin-top: 5px; font-size: 10px; }.unlock-scope small { margin-top: 4px; color: var(--muted); font-size: 8px; }.unlock-body label { display: grid; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }.unlock-body label > div { position: relative; }.unlock-body input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 17px; font-weight: 700; letter-spacing: .3em; text-align: center; }.unlock-body label > div span { position: absolute; right: 10px; top: 50%; color: var(--red); font-size: 8px; transform: translateY(-50%); }.unlock-body > p { margin: 11px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.unlock-modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .relationship-layout { grid-template-columns: 1fr; }.relation-side { grid-template-columns: repeat(2, 1fr); }.relation-security { grid-column: 1 / -1; } }
@media (max-width: 800px) { .relationship-hero { grid-template-columns: 1fr; }.relationship-parties { grid-template-columns: auto auto auto 1fr; }.relationship-session { padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; text-align: left; }.relationship-summary { grid-template-columns: 1fr 1fr; }.relationship-strip { align-items: flex-start; flex-direction: column; }.family-root, .family-child { grid-template-columns: 38px 1fr auto; }.family-root > button, .family-child > button { grid-column: 2; justify-self: start; }.relation-side { grid-template-columns: 1fr; }.relation-security { grid-column: auto; } }
@media (max-width: 520px) { .auth-gate { padding: 14px; }.auth-card { padding: 24px 19px; }.auth-step h1 { font-size: 22px; }.relationship-summary { grid-template-columns: 1fr; }.relationship-parties { grid-template-columns: auto auto auto; }.relationship-parties > div { grid-column: 1 / -1; margin: 7px 0 0; }.family-root, .family-child { grid-template-columns: 34px 1fr; }.family-root > em, .family-child > em { grid-column: 2; justify-self: start; }.family-root > button, .family-child > button { grid-column: 2; }.family-child { width: calc(100% - 22px); margin-left: 22px; } }

/* Persona isolation and invited participant mode */
.sidebar-bottom { position: relative; }
.persona-switcher { position: absolute; left: 15px; right: 15px; bottom: 78px; z-index: 25; padding: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 16px 36px rgba(0,0,0,.25); }
.persona-switcher > span { display: block; padding: 4px 6px 8px; color: var(--muted); font-size: 8px; font-weight: 800; }
.persona-switcher button { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 9px 7px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.persona-switcher button:hover, .persona-switcher button.is-active { background: var(--blue-soft); }
.persona-switcher i { display: grid; place-items: center; height: 31px; border-radius: 8px; background: #edf0f5; color: var(--navy); font-size: 7px; font-style: normal; font-weight: 800; }
.persona-switcher p { margin: 0; }.persona-switcher b, .persona-switcher small { display: block; }.persona-switcher b { font-size: 8px; }.persona-switcher small { margin-top: 3px; color: var(--muted); font-size: 7px; }.persona-switcher em { color: var(--blue); font-size: 9px; font-style: normal; }
.app-shell.guest-mode .sidebar { display: none; }
.app-shell.guest-mode .main-area { width: 100%; margin-left: 0; }
.app-shell.guest-mode .mobile-menu, .app-shell.guest-mode [data-open-wizard], .app-shell.guest-mode .top-actions .icon-button { display: none !important; }
.app-shell.guest-mode #make-amendment { display: none !important; }
.app-shell.guest-mode .topbar { padding-left: 24px; }
.app-shell.guest-mode .notification-panel { display: none !important; }
.app-shell.guest-mode .relationship-hero > .back-button { display: none; }
.app-shell.guest-mode [data-view-link="payments"] { display: none; }
.guest-exit { display: none; }
.app-shell.guest-mode .guest-exit { display: inline-flex; }

/* Contract-pack-specific fields */
.contract-pack-banner { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 12px; margin-bottom: 15px; border-radius: 10px; background: var(--blue-soft); }
.contract-pack-banner > span { display: grid; place-items: center; height: 38px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 8px; font-weight: 800; }.contract-pack-banner p { margin: 0; }.contract-pack-banner b, .contract-pack-banner small { display: block; }.contract-pack-banner b { font-size: 10px; }.contract-pack-banner small { margin-top: 4px; color: var(--muted); font-size: 8px; }.contract-pack-banner em { color: var(--green); font-size: 8px; font-style: normal; }
.template-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.template-fields .editor-field.full { grid-column: 1 / -1; }
.template-warning { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding: 10px; margin: 0 0 14px; border-radius: 8px; background: var(--orange-soft); color: #8a5b20; font-size: 8px; line-height: 1.55; }.template-warning b { flex: 0 0 auto; }
.dynamic-paper-section { padding: 11px; margin-top: 18px; border-left: 2px solid #7c8caf; background: #f6f7f9; }.dynamic-paper-section h2 { margin: 0 0 5px !important; }.dynamic-paper-section p { margin: 0; }
@media (max-width: 520px) { .template-fields { grid-template-columns: 1fr; }.template-fields .editor-field.full { grid-column: auto; }.contract-pack-banner { grid-template-columns: 34px 1fr; }.contract-pack-banner em { grid-column: 2; } }

/* Organization members and delegated contract authority */
.nav-item[hidden] { display: none; }
.authority-banner { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 14px; padding: 20px; margin-bottom: 16px; border: 1px solid #cbd7f7; border-radius: 15px; background: linear-gradient(100deg,#f8faff,#fff); }
.authority-seal { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; }
.authority-banner div > span { color: var(--blue); font-size: 9px; font-weight: 800; }.authority-banner h3 { margin: 4px 0; font-size: 15px; }.authority-banner p { margin: 0; color: var(--muted); font-size: 9px; }
.member-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 17px; }.member-summary > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.member-summary span, .member-summary strong, .member-summary small { display: block; }.member-summary span { color: var(--muted); font-size: 9px; }.member-summary strong { margin: 6px 0 3px; font-size: 19px; }.member-summary small { color: var(--muted); font-size: 8px; }
.members-layout { display: grid; grid-template-columns: 1.65fr .75fr; gap: 17px; }.member-panel, .approval-panel { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.member-list { display: grid; }
.member-row { display: grid; grid-template-columns: 38px 1.25fr 1fr 1fr .75fr auto auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.member-row:last-child { border-bottom: 0; }.member-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800; }.member-identity b, .member-identity small, .member-row > div > span, .member-row > div > b { display: block; }.member-identity b, .member-row > div > b { font-size: 10px; }.member-identity small, .member-row > div > span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.approval-rule { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }.approval-rule i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-style: normal; font-weight: 800; }.approval-rule p { margin: 0; }.approval-rule b, .approval-rule small { display: block; }.approval-rule b { font-size: 10px; }.approval-rule small { margin-top: 4px; color: var(--muted); font-size: 8px; }.approval-rule em { color: var(--blue); font-size: 8px; font-style: normal; font-weight: 800; }.approval-rule.critical i { background: var(--red-soft); color: var(--red); }.approval-rule.critical em { color: var(--red); }.authority-note { padding: 11px; margin-top: 12px; border-radius: 9px; background: var(--green-soft); color: #356e59; font-size: 8px; line-height: 1.5; }
.member-drawer { position: fixed; inset: 0 0 0 auto; z-index: 65; display: flex; flex-direction: column; width: min(560px,100%); background: #fff; box-shadow: -20px 0 60px rgba(11,19,38,.2); transform: translateX(105%); transition: transform .25s ease; }.member-drawer.is-open { transform: translateX(0); }.member-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 23px 26px 17px; border-bottom: 1px solid var(--line); }.member-drawer > header span { color: var(--blue); font-size: 10px; font-weight: 800; }.member-drawer > header h2 { margin: 4px 0 0; font-size: 21px; }.member-drawer > header button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--bg); font-size: 22px; }.member-drawer-body { flex: 1; overflow-y: auto; padding: 22px 26px; }
.delegation-warning { padding: 13px; margin-bottom: 17px; border-radius: 10px; background: var(--blue-soft); }.delegation-warning b, .delegation-warning span { display: block; }.delegation-warning b { color: var(--blue); font-size: 10px; }.delegation-warning span { margin-top: 4px; color: #53638f; font-size: 8px; }.member-drawer-body > label, .member-field-row label { display: grid; gap: 6px; margin-bottom: 13px; color: var(--muted); font-size: 9px; font-weight: 700; }.member-drawer-body input, .member-drawer-body select { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; outline: none; }.member-drawer-body input:focus, .member-drawer-body select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.member-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.permission-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; margin: 2px 0 14px; border: 1px solid var(--line); border-radius: 10px; }.permission-checks legend { padding: 0 5px; color: var(--muted); font-size: 9px; font-weight: 700; }.permission-checks label { display: flex; align-items: center; gap: 7px; font-size: 9px; }.permission-checks input { width: auto; }.delegation-summary { padding: 12px; border-radius: 9px; background: var(--green-soft); color: #356e59; font-size: 9px; font-weight: 800; }.member-drawer > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 26px; border-top: 1px solid var(--line); }
@media (max-width: 1050px) { .members-layout { grid-template-columns: 1fr; }.member-row { grid-template-columns: 38px 1.2fr 1fr auto; }.member-row > div:nth-of-type(2), .member-row > div:nth-of-type(3) { display: none; }.member-summary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { .authority-banner { grid-template-columns: 44px 1fr; }.authority-banner > em, .authority-banner > button { grid-column: 2; justify-self: start; }.member-row { grid-template-columns: 36px 1fr auto; }.member-row > div:not(.member-identity), .member-row > em { display: none; }.member-field-row, .permission-checks { grid-template-columns: 1fr; } }

/* Internal approval inbox */
.approval-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 17px; }.approval-summary > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.approval-summary span, .approval-summary strong, .approval-summary small { display: block; }.approval-summary span { color: var(--muted); font-size: 9px; }.approval-summary strong { margin: 6px 0 3px; font-size: 19px; }.approval-summary small { color: var(--muted); font-size: 8px; }
.approval-workspace { display: grid; grid-template-columns: .95fr 1.25fr; gap: 17px; align-items: start; }.approval-inbox, .approval-detail { min-height: 500px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.approval-request-list { display: grid; gap: 8px; }.approval-request { display: grid; grid-template-columns: 58px 1fr auto auto; align-items: center; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); text-align: left; }.approval-request:hover, .approval-request.is-selected { border-color: #9fb2ed; background: var(--blue-soft); }.approval-type { color: var(--blue); font-size: 8px; font-weight: 800; }.approval-request div b, .approval-request div small, .approval-request div em { display: block; }.approval-request div b { font-size: 11px; }.approval-request div small { margin-top: 4px; color: var(--muted); font-size: 8px; }.approval-request div em { margin-top: 5px; color: var(--orange); font-size: 8px; font-style: normal; }.approval-request > strong { font-size: 10px; }.approval-request > i { font-style: normal; }
.approval-empty { display: grid; place-items: center; align-content: center; min-height: 450px; color: var(--muted); text-align: center; }.approval-empty span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-size: 20px; }.approval-empty b { color: var(--ink); font-size: 13px; }.approval-empty small { max-width: 260px; margin-top: 6px; font-size: 9px; line-height: 1.5; }
.approval-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.approval-detail > header span { color: var(--blue); font-size: 9px; font-weight: 800; }.approval-detail > header h3 { margin: 5px 0; font-size: 18px; }.approval-detail > header p { margin: 0; color: var(--muted); font-size: 9px; }.approval-limit-check { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 14px 0; border-radius: 9px; background: var(--orange-soft); }.approval-limit-check i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: var(--orange); font-style: normal; font-weight: 800; }.approval-limit-check p { margin: 0; }.approval-limit-check b, .approval-limit-check small { display: block; }.approval-limit-check b { font-size: 9px; }.approval-limit-check small { margin-top: 3px; color: #8a683b; font-size: 8px; }.approval-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }.approval-facts div { padding: 11px; border-bottom: 1px solid var(--line); }.approval-facts div:nth-child(odd) { border-right: 1px solid var(--line); }.approval-facts div:nth-last-child(-n+2) { border-bottom: 0; }.approval-facts dt { color: var(--muted); font-size: 8px; }.approval-facts dd { margin: 4px 0 0; font-size: 9px; font-weight: 800; }.approval-detail > section > span { color: var(--blue); font-size: 8px; font-weight: 800; }.approval-detail > section h4 { margin: 4px 0 8px; font-size: 11px; }.approval-detail > section ul { padding: 11px 11px 11px 27px; margin: 0 0 14px; border-radius: 9px; background: var(--bg); }.approval-detail > section li { margin: 5px 0; font-size: 9px; }.approval-comment { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }.approval-comment textarea { padding: 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; outline: none; }.approval-comment textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.approval-detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }.approval-history { margin-top: 17px; border-top: 1px solid var(--line); }.approval-history > span { display: block; padding-top: 13px; }.approval-history > div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }.approval-history time { color: var(--blue); font-size: 8px; font-weight: 800; }.approval-history p { margin: 0; }.approval-history b, .approval-history small { display: block; }.approval-history b { font-size: 9px; }.approval-history small { margin-top: 3px; color: var(--muted); font-size: 8px; }
@media (max-width: 980px) { .approval-workspace { grid-template-columns: 1fr; }.approval-inbox, .approval-detail { min-height: auto; }.approval-empty { min-height: 240px; } }
@media (max-width: 650px) { .approval-summary { grid-template-columns: 1fr 1fr; }.approval-request { grid-template-columns: 48px 1fr auto; }.approval-request > strong { grid-column: 2; }.approval-request > i { grid-column: 3; grid-row: 1 / 3; }.approval-facts { grid-template-columns: 1fr; }.approval-facts div, .approval-facts div:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); }.approval-facts div:last-child { border-bottom: 0; } }

/* Final contract document package */
.document-package-drawer { position: fixed; inset: 0 0 0 auto; z-index: 65; display: flex; flex-direction: column; width: min(760px,100%); background: #fff; box-shadow: -20px 0 60px rgba(11,19,38,.2); transform: translateX(105%); transition: transform .25s ease; }.document-package-drawer.is-open { transform: translateX(0); }.document-package-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 23px 26px 17px; border-bottom: 1px solid var(--line); }.document-package-drawer > header span { color: var(--blue); font-size: 10px; font-weight: 800; }.document-package-drawer > header h2 { margin: 4px 0 0; font-size: 21px; }.document-package-drawer > header button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--bg); font-size: 22px; }.document-package-body { flex: 1; overflow-y: auto; padding: 22px 26px 36px; }.package-verify-hero { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; padding: 18px; border-radius: 14px; background: linear-gradient(120deg,var(--navy),#29437d); color: #fff; }.package-shield { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.13); color: #fff; font-size: 19px; }.package-verify-hero div > span { color: #afc0ef; font-size: 9px; font-weight: 800; }.package-verify-hero h3 { margin: 5px 0; font-size: 17px; }.package-verify-hero p { margin: 0; color: rgba(255,255,255,.62); font-size: 9px; }.package-hash { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 13px; margin: 13px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }.package-hash span { color: var(--muted); font-size: 8px; }.package-hash code { overflow: hidden; color: var(--navy); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.package-hash button { grid-column: 2; grid-row: 1 / 3; border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 800; }.package-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }.package-section { padding: 17px; margin-top: 13px; border: 1px solid var(--line); border-radius: 12px; }.package-section .section-heading { margin-bottom: 11px; }.version-chain { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.version-chain article { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; }.version-chain i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; }.version-chain p { margin: 0; }.version-chain b, .version-chain small { display: block; }.version-chain b { font-size: 9px; }.version-chain small { margin-top: 3px; color: var(--muted); font-size: 7px; }.version-chain em { grid-column: 2; color: var(--muted); font-size: 7px; font-style: normal; }.version-chain article.is-final { border-color: #9ed8c3; background: var(--green-soft); }.version-chain article.is-final i { background: var(--green); color: #fff; }.version-chain article.is-final em { color: var(--green); font-weight: 800; }.package-file-list { display: grid; }.package-file-list button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }.package-file-list button:last-child { border-bottom: 0; }.package-file-list i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-style: normal; font-weight: 800; }.package-file-list p { margin: 0; }.package-file-list b, .package-file-list small { display: block; }.package-file-list b { font-size: 10px; }.package-file-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }.package-file-list em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }.package-preview { margin-top: 14px; }.package-preview iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }.completed-actions { flex-wrap: wrap; }
@media (max-width: 620px) { .package-verify-hero { grid-template-columns: 42px 1fr; }.package-verify-hero > em { grid-column: 2; justify-self: start; }.version-chain { grid-template-columns: 1fr; }.package-drawer-actions { display: grid; }.package-preview iframe { height: 430px; } }
@media print { body * { visibility: hidden !important; }.contract-paper, .contract-paper * { visibility: visible !important; }.contract-paper { position: absolute; inset: 0; width: 100%; box-shadow: none; } }

/* External contract import: analysis and management only */
.page-actions { display: flex; gap: 8px; }.external-upload-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; }.external-upload-card,.external-policy-card,.external-form-card,.external-preview-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.external-step-label { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; }.external-step-label > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; }.external-step-label b,.external-step-label small { display:block; }.external-step-label b { font-size: 13px; }.external-step-label small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.external-dropzone { display: grid; place-items: center; min-height: 260px; padding: 25px; border: 1.5px dashed #b8c4da; border-radius: 14px; background: #fafbff; text-align: center; cursor: pointer; outline: none; }.external-dropzone:hover,.external-dropzone:focus,.external-dropzone.is-dragging { border-color: var(--blue); background: var(--blue-soft); }.external-dropzone.has-file { border-style: solid; border-color: #8dcbb5; background: var(--green-soft); }.external-dropzone > span { display:grid; place-items:center; width:50px; height:50px; margin-bottom:12px; border-radius:14px; background:#fff; color:var(--blue); box-shadow:0 5px 18px rgba(43,78,167,.12); font-size:22px; }.external-dropzone b,.external-dropzone small,.external-dropzone em { display:block; }.external-dropzone b { font-size:13px; }.external-dropzone small { margin:6px 0 15px; color:var(--muted); font-size:9px; }.external-dropzone em { margin-top:10px; color:var(--blue); font-size:9px; font-style:normal; font-weight:800; }.external-privacy-note { display:flex; align-items:center; gap:10px; padding:12px; margin:14px 0; border-radius:10px; background:var(--green-soft); }.external-privacy-note > i { color:var(--green); font-style:normal; font-weight:800; }.external-privacy-note p { flex:1; margin:0; }.external-privacy-note b,.external-privacy-note small { display:block; }.external-privacy-note b { font-size:9px; }.external-privacy-note small { margin-top:3px; color:#557365; font-size:8px; }.external-privacy-note>em{padding:5px 7px;border-radius:99px;background:#fff;color:var(--green);font-size:8px;font-style:normal;font-weight:800;white-space:nowrap}.block-button { width:100%; }
.external-policy-card > span,.external-section-title > span { color:var(--blue); font-size:9px; font-weight:800; }.external-policy-card > h3 { margin:6px 0 15px; font-size:17px; }.external-policy-card > div { display:grid; grid-template-columns:30px 1fr; gap:9px; padding:12px 0; border-bottom:1px solid var(--line); }.external-policy-card > div:last-child { border-bottom:0; }.external-policy-card i { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--blue-soft); color:var(--blue); font-size:9px; font-style:normal; font-weight:800; }.external-policy-card p { margin:0; }.external-policy-card b,.external-policy-card small { display:block; }.external-policy-card b { font-size:10px; }.external-policy-card small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.45; }
.external-ai-consent{display:grid;grid-template-columns:auto 1fr;align-items:flex-start;gap:9px;padding:12px;margin-top:13px;border:1px solid #dce2ee;border-radius:10px;background:#fafbfe;cursor:pointer}.external-ai-consent input{margin-top:2px;accent-color:var(--blue)}.external-ai-consent b,.external-ai-consent small{display:block}.external-ai-consent b{font-size:9px}.external-ai-consent small{margin-top:4px;color:var(--muted);font-size:8px;line-height:1.5}.external-analysis-warnings{display:grid;grid-template-columns:34px 1fr;gap:11px;padding:14px 16px;margin-bottom:15px;border:1px solid #e4bd7c;border-radius:11px;background:var(--orange-soft)}.external-analysis-warnings>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;color:var(--orange);font-style:normal;font-weight:900}.external-analysis-warnings b{font-size:9px}.external-analysis-warnings ul{padding-left:16px;margin:6px 0 0;color:#7a6548;font-size:8px;line-height:1.6}.external-form-card label.needs-review{position:relative}.external-form-card label.needs-review>input,.external-form-card label.needs-review>select,.external-form-card label.needs-review>textarea{border-color:#d89a3e;background:#fffaf2}.external-form-card label.needs-review:after{content:"원문 확인";position:absolute;top:0;right:0;color:var(--orange);font-size:7px;font-weight:800}
.external-analyzing { display:grid; place-items:center; min-height:520px; padding:45px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); text-align:center; }.analysis-spinner { display:grid; place-items:center; width:68px; height:68px; border:2px solid #b7c6ee; border-top-color:var(--blue); border-radius:50%; color:var(--blue); font-size:12px; font-weight:800; animation:spin 1s linear infinite; }.external-analyzing h3 { margin:18px 0 7px; font-size:20px; }.external-analyzing p { margin:0; color:var(--muted); font-size:10px; }.analysis-progress { width:min(420px,80%); height:7px; margin:24px 0 18px; overflow:hidden; border-radius:99px; background:#edf0f6; }.analysis-progress span { display:block; width:72%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#6e8ee8); animation:analysis-progress 1.4s ease both; }.analysis-tasks { display:grid; gap:7px; text-align:left; }.analysis-tasks em { color:var(--muted); font-size:9px; font-style:normal; }.analysis-tasks em:nth-child(-n+2) { color:var(--green); } @keyframes spin{to{transform:rotate(360deg)}} @keyframes analysis-progress{from{width:5%}to{width:92%}}
.external-review-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; margin-bottom:16px; border:1px solid #a8d8c6; border-radius:14px; background:var(--green-soft); }.external-review-heading > div { display:flex; align-items:center; gap:11px; }.external-complete-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green); color:#fff; font-size:16px; }.external-review-heading div > div > span { color:var(--green); font-size:8px; font-weight:800; }.external-review-heading h3 { margin:3px 0; font-size:14px; }.external-review-heading p { margin:0; color:#557365; font-size:8px; }.external-review-heading > em { color:var(--green); font-size:9px; font-style:normal; font-weight:800; }.external-review-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; align-items:start; }.external-section-title { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; margin-bottom:13px; border-bottom:1px solid var(--line); }.external-section-title small { color:var(--muted); font-size:8px; }.external-section-title.schedule { margin-top:20px; }.external-form-card > label,.external-field-row label { display:grid; gap:6px; margin-bottom:12px; color:var(--muted); font-size:9px; font-weight:700; }.external-form-card input,.external-form-card select,.external-form-card textarea { width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); outline:none; }.external-form-card textarea { resize:vertical; line-height:1.55; }.external-form-card input:focus,.external-form-card select:focus,.external-form-card textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }.external-field-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.external-schedule-list { display:grid; gap:8px; margin-bottom:18px; }.external-schedule-list label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:9px; }.external-schedule-list input { width:auto; }.external-schedule-list b,.external-schedule-list small { display:block; }.external-schedule-list b { font-size:9px; }.external-schedule-list small { margin-top:3px; color:var(--muted); font-size:8px; }.external-original-check { display:grid!important; grid-template-columns:auto 1fr; align-items:center; gap:9px!important; padding:12px; border-radius:10px; background:var(--orange-soft); }.external-original-check input { width:auto; }.external-original-check b,.external-original-check small { display:block; }.external-original-check b { color:#7c5b2e; font-size:9px; }.external-original-check small { margin-top:3px; color:#8a704f; font-size:8px; }
.external-preview-card { position:sticky; top:84px; }.external-paper { position:relative; min-height:610px; padding:38px 34px 30px; overflow:hidden; border:1px solid #cfd4dd; background:#fff; box-shadow:0 8px 25px rgba(19,30,56,.09); }.external-watermark { position:absolute; top:44%; left:12%; width:76%; transform:rotate(-24deg); color:rgba(196,61,61,.10); font-size:42px; font-weight:900; line-height:.75; text-align:center; letter-spacing:3px; pointer-events:none; }.external-watermark small { font-size:18px; letter-spacing:1px; }.external-paper header { padding-bottom:20px; border-bottom:2px solid var(--navy); text-align:center; }.external-paper header > span { color:var(--blue); font-size:8px; font-weight:800; }.external-paper h2 { margin:7px 0 6px; font-size:19px; }.external-paper header p,.external-paper footer { color:var(--muted); font-size:7px; }.external-paper dl { margin:18px 0; border-top:1px solid #dfe3ea; }.external-paper dl div { display:grid; grid-template-columns:80px 1fr; padding:9px; border-bottom:1px solid #dfe3ea; }.external-paper dt { color:var(--muted); font-size:8px; }.external-paper dd { margin:0; font-size:9px; font-weight:800; }.external-paper section { padding:16px; border-radius:8px; background:#f7f8fb; }.external-paper section h3 { margin:0 0 8px; font-size:10px; }.external-paper section p { margin:0; font-size:8px; line-height:1.7; white-space:pre-line; }.external-paper footer { position:absolute; right:34px; bottom:25px; left:34px; padding-top:10px; border-top:1px solid #dfe3ea; text-align:center; line-height:1.5; }.external-delete-audit { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:11px; margin:12px 0; border-radius:9px; background:var(--red-soft); }.external-delete-audit > span { padding:5px 7px; border-radius:6px; background:#fff; color:var(--red); font-size:8px; font-weight:800; }.external-delete-audit p { margin:0; }.external-delete-audit b,.external-delete-audit small { display:block; }.external-delete-audit b { font-size:9px; }.external-delete-audit small { margin-top:3px; color:#8e6666; font-size:8px; }.external-no-sign { margin:9px 0 0; color:var(--muted); font-size:8px; text-align:center; }.status.external { background:#ece8ff; color:#6954ad; }
.app-shell.guest-mode [data-open-external],.app-shell.guest-mode .nav-item[data-view="external-import"] { display:none!important; }
@media (max-width:950px){.external-upload-layout,.external-review-grid{grid-template-columns:1fr}.external-preview-card{position:static}.external-paper{min-height:520px}} @media (max-width:600px){.page-actions{display:grid;width:100%}.external-field-row{grid-template-columns:1fr}.external-review-heading{align-items:flex-start;flex-direction:column}.external-upload-card,.external-policy-card,.external-form-card,.external-preview-card{padding:16px}.external-paper{padding:30px 20px}.external-watermark{font-size:28px}}

/* External contract detail: management record, never a signing room */
.external-detail-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:21px 23px;margin-bottom:13px;border-radius:15px;background:linear-gradient(120deg,#302d50,#514976);color:#fff;box-shadow:var(--shadow)}.external-detail-mark{display:grid;place-items:center;width:49px;height:49px;border-radius:13px;background:rgba(255,255,255,.14);font-size:10px;font-weight:900}.external-detail-hero span{color:#d0caeb;font-size:8px;font-weight:800}.external-detail-hero h2{margin:4px 0 5px;font-size:21px}.external-detail-hero p{margin:0;color:rgba(255,255,255,.65);font-size:8px}.external-detail-hero p b{color:#fff}.external-detail-hero .secondary-button{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff}.external-origin-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 16px;margin-bottom:15px;border:1px solid #e8c58e;border-radius:11px;background:var(--orange-soft)}.external-origin-banner>i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--orange);font-style:normal;font-weight:900}.external-origin-banner p{margin:0}.external-origin-banner b,.external-origin-banner small{display:block}.external-origin-banner b{font-size:9px}.external-origin-banner small{margin-top:3px;color:#806d52;font-size:8px}.external-origin-banner>em{color:#855e27;font-size:8px;font-style:normal;font-weight:800}.external-detail-grid{display:grid;grid-template-columns:minmax(500px,1fr)420px;gap:17px;align-items:start}.external-detail-main{display:grid;gap:14px}.external-facts-panel,.external-schedule-panel,.external-audit-panel{padding:20px}.external-detail-facts{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.external-detail-facts div{padding:12px;border-bottom:1px solid var(--line)}.external-detail-facts div:nth-child(odd){border-right:1px solid var(--line)}.external-detail-facts div:nth-last-child(-n+2){border-bottom:0}.external-detail-facts dt{color:var(--muted);font-size:8px}.external-detail-facts dd{margin:4px 0 0;font-size:10px;font-weight:800}.external-detail-content{padding:14px;margin-top:14px;border-radius:10px;background:var(--bg)}.external-detail-content span{color:var(--blue);font-size:8px;font-weight:800}.external-detail-content p{margin:8px 0 0;font-size:9px;line-height:1.75;white-space:pre-line}.external-schedule-panel .section-heading>em,.external-audit-panel .section-heading>em{color:var(--muted);font-size:8px;font-style:normal}.external-detail-schedules>div{display:grid;grid-template-columns:52px 1fr 100px 72px;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}.external-detail-schedules>div:last-child{border-bottom:0}.external-detail-schedules time{color:var(--blue);font-size:8px;font-weight:800}.external-detail-schedules p{margin:0}.external-detail-schedules b,.external-detail-schedules small{display:block}.external-detail-schedules b{font-size:9px}.external-detail-schedules small{margin-top:3px;color:var(--muted);font-size:8px}.external-detail-schedules strong{font-size:9px;text-align:right}.external-detail-schedules em{padding:5px;border-radius:99px;background:var(--blue-soft);color:var(--blue);font-size:7px;font-style:normal;text-align:center}.external-empty-schedule{color:var(--muted);font-size:9px}.external-audit-timeline{display:grid}.external-audit-timeline>div{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:0 0 18px}.external-audit-timeline>div:not(:last-child):before{content:"";position:absolute;top:26px;left:13px;width:1px;height:calc(100% - 7px);background:#d6dce7}.external-audit-timeline i{z-index:1;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:8px;font-style:normal;font-weight:800}.external-audit-timeline p{margin:1px 0 0}.external-audit-timeline b,.external-audit-timeline small{display:block}.external-audit-timeline b{font-size:9px}.external-audit-timeline small{margin-top:4px;color:var(--muted);font-size:8px}.external-audit-timeline em{padding-top:4px;color:var(--green);font-size:8px;font-style:normal;font-weight:800}.external-audit-timeline .deleted i{background:var(--red-soft);color:var(--red)}.external-detail-side{position:sticky;top:84px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}.external-detail-paper{min-height:650px}.external-detail-paper section{max-height:290px;overflow:hidden}.external-detail-lock{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:12px;margin-top:12px;border-radius:9px;background:#f1eff8}.external-detail-lock>span{padding:5px 7px;border-radius:6px;background:#fff;color:#6954ad;font-size:8px;font-weight:800}.external-detail-lock p{margin:0}.external-detail-lock b,.external-detail-lock small{display:block}.external-detail-lock b{font-size:9px}.external-detail-lock small{margin-top:3px;color:var(--muted);font-size:8px}.app-shell.guest-mode [data-view-panel="external-detail"] .external-detail-schedules em{display:none}
@media(max-width:1050px){.external-detail-grid{grid-template-columns:1fr}.external-detail-side{position:static}.external-detail-paper{min-height:560px}}@media(max-width:650px){.external-detail-hero{grid-template-columns:auto 1fr}.external-detail-hero button{grid-column:1/-1}.external-origin-banner{grid-template-columns:auto 1fr}.external-origin-banner>em{grid-column:2}.external-detail-facts{grid-template-columns:1fr}.external-detail-facts div,.external-detail-facts div:nth-child(odd){border-right:0;border-bottom:1px solid var(--line)}.external-detail-facts div:last-child{border-bottom:0}.external-detail-schedules>div{grid-template-columns:45px 1fr auto}.external-detail-schedules strong{grid-column:2;text-align:left}.external-detail-schedules em{grid-column:3;grid-row:1/3}}
/* Membership v24: status is deliberately distinct from real-name identity and signature approval. */
body > [aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.auth-helper:empty { display: none; }
.auth-field[hidden], .auth-consent[hidden], .auth-primary[hidden] { display: none !important; }
.auth-field input[type="email"], .auth-field input[type="password"] { width: 100%; min-width: 0; }
.verification-stack { margin: 20px 0; padding: 12px 18px; border: 1px solid #dce5ee; border-radius: 14px; background: #f6f9fc; }
.verification-stack p { display: flex; justify-content: space-between; gap: 16px; margin: 10px 0; font-size: 13px; }
.verification-stack b { color: #315584; white-space: nowrap; }
.member-preview-notice { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 15px 28px; background: #fff6df; border-bottom: 1px solid #eedbb0; color: #705119; }
.member-preview-notice b { font-size: 14px; }
.member-preview-notice p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; }
.member-preview-notice button { flex-shrink: 0; background: #fff; border: 1px solid #dfc991; border-radius: 8px; padding: 9px 12px; color: #705119; cursor: pointer; }
.auth-primary:disabled { opacity: .55; cursor: not-allowed; }
.live-only { display: none; }
.member-live .live-only { display: flex; }
.draft-controls { gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 20px; font-size: 13px; }
.draft-search-actions { align-items: end; gap: 8px; flex-wrap: wrap; }
.draft-search-actions label { display: grid; gap: 6px; color: #657084; font-size: 12px; }
.draft-search-actions select { min-height: 42px; padding: 8px 12px; border: 1px solid #dce1e9; border-radius: 9px; background: white; color: #24334a; font: inherit; font-size: 14px; }
.draft-filter-summary { margin: -4px 0 18px; color: #657084; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.member-live #draft-search-form { align-items: end; flex-wrap: wrap; }
.member-live #draft-search-form .search-box { flex: 1; min-width: 220px; max-width: 100%; }
.member-live #draft-search-form .search-box input { width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .member-live #draft-search-form { align-items: stretch; }
  .member-live #draft-search-form .search-box { min-width: 0; width: 100%; }
  .draft-search-actions label { flex: 1; min-width: 140px; }
  .draft-search-actions select { width: 100%; }
}
.draft-save-message { padding: 14px 18px; border-radius: 12px; border: 1px solid #bdd3f8; background: #edf4ff; color: #244777; line-height: 1.7; }
.member-live .draft-input-review { display: block; border: 1px solid #d9e0e9; border-radius: 14px; margin: 0 0 20px; overflow: hidden; }
.draft-input-review header { background: #f4f6fb; padding: 18px; }
.draft-input-review header > span { color: #5369a0; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.draft-input-review h4 { font-size: 19px; margin: 7px 0; color: #25324b; }
.draft-input-review header p { font-size: 12px; color: #647087; line-height: 1.7; margin: 0; }
.draft-input-review ul { list-style: none; padding: 0; margin: 0; }
.draft-input-review li { display: flex; gap: 12px; align-items: center; padding: 15px 18px; border-top: 1px solid #edf0f5; }
.draft-input-review li > div { flex: 1; min-width: 0; }
.draft-input-review b { display: block; font-size: 13px; }
.draft-input-review small { display: block; font-size: 12px; color: #647087; line-height: 1.7; margin-top: 4px; overflow-wrap: anywhere; }
.draft-input-review button { border: 1px solid #dce2ed; background: white; border-radius: 8px; min-width: 48px; min-height: 40px; color: #34476b; font: inherit; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.draft-input-review .review-error { background: #fff4f2; }
.draft-input-review .review-error b { color: #a7382c; }
.draft-input-review .review-note { background: #fffbf1; }
.draft-input-review .review-note b { color: #846015; }
.draft-input-review button:focus-visible { outline: 2px solid #3d63db; outline-offset: 2px; }
.member-live #payment-validation-copy { display: none !important; }
.member-live #paper-generated-articles { display: none; }
.member-live #paper-editable-articles, .member-live .article-editor { display: block; }
.article-editor { margin-bottom: 28px; }
.article-editor > header { padding: 18px; background: #f3f6fb; border-radius: 12px; margin-bottom: 18px; }
.article-editor h4 { margin: 6px 0; font-size: 20px; }
.article-editor p, .article-editor small { font-size: 12px; line-height: 1.7; color: #637188; }
.article-editor > header > span { color: #516da8; font-size: 12px; }
.article-card { border: 1px solid #dbe2ed; border-radius: 12px; padding: 16px; margin: 14px 0; background: #fff; }
.article-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.article-card > header span { font-size: 11px; color: #8a651f; }
.article-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.article-actions button { border: 1px solid #dce3ef; background: #f7f9fc; border-radius: 8px; padding: 10px; min-height: 40px; cursor: pointer; font: inherit; font-size: 12px; color: #385885; }
.article-actions button:disabled { opacity: .4; cursor: default; }
.article-actions button:focus-visible { outline: 2px solid #3d63db; outline-offset: 2px; }
.article-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.member-live .personal-templates { display: block; padding: 22px; border: 1px solid #dce3ef; border-radius: 16px; background: #fff; margin-bottom: 28px; }
.personal-templates header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.personal-templates h2 { font-size: 21px; margin: 8px 0; }
.personal-templates p, .template-save-box p { font-size: 12px; line-height: 1.8; color: #627087; }
.personal-template-card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 0; border-top: 1px solid #e6eaf0; }
.personal-template-card > div { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.personal-template-card small { display: block; margin-top: 6px; color: #67768b; }
.template-save-box { padding: 16px; border: 1px solid #dce3ef; border-radius: 12px; margin: 12px 0 22px; flex-wrap: wrap; align-items: end; gap: 10px; background: #fff; }
.template-save-box label { display: grid; gap: 6px; font-size: 12px; flex: 1; min-width: 180px; }
.template-save-box input { padding: 10px; border: 1px solid #d8dfea; border-radius: 8px; width: 100%; }
.template-save-box p { width: 100%; margin: 0; }
@media(max-width:640px){.personal-templates header { align-items: flex-start; flex-direction: column; }}
.draft-open { border: 0; background: transparent; color: #285bc5; font: inherit; font-weight: 650; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.draft-empty { padding: 36px 18px !important; color: #657084; text-align: center; white-space: normal !important; }
.member-live .main-nav [data-view]:not([data-view="dashboard"]):not([data-view="templates"]):not([data-view="contracts"]):not([data-view="external-managed"]),
.member-live [data-open-external],
.member-live .lifecycle-section, .member-live .task-panel, .member-live .payment-panel,
.member-live .relationship-strip, .member-live [data-view-panel="contracts"] .summary-row,
.member-live [data-view-panel="contracts"] .chip-row,
.member-live #notification-button, .member-live #notification-panel,
.member-live #upload-zone, .member-live #attachment-list, .member-live .paper-attachment,
.member-live #invite-party { display: none !important; }
.member-live .dashboard-grid { grid-template-columns: 1fr; }
.member-live .contract-paper::before { content: '미체결 초안'; display: block; color: #607aa3; font-size: 14px; letter-spacing: 4px; text-align: center; margin-bottom: 18px; }
.member-live .secondary-button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) { .member-preview-notice { padding: 12px 16px; align-items: flex-start; } }

/* Contract folio: a single entry surface, inspired by a carefully kept agreement. */
.recovery-feedback { margin-top: 16px !important; }
#recovery-form[hidden], #recovery-new-link[hidden], #recovery-retry[hidden], #recovery-account-note[hidden] { display: none !important; }
.auth-gate .auth-field input[readonly] { background: #edeae3; color: #455261; border-color: #d8d2c6; cursor: default; }
.recovery-account-note { color: #7b6b55; font-size: 11px; line-height: 1.7; margin: -5px 0 20px; }
.auth-entry-footer > small { display: block; margin-top: 3px; }
.auth-gate { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 34px 24px 24px; background: radial-gradient(ellipse at 50% 5%,#34465a 0,transparent 65%),linear-gradient(145deg,#172738,#101c2b); }
.auth-gate::before { content: ''; position: absolute; inset: 20px; z-index: -1; pointer-events: none; border: 1px solid #d9c29920; background: repeating-linear-gradient(0deg,transparent,transparent 3px,#ffffff02 3px,#ffffff02 4px); }
.auth-gate > .auth-brand { justify-content: center; gap: 12px; margin: 0 0 25px; color: #faf6ed; }
.auth-gate .auth-brand .brand-mark { width: 42px; height: 42px; border: 1px solid #cfb88e80; border-radius: 12px 12px 3px 12px; background: #ffffff06; color: #eed5aa; box-shadow: inset 0 0 0 4px #cfb88e08; }
.auth-gate .auth-brand b { font-size: 23px; font-weight: 650; letter-spacing: -.8px; }
.auth-gate .auth-brand small { margin-top: 5px; color: #b9c2cd; font-size: 8px; letter-spacing: 1.7px; }
.auth-gate > .auth-card { position: relative; isolation: isolate; width: min(440px,100%); padding: 25px 38px 18px; border: 1px solid #ede6d8; border-radius: 4px 20px 4px 4px; background: radial-gradient(#8b705709 .65px,transparent .65px),#faf8f3; background-size: 5px 5px,auto; box-shadow: 0 28px 65px #050c1840; }
.auth-card::before { content: ''; position: absolute; inset: 6px -5px -7px 5px; z-index: -1; transform: rotate(1.1deg); border: 1px solid #d9d1c2; border-radius: 4px 17px 4px 4px; background: #e6e0d4; }
.auth-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(#8b705709 .65px,transparent .65px),#faf8f3; background-size: 5px 5px,auto; }
.auth-letterhead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 25px; border-bottom: 1px solid #d6c7af; color: #89714f; }
.auth-letterhead > span { font-size: 8px; letter-spacing: 1.6px; font-weight: 700; }
.auth-letterhead i { padding: 0 6px; font-style: normal; color: #b19c7f; }
.auth-letterhead svg { width: 30px; height: 30px; flex-shrink: 0; }
.auth-document-kicker { display: block; margin-bottom: 11px; color: #8a7050; font-size: 11px; letter-spacing: .3px; }
.auth-gate .auth-step h1 { margin: 0 0 14px; text-align: left; white-space: pre-line; color: #213348; font-size: 32px; line-height: 1.35; letter-spacing: -1.6px; font-weight: 700; }
.auth-gate .auth-kicker { display: block; text-align: left; color: #8a7050; font-size: 11px; margin-bottom: 12px; }
.auth-gate .auth-step > p { color: #6d747c; font-size: 12px; line-height: 1.8; margin: 0 0 24px; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
.auth-gate .auth-field { font-size: 11px; color: #455261; gap: 8px; margin-bottom: 16px; font-weight: 650; }
.auth-gate .auth-field input { min-height: 47px; padding: 12px 14px; border: 1px solid #ddd9d0; border-radius: 7px; background: #ffffffb3; font-size: 14px; transition: border-color .15s,box-shadow .15s; }
.auth-gate .auth-field input::placeholder { color: #8b9198; font-weight: 400; }
.auth-gate .auth-field input:focus { border-color: #a18a68; box-shadow: 0 0 0 3px #a18a6815; }
.auth-gate .auth-primary { position: relative; min-height: 49px; margin-top: 3px; border: 1px solid #203448; border-radius: 7px; background: linear-gradient(120deg,#2d4256,#1b2e41); box-shadow: 0 5px 12px #1c304218; color: #fff; font-size: 14px; letter-spacing: .3px; }
.auth-gate .auth-primary::after { content: '→'; position: absolute; right: 19px; top: 50%; transform: translateY(-50%); color: #d5bd97; font-size: 19px; transition: right .15s; }
.auth-gate .auth-primary:hover { background: #344d63; }
.auth-gate .auth-primary:hover::after { right: 15px; }
.auth-gate .auth-helper { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-gate .auth-consent { font-size: 11px; line-height: 1.7; }
.auth-gate .auth-step > .auth-mode-prompt { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0 3px; font-size: 12px; }
.auth-gate .auth-mode-prompt[hidden] { display: none !important; }
.auth-mode-prompt button { border: 0; background: transparent; color: #785b34; font: inherit; font-weight: 700; cursor: pointer; padding: 10px 4px; min-height: 40px; }
.auth-mode-prompt button:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-entry-footer { text-align: center; }
.auth-preview-button { min-height: 35px; padding: 6px 12px; border: 0; background: transparent; color: #67737e; font-size: 11px; cursor: pointer; }
.auth-preview-button span { margin-left: 6px; color: #9a7f5d; }
.auth-entry-footer p { margin: 12px 0 4px; font-size: 10px; line-height: 1.7; color: #69717a; }
.auth-entry-footer small { color: #777b80; font-size: 9px; }
.auth-document-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 13px; border-top: 1px solid #ddd5c7; }
.auth-document-footer span { color: #938674; font-size: 7px; line-height: 1.7; letter-spacing: 1.6px; }
.auth-document-footer svg { width: 97px; height: 31px; color: #a18966; }
.auth-gate .auth-login-link { color: #6d573a; font-size: 12px; min-height: 36px; }
.auth-gate button:focus-visible { outline: 3px solid #b89c73; outline-offset: 3px; }
.auth-gate > footer { align-self: center; display: grid; gap: 5px; max-width: 440px; margin-top: 27px; color: #b0bdcc; text-align: center; font-size: 9px; line-height: 1.7; }
.auth-gate > footer > span:first-child { color: #bda989; font-size: 8px; letter-spacing: 2px; }
.auth-gate .persona-list b { font-size: 13px; }
.auth-gate .persona-list small { font-size: 11px; line-height: 1.5; }
@media (max-width: 520px) {
 .auth-gate { padding: 26px 22px 22px; }
 .auth-gate::before { inset: 10px; }
 .auth-gate > .auth-brand { margin-bottom: 22px; }
 .auth-gate > .auth-card { padding: 22px 24px 17px; }
 .auth-gate .auth-step h1 { font-size: 29px; }
 .auth-gate .auth-field input { font-size: 16px; }
 .auth-letterhead > span { font-size: 7px; letter-spacing: 1px; }
 .auth-gate > footer { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) { .auth-step.is-active { animation: none; }.auth-gate input,.auth-gate .auth-primary::after { transition: none; } }
:root { --book-ink: #173d39; }
.template-card { border-left: 5px solid #477469; box-shadow: 4px 4px 0 #e2e6de; }
.template-card footer { flex-wrap: wrap; gap: 10px; }
#template-book { width: min(1050px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #d2d9d0; border-radius: 20px; background: #f3f3ec; color: #203f3a; box-shadow: 0 30px 100px #122d3a55; }
#template-book[open] { display: flex; flex-direction: column; }
#template-book::backdrop { background: #122d3aba; backdrop-filter: blur(5px); }
.book-top,.book-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 28px; flex-shrink: 0; }
.book-top { border-bottom: 1px solid #dce1d5; }
.book-top span { font-size: 12px; letter-spacing: .08em; color: #58766a; }
.book-top h2 { margin: 6px 0 0; font-size: 23px; overflow-wrap: anywhere; }
#template-book-close { background: transparent; border: 0; font-size: 30px; padding: 6px 12px; cursor: pointer; }
.book-stage { padding: 28px 50px; overflow: auto; min-height: 0; background: linear-gradient(90deg,#e4e9df,#f0f1e8 50%,#e4e9df); }
.book-page { max-width: 780px; margin: auto; padding: 48px 56px; background: linear-gradient(90deg,#e5e7df 0,#fffdf8 18px,#fffdf8 99%,#dedfd7); box-shadow: 5px 6px 0 #d4d9d0,10px 11px 0 #cbd1c7,0 16px 34px #1c3e351c; color: #283c35; overflow-wrap: anywhere; }
.book-document-brand { font-size: 10px; letter-spacing: .18em; padding-bottom: 18px; border-bottom: 2px solid #395b4c; }
.book-page h1 { text-align: center; font: 600 28px/1.5 Georgia,'Malgun Gothic',serif; margin: 32px 0; }
.book-page h3 { font-size: 15px; margin: 28px 0 10px; }
.book-page p { font-size: 13px; line-height: 1.9; white-space: pre-wrap; margin: 8px 0; }
.book-page > small { display: block; margin-top: 30px; color: #758178; font-size: 11px; line-height: 1.7; }
.book-signatures { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #bec9be; gap: 20px; margin-top: 36px; padding-top: 20px; font-size: 12px; line-height: 2.2; }
.book-table-scroll { overflow-x: auto; }
.book-page table { border-collapse: collapse; min-width: 480px; width: 100%; font-size: 11px; }
.book-page caption { text-align: left; margin: 12px 0; }
.book-page td,.book-page th { padding: 8px; border: 1px solid #d9dfd3; white-space: normal; }
.book-page th { background: #eef1e8; }
#template-book-notice { margin: 0; padding: 12px 28px 0; color: #52665b; font-size: 12px; line-height: 1.6; }
.book-pager,.book-actions { display: flex; align-items: center; gap: 12px; }
.book-pager button { width: 38px; height: 38px; background: #fffdf8; border: 1px solid #c8d1c5; border-radius: 50%; cursor: pointer; }
.book-pager span { font-size: 13px; white-space: nowrap; }
#template-book button:disabled { opacity: .4; cursor: not-allowed; }
#template-book button:focus-visible,.book-page:focus-visible { outline: 3px solid #5b9681; outline-offset: 3px; }
.template-edit-mode .template-save-box { background: #edf6ee; border: 2px solid #588569; }
.template-edit-mode .workspace-heading h2 { color: #356546; }
.template-edit-mode #invite-party { display: none; }
@media (max-width: 650px) {
  #template-book { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .book-top,.book-bottom { padding: 14px; gap: 10px; }
  .book-top h2 { font-size: 19px; }
  .book-stage { padding: 16px 12px 22px; }
  .book-page { padding: 24px 20px; }
  .book-page h1 { font-size: 23px; }
  .book-signatures { grid-template-columns: 1fr; }
  .book-bottom { flex-wrap: wrap; justify-content: center; }
  .book-actions { width: 100%; flex-wrap: wrap; justify-content: center; }
  .book-actions button { flex: 1; min-height: 42px; }
  #template-book-notice { padding: 10px 14px 0; }
}
.draft-library-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border:1px solid #dae2e7; background:#f4f8fb; border-radius:16px; margin:12px 0; }
.draft-library-strip p { margin:8px 0 0; font-size:13px; color:#607080; line-height:1.7; }
#draft-library-status { color:#385b73; line-height:1.7; font-size:13px; }
.draft-row-actions { display:flex; gap:8px; margin-top:8px; }
.draft-row-actions button { border:1px solid #d9e1e8; background:#fff; padding:5px 9px; border-radius:6px; font-size:11px; color:#52667b; cursor:pointer; }
.draft-row-actions button:hover { background:#edf2f8; }
#draft-trash-panel[hidden] { display:none!important; }
.member-live #draft-trash-panel { display:block; }
#draft-trash-panel { padding:24px; margin-bottom:24px; }
#draft-trash-panel h2 { margin:0 0 8px; font-size:20px; }
#draft-trash-panel p,#draft-trash-page { color:#657384; font-size:13px; line-height:1.7; }
#draft-trash-search,#draft-trash-panel footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0; }
#draft-trash-search label { display:grid; gap:6px; font-size:12px; flex:1; min-width:0; }
#draft-trash-query { border:1px solid #d3dce5; padding:11px; border-radius:8px; min-width:0; }
.trash-row { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid #e7ebf0; }
.trash-row b { overflow-wrap:anywhere; }
.trash-row small { display:block; color:#768393; margin-top:7px; }
#draft-action-dialog { width:min(520px,calc(100vw - 32px)); padding:28px; border:1px solid #d5dfe7; border-radius:20px; color:#24374d; box-shadow:0 24px 80px #19324944; }
#draft-action-dialog::backdrop { background:#162b44aa; backdrop-filter:blur(3px); }
#draft-action-dialog h2 { margin:0 0 20px; font-size:22px; }
#draft-action-target { padding:14px; background:#f2f6fa; border-radius:8px; font-weight:600; overflow-wrap:anywhere; }
#draft-action-help,#draft-action-error { font-size:14px; line-height:1.85; }
#draft-action-error { color:#964734; }
#draft-action-dialog footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
@media(max-width:650px){.draft-library-strip{align-items:flex-start;flex-direction:column;padding:16px;}#draft-trash-panel{padding:16px;}#draft-action-dialog{padding:22px;}#draft-trash-search label{flex-basis:100%;}}
/* Saved-draft exports never appear in guest/demo or template-original mode. */
.template-edit-mode #download-draft-pdf, .template-edit-mode #draft-pdf-message { display:none !important; }
#draft-pdf-message {font-size:11px;line-height:1.6;color:#547066;background:#edf5f1;border-radius:8px;padding:10px;margin:0 0 16px;}
/* Read-only version history */
.template-edit-mode #open-draft-history {display:none!important}
.history-dialog {width:min(1120px,94vw);max-height:90vh;border:1px solid #d9e6e0;border-radius:20px;padding:24px;color:#183c3b;background:#f8fbfa;box-shadow:0 24px 100px #112c3a40}
.history-dialog::backdrop {background:#102a3b88;backdrop-filter:blur(4px)}
.history-dialog>header {display:flex;justify-content:space-between;gap:20px;align-items:center}
.history-dialog>header span {font-size:11px;color:#5b8170;letter-spacing:1px}
.history-dialog h2 {font-size:21px;margin:6px 0;overflow-wrap:anywhere}
.history-dialog>header button {font-size:24px;background:white;border:1px solid #d9e6e0;border-radius:10px;min-width:40px;min-height:40px}
.history-notice {font-size:12px;line-height:1.7;color:#65716c;background:#eaf2ed;padding:12px;border-radius:10px}
#draft-history-status {font-size:13px;line-height:1.6;min-height:22px}
.history-layout {display:grid;grid-template-columns:235px minmax(0,1fr);gap:20px;align-items:start}
#draft-history-versions {display:grid;gap:8px;max-height:48vh;overflow:auto;padding-right:3px}
#draft-history-diff {max-height:48vh;overflow:auto;padding-right:3px}
#draft-history-versions button {display:grid;gap:6px;text-align:left;padding:13px;background:white;border:1px solid #dce6e0;border-radius:12px;color:#274439;overflow-wrap:anywhere}
#draft-history-versions button[aria-pressed="true"] {border:2px solid #407d61;background:#eaf4ee;padding:12px}
#draft-history-versions span {font-size:12px} #draft-history-versions small {font-size:10px;color:#77877d}
.history-pager {display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px}
.history-pager button {border:1px solid #dce6e0;background:white;border-radius:6px;padding:7px}
.history-controls {display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;margin-bottom:14px}
.history-controls label {display:flex;gap:6px;align-items:center}
#draft-history-selection {font-size:15px;margin:0 0 12px}
.history-change {background:white;border:1px solid #dce6e0;border-radius:12px;margin-bottom:12px;overflow:hidden}
.history-change h4 {font-size:13px;margin:0;padding:11px 13px;background:#f1f5f2}
.history-change h4 span {font-size:10px;border-radius:5px;padding:3px 6px;margin-left:6px;background:#e5b76533;color:#855d10}
.history-pair {display:grid;grid-template-columns:1fr 1fr}
.history-pair>div {min-width:0;padding:12px}.history-pair>div+div {border-left:1px solid #e5ebe6}
.history-pair small {font-size:10px;color:#738378}
.history-pair pre {white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:12px;line-height:1.8;margin:8px 0 0}
.history-change.is-changed .history-pair>div:first-child {background:#fffaf3}
.history-change.is-changed .history-pair>div:last-child {background:#f1faf5}
.history-empty {padding:20px;background:white;border-radius:12px;color:#617366;font-size:13px;line-height:1.8}
@media(max-width:700px){.history-dialog{padding:16px;width:96vw;max-height:94vh}.history-layout{grid-template-columns:1fr}.history-dialog h2{font-size:17px}#draft-history-versions{max-height:180px;overflow:auto;grid-template-columns:1fr 1fr}#draft-history-diff{max-height:none;overflow:visible}.history-pair{grid-template-columns:1fr}.history-pair>div+div{border-left:0;border-top:1px solid #e5ebe6}}
/* Historical inputs are pending edits until the member explicitly saves. */
#draft-restore-notice[hidden],#draft-history-load-confirm[hidden]{display:none!important}
.member-live #draft-restore-notice{display:block;padding:13px 16px;border:1px solid #e5c988;background:#fffbef;color:#77551b;border-radius:10px;font-size:13px;line-height:1.7}
.history-load-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.history-load-actions small{font-size:11px;color:#6c7f71}
.history-load-confirm{background:#fff8e9;border:1px solid #e7d3a4;border-radius:12px;padding:14px;margin-top:12px}
.history-load-confirm h4{font-size:14px;margin:0 0 8px}
.history-load-confirm p{font-size:12px;line-height:1.8;margin:0 0 12px}
.history-load-confirm>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* Conflict recovery keeps the original draft untouched. */
#draft-conflict-notice[hidden],#draft-conflict-save-box[hidden]{display:none!important}
.member-live #draft-conflict-notice{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:16px 20px;margin-bottom:16px;background:#fff6e9;border:1px solid #e5c28d;border-radius:12px;color:#765323}
#draft-conflict-notice p{font-size:12px;line-height:1.8;margin:6px 0 0}
#draft-conflict-notice button{flex-shrink:0}
#draft-conflict-status{font-size:13px;line-height:1.8}
#draft-conflict-diff{max-height:34vh;overflow:auto}
#draft-conflict-save-box{padding:18px;margin-top:16px;background:#eaf3ee;border:1px solid #c8dfd0;border-radius:12px}
#draft-conflict-save-box h3{font-size:16px;margin:0 0 8px}
#draft-conflict-save-box p{font-size:12px;line-height:1.8;margin:0 0 12px}
#draft-conflict-save-box>label{display:block;font-size:12px}
#draft-conflict-name{width:100%;min-width:0;padding:11px 12px;margin:6px 0 14px;border:1px solid #b8cec2;border-radius:8px;font:inherit;font-size:14px}
#draft-conflict-save-box .conflict-ack{display:flex;align-items:flex-start;gap:8px;line-height:1.7}
.conflict-ack input{margin-top:4px}
#draft-conflict-dialog button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:700px){.member-live #draft-conflict-notice{flex-direction:column;align-items:stretch;padding:14px}#draft-conflict-diff{max-height:38vh}#draft-conflict-save-box{padding:14px}}
/* Progressive mobile editor: the same live inputs and preview, not duplicate forms. */
#mobile-draft-dock{display:none}
@media(max-width:800px){
  .member-live .mobile-editor-ready.is-active{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .member-live .mobile-editor-ready .contract-workspace{grid-template-columns:minmax(0,1fr)}
  .member-live .mobile-editor-ready:not(.mobile-preview-mode) .document-preview{display:none}
  .member-live .mobile-editor-ready.mobile-preview-mode .editor-panel,
  .member-live .mobile-editor-ready.mobile-preview-mode .editor-steps{display:none}
  .member-live .mobile-editor-ready.is-active #mobile-draft-dock{display:block;position:fixed;bottom:0;left:0;right:0;z-index:14;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #cfdfd6;background:#f8fcfa;box-shadow:0 -8px 30px #173b2d12}
  #mobile-draft-dock p{margin:0 0 8px;font-size:11px;color:#587463;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mobile-draft-dock>div{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
  #mobile-draft-dock button{min-height:46px;border:1px solid #c8dbcf;border-radius:10px;background:white;color:#3b5c4d;font-size:13px;font-weight:700}
  #mobile-draft-dock button[aria-pressed="true"]{background:#e6f2eb;border-color:#709e85;color:#24553d}
  #mobile-draft-dock #mobile-draft-save{background:#245d46;color:white;border-color:#245d46}
  #mobile-draft-dock button:disabled{opacity:.5;cursor:not-allowed}
  #mobile-draft-dock button:focus-visible{outline:3px solid #d2a34b;outline-offset:2px}
  .member-live .mobile-editor-ready .editor-panel input,
  .member-live .mobile-editor-ready .editor-panel select,
  .member-live .mobile-editor-ready .editor-panel textarea{font-size:16px}
  #mobile-editor-input,#mobile-editor-preview{scroll-margin-top:88px}
  .member-live .mobile-editor-ready .editor-footer button{min-height:44px}
  .member-live .mobile-editor-ready .paper-payment-table{min-width:520px}
  .member-live .mobile-editor-ready .contract-paper{overflow-wrap:anywhere}
}
@media print{#mobile-draft-dock{display:none!important}.member-live .mobile-editor-ready .document-preview{display:block!important}}
/* v48: role switching does not switch the selected account/subject. */
.party-role-switch { margin: 20px 0; padding: 20px; border: 1px solid #cbdad5; border-radius: 18px; background: linear-gradient(135deg,#f1f8f4,#faf8f1); }
.member-live .party-role-switch { display: block; }
.party-role-summary { display: grid; grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); align-items: center; gap: 12px; text-align: center; }
.party-role-summary > div { display: grid; gap: 5px; min-width: 0; }
.party-role-summary small { color: #637a6e; font-size: 11px; }
.party-role-summary strong { font-size: 29px; color: #183f31; line-height: 1.3; }
.party-role-summary span { overflow-wrap: anywhere; font-size: 12px; color: #344b40; }
#swap-contract-parties { display: grid; place-items: center; gap: 5px; min-height: 68px; width: 72px; border: 1px solid #b8cec1; border-radius: 18px; color: #234d39; background: #fff; cursor: pointer; transition: background .2s, transform .2s; }
#swap-contract-parties svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#swap-contract-parties:hover { background: #e9f3ed; }
#swap-contract-parties:active { transform: rotate(6deg); }
#swap-contract-parties:focus-visible { outline: 3px solid #4b8b70; outline-offset: 3px; }
#party-role-state { text-align: center; font-size: 12px; font-weight: 700; color: #284c3d; margin: 14px 0 10px; }
#party-role-help { font-size: 11px; line-height: 1.8; color: #68796f; margin: 0; padding-top: 12px; border-top: 1px solid #dce5de; }
@media (max-width: 480px) { .party-role-switch { padding: 15px 12px; } .party-role-summary { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { #swap-contract-parties { transition: none; } #swap-contract-parties:active { transform: none; } }
#review-invites{width:min(660px,calc(100vw - 28px));max-height:88vh;overflow:auto;border:1px solid #dbe3dc;border-radius:18px;padding:28px;color:#254536;background:#fffefa}#review-invites::backdrop{background:#152b2466}#review-invites header{display:flex;align-items:center;justify-content:space-between;gap:12px}#review-invites header small{font-size:10px;letter-spacing:1px;color:#8a9b8f}#review-invites header h2{font-size:23px}#review-invites p{font-size:13px;line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap}#review-owner-close{background:none;border:0;font-size:25px;padding:10px;cursor:pointer}#review-invites .review-owner-ack{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.8;margin:18px 0}#review-owner-list article{padding:16px 0;border-top:1px solid #dce4db;font-size:13px}#review-owner-list button{padding:10px 14px;border:1px solid #cbd7cb;border-radius:8px;background:white;color:#34533f;cursor:pointer}