@import url('/fonts.css');
:root { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; color: #17283f; background: #f5f7f9; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #12a6a3; outline-offset: 3px; }
.topbar { height: 74px; padding: 0 max(28px, calc((100vw - 1380px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #132842; color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1.5px solid #69c3c2; border-radius: 10px; color: #95dad9; font-family: Georgia, serif; font-size: 25px; }
.brand strong { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 4px; color: #9bb8c7; font-size: 9px; font-weight: 700; letter-spacing: .27em; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-label { color: #a5b5c9; font-size: 12px; }
.user-pill { max-width: 220px; padding: 7px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #ffffff3c; border-radius: 30px; font-size: 12px; }
.text-button { padding: 6px 0; border: 0; background: none; color: #207f91; font-size: 12px; font-weight: 700; }
.text-button.light { color: #d5e7eb; }
.button { min-height: 42px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { background: #177f8b; color: #fff; box-shadow: 0 5px 14px #177f8b28; }
.button.primary:hover:not(:disabled) { background: #106c78; }
.button.secondary { background: #fff; color: #27445a; border-color: #d7e0e7; }
.button.danger { background: #b94352; color: #fff; }
.button.danger-quiet { color: #aa4452; border-color: #e9cfd4; background: #fff; }
.button.wide { width: 100%; }
.eyebrow { margin: 0; color: #8cbfca; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.eyebrow.teal { color: #197c88; }
.muted { color: #6e7e8e; font-size: 13px; line-height: 1.75; }
.login-layout { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 1fr 510px; }
.login-intro { position: relative; padding: clamp(65px, 12vh, 150px) clamp(35px, 8vw, 145px); overflow: hidden; background: radial-gradient(circle at 15% 18%, #285674, transparent 34%), linear-gradient(135deg, #132842 10%, #15364d 70%, #1e6c75); color: #fff; }
.login-intro h1 { margin: 24px 0 18px; font-size: clamp(40px, 5vw, 72px); font-weight: 600; letter-spacing: -.07em; line-height: 1.24; }
.login-intro em { color: #74d1c3; font-style: normal; }
.login-intro > p:not(.eyebrow) { max-width: 470px; color: #c8d8e1; font-size: 16px; line-height: 1.8; }
.login-lines { position: absolute; right: -75px; bottom: -90px; width: 420px; height: 420px; transform: rotate(42deg); }
.login-lines span { position: absolute; border: 1px solid #ffffff26; border-radius: 35px; inset: 0; }
.login-lines span:nth-child(2) { inset: 45px; }.login-lines span:nth-child(3) { inset: 90px; }
.login-card { align-self: center; width: min(100% - 56px, 370px); margin: 50px auto; }
.card-icon { width: 44px; height: 44px; margin-bottom: 32px; display: grid; place-items: center; background: #dff1ef; color: #187d82; border-radius: 12px; font-size: 24px; }
.login-card h2 { margin: 8px 0 4px; font-size: 27px; letter-spacing: -.05em; }
.form-stack { display: flex; flex-direction: column; gap: 11px; margin-top: 35px; }
label { display: block; color: #31445a; font-size: 12px; font-weight: 700; }
input:not([type=checkbox]), textarea, select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d7e0e7; border-radius: 7px; background: #fff; color: #17283f; font-size: 13px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: #15818a; box-shadow: 0 0 0 3px #15818a1d; }
textarea { resize: vertical; }
.security-note { margin-top: 24px; color: #7b8996; font-size: 11px; }
.info-box { padding: 12px 14px; border: 1px solid #d3e9e9; border-radius: 8px; background: #eef8f7; color: #3b6570; font-size: 12px; line-height: 1.7; }
.workspace { max-width: 1380px; margin: 0 auto; padding: 40px 28px 80px; }
.workspace-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.workspace-head h1 { margin: 5px 0 1px; font-size: 31px; letter-spacing: -.055em; }
.workspace-head .muted { margin: 5px 0 0; }.head-actions { display: flex; gap: 10px; }
.metrics { margin: 30px 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { min-height: 103px; padding: 19px 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e4e9ef; border-radius: 11px; background: #fff; box-shadow: 0 8px 25px #10253b08; }
.metric span { color: #748494; font-size: 11px; }.metric strong { color: #172a43; font-size: 26px; line-height: 1; }
.workspace-grid { display: grid; grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); gap: 18px; align-items: start; }
.panel { min-height: 510px; border: 1px solid #e1e7ed; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #10253b07; }
.panel-heading { padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #e8edf1; }
.panel-heading h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.035em; }.panel-heading .muted { margin: 5px 0 0; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #edf3f5; color: #39566a; font-size: 22px; line-height: 1; }
.contract-list { max-height: 750px; overflow: auto; }
.contract-item { width: 100%; padding: 19px 23px; display: block; border: 0; border-bottom: 1px solid #edf0f3; background: #fff; text-align: left; }
.contract-item:hover, .contract-item.selected { background: #f2f8f8; }.contract-item.selected { box-shadow: inset 3px 0 #1b8791; }
.contract-item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.contract-item-title { display: block; margin: 11px 0 4px; font-size: 14px; font-weight: 750; }
.contract-item-meta { display: flex; gap: 8px; flex-wrap: wrap; color: #81909e; font-size: 11px; }.contract-item-meta span + span::before { content: '·'; margin-right: 8px; }
.status-pill { flex: none; padding: 5px 9px; border-radius: 99px; background: #ecf3f5; color: #4b6879; font-size: 10px; font-weight: 750; }
.status-pill.sent, .status-pill.partially_signed { background: #e4f4f6; color: #197888; }.status-pill.completed { background: #e5f3e8; color: #287b48; }.status-pill.voided, .status-pill.declined, .status-pill.expired, .status-pill.failed { background: #fbecee; color: #ad5360; }
.test-tag { display: inline-block; padding: 3px 6px; border: 1px solid #d4a654; border-radius: 4px; color: #996b28; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.empty-state { min-height: 430px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.empty-state h2 { margin: 14px 0 0; font-size: 18px; }.empty-state p { max-width: 280px; color: #8b99a7; font-size: 12px; line-height: 1.7; }.empty-glyph { color: #a8bdc9; font-size: 42px; }
.detail-heading { align-items: start; }.detail-heading h2 { font-size: 22px; }.detail-actions { padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e8edf1; }
.test-banner { margin: 18px 24px 0; padding: 11px 13px; display: flex; gap: 12px; align-items: center; border: 1px solid #e8d8b5; border-radius: 7px; background: #fff8ec; color: #7b622e; font-size: 11px; }.test-banner strong { letter-spacing: .08em; }
.detail-section { padding: 22px 24px; border-bottom: 1px solid #e8edf1; }.detail-section:last-child { border-bottom: 0; }.section-heading { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }.section-heading h3 { margin: 0; font-size: 14px; }.section-heading small { color: #8a98a6; font-size: 10px; }
.signer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.signer-card { padding: 14px; border: 1px solid #e3e8ec; border-radius: 8px; background: #fbfcfd; }.signer-card strong { font-size: 13px; }.signer-card p { margin: 7px 0 0; color: #667789; font-size: 11px; overflow-wrap: anywhere; }.role-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 5px; background: #e4f2f1; color: #177c83; font-size: 12px; font-weight: 800; }.signer-status { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.signer-order-label { margin-left: 7px; color: #197888; font-size: 9px; font-weight: 750; }
.workflow-summary { background: #f8fbfb; }.workflow-order { display: flex; align-items: stretch; gap: 9px; }.workflow-step { min-width: 0; flex: 1; padding: 12px; display: flex; gap: 9px; align-items: start; border: 1px solid #d9e7e8; border-radius: 8px; background: #fff; }.workflow-step-number { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #177f8b; color: #fff; font-size: 10px; font-weight: 800; }.workflow-step strong, .workflow-step small { display: block; }.workflow-step strong { font-size: 11px; }.workflow-step small { margin-top: 4px; color: #728592; font-size: 9px; overflow-wrap: anywhere; }.workflow-arrow { align-self: center; color: #6e98a0; }.revision-info { margin-top: 13px; padding-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; border-top: 1px solid #dce8e9; font-size: 10px; }.revision-link { padding: 5px 8px; border: 1px solid #cfe0e3; border-radius: 5px; background: #fff; color: #176f7b; font-size: 10px; }
.event-list { display: grid; gap: 7px; }.event-row { padding: 10px 12px; display: flex; align-items: start; justify-content: space-between; gap: 15px; border-radius: 7px; background: #f6f8fa; font-size: 11px; }.event-row strong { display: block; font-size: 11px; }.event-row span { color: #81909e; overflow-wrap: anywhere; }.event-row .event-state { text-align: right; }.empty-line { margin: 0; color: #8493a1; font-size: 11px; }
.download-list { display: flex; flex-wrap: wrap; gap: 9px; }.download-link { padding: 10px 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d8e2e8; border-radius: 7px; color: #26576b; font-size: 11px; font-weight: 700; text-decoration: none; }.download-link:hover { background: #f0f7f7; }
dialog { max-height: min(90vh, 900px); padding: 0; border: 1px solid #dfe6ec; border-radius: 12px; color: #17283f; box-shadow: 0 30px 100px #1121385a; }dialog::backdrop { background: #10203799; backdrop-filter: blur(3px); }
.drawer-dialog { width: min(95vw, 680px); margin: auto max(0px, 2vw) auto auto; max-height: 100vh; border-radius: 12px 0 0 12px; }.drawer-form { display: flex; flex-direction: column; max-height: 100vh; }.drawer-head, .drawer-footer { padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; }.drawer-head { border-bottom: 1px solid #e6ebef; }.drawer-head h2 { margin: 5px 0 0; font-size: 22px; }.drawer-body { padding: 20px 26px 32px; overflow: auto; }.drawer-body > label { margin: 18px 0 7px; }.drawer-footer { border-top: 1px solid #e6ebef; justify-content: end; }
.test-choice { margin: 20px 0; padding: 16px; display: flex; gap: 10px; align-items: start; border: 1px solid #e8d6a9; border-radius: 8px; background: #fff9ec; }.test-choice input { margin: 3px 0; accent-color: #a77216; }.test-choice label strong { display: block; color: #795927; font-size: 13px; }.test-choice label span { display: block; margin-top: 4px; color: #987c50; font-size: 11px; font-weight: 400; line-height: 1.5; }
.party-fieldset { margin-top: 16px; padding: 18px; border: 1px solid #e1e8ee; border-radius: 9px; }.party-label { display: flex; align-items: center; gap: 3px; margin-bottom: 17px; }.party-label strong { font-size: 14px; }.party-label small { margin-left: auto; color: #8a98a6; font-size: 10px; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.field-grid .full { grid-column: 1 / -1; }.field-grid label { margin-bottom: 6px; }.required { color: #bd5164; }.optional { color: #8795a1; font-size: 10px; font-weight: 500; }.form-footnote { margin: 20px 0 0; color: #8593a1; font-size: 11px; line-height: 1.6; }
.workflow-drawer { width: min(97vw, 780px); }.workflow-editor, .field-designer { margin-top: 20px; padding: 18px; border: 1px solid #dce7eb; border-radius: 10px; background: #fbfcfd; }.workflow-editor .section-heading, .field-designer .section-heading { margin-bottom: 13px; }.workflow-editor label, .field-designer > label { margin: 12px 0 6px; }.workflow-version, .field-count { padding: 5px 8px; border-radius: 99px; background: #e4f3f2; color: #197781; font-size: 9px; font-weight: 800; }.sequence-note { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #1a8790; background: #edf7f7; color: #345f69; font-size: 11px; line-height: 1.65; }.field-designer > .muted { margin: -2px 0 12px; font-size: 11px; }.field-designer textarea[readonly] { white-space: pre-wrap; background: #fff; color: #334d5e; line-height: 1.7; cursor: text; }.selection-status { min-height: 24px; margin: 7px 0 12px; color: #647b8a; font-size: 10px; line-height: 1.6; }.field-config { grid-template-columns: 1.5fr 1fr .75fr .8fr; }.field-required-wrap { display: flex; align-items: end; }.check-line.compact { width: 100%; min-height: 43px; margin: 0; padding: 9px 10px; align-items: center; border: 1px solid #d7e0e7; border-radius: 7px; background: #fff; }.check-line.compact input { margin: 0; accent-color: #177f8b; }.field-designer-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }.field-list-head { margin-top: 20px; display: flex; justify-content: space-between; gap: 10px; }.field-list-head strong { font-size: 12px; }.field-list-head small { color: #7e8e99; font-size: 9px; }.field-definition-list { margin-top: 9px; display: grid; gap: 7px; }.field-definition-row { padding: 10px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 32px; gap: 9px; align-items: start; border: 1px solid #e0e7eb; border-radius: 8px; background: #fff; }.field-definition-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #e8f3f3; color: #19727b; font-size: 10px; font-weight: 800; }.field-definition-copy strong, .field-definition-copy span, .field-definition-copy small { display: block; }.field-definition-copy strong { font-size: 12px; }.field-definition-copy span { margin-top: 3px; color: #5d7381; font-size: 10px; line-height: 1.5; }.field-definition-copy small { margin-top: 3px; color: #8897a2; font-size: 9px; }.field-remove { width: 28px; height: 28px; font-size: 17px; }
.preview-dialog { width: min(95vw, 950px); padding: 22px; }.dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 15px; }.dialog-top h2 { margin: 4px 0 0; font-size: 20px; }.preview-dialog iframe { width: 100%; height: min(65vh, 700px); margin-top: 15px; border: 1px solid #dce5eb; border-radius: 7px; background: #fff; }.review-notes { margin-top: 13px; color: #697a8b; font-size: 11px; line-height: 1.6; }.review-notes ul { padding-left: 20px; }.review-notes li + li { margin-top: 5px; }
.small-dialog { width: min(94vw, 470px); padding: 25px; }.small-dialog .muted { margin: 17px 0 22px; }.small-dialog textarea { margin-top: 7px; }.dialog-actions { margin-top: 25px; display: flex; justify-content: end; gap: 8px; }
.toast { position: fixed; z-index: 100; right: 25px; bottom: 25px; max-width: min(90vw, 460px); padding: 14px 18px; border-radius: 8px; background: #18364d; color: #fff; box-shadow: 0 15px 35px #152b4661; font-size: 12px; line-height: 1.6; }.toast.error { background: #a74450; }
@media (max-width: 900px) { .login-layout { grid-template-columns: 1fr; }.login-intro { padding: 55px 30px; }.login-intro h1 { font-size: 38px; }.login-card { margin: 55px auto; }.workspace-grid { grid-template-columns: 1fr; }.contract-list { max-height: 360px; }.metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .topbar { height: 65px; padding: 0 17px; }.topbar-label { display: none; }.brand strong { font-size: 15px; }.user-pill { max-width: 130px; }.workspace { padding: 25px 14px 55px; }.workspace-head { align-items: stretch; flex-direction: column; }.head-actions { flex-wrap: wrap; }.head-actions .button { flex: 1; }.metrics { gap: 7px; margin: 20px 0 14px; }.metric { min-height: 85px; padding: 13px; }.metric strong { font-size: 23px; }.panel-heading, .detail-section { padding: 17px; }.detail-actions { padding: 15px 17px; }.signer-list { grid-template-columns: 1fr; }.section-heading { flex-direction: column; gap: 3px; }.workflow-order { flex-direction: column; }.workflow-arrow { transform: rotate(90deg); }.drawer-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }.drawer-body, .drawer-head, .drawer-footer { padding-left: 17px; padding-right: 17px; }.field-grid, .field-config { grid-template-columns: 1fr; }.field-grid .full { grid-column: auto; }.party-label { flex-wrap: wrap; }.party-label small { width: 100%; margin-left: 0; }.field-designer-actions .button { width: 100%; }.field-list-head { align-items: start; flex-direction: column; }.preview-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }.preview-dialog iframe { height: 70vh; } }