.account-menu { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.button.account-button { display: grid; gap: 2px; max-width: 220px; text-align: right; }
.account-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button small { color: var(--ink-600); font-size: 11px; }
.editor-dialog.profile-dialog { width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; }
.profile-dialog .editor-body { overflow-y: auto; min-height: 0; }
.profile-dialog input { min-height: 44px; font-size: 16px; }
.profile-dialog .button { min-height: 44px; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.permission-grid label { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .button.account-button { max-width: 140px; min-height: 44px; }
    .account-menu > .button { min-height: 44px; }
    .profile-dialog .editor-body { padding: 16px; }
}

.workspace-toolbar.workspace-toolbar--shared { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px 16px; padding: 16px; }
.workspace-toolbar--shared .toolbar-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr)); align-items: end; gap: 12px; min-width: 0; }
.workspace-toolbar--shared .toolbar-field, .workspace-toolbar--shared .toolbar-filter { display: grid; gap: 6px; min-width: 0; }
.workspace-toolbar--shared :is(.toolbar-field,.toolbar-filter) > .field-control { width: 100%; min-width: 0; }
.toolbar-field-label { color: var(--ink-600); font-size: 12px; font-weight: 600; }
.workspace-toolbar--shared .toolbar-actions { justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.workspace-toolbar--shared .check-control { min-height: 36px; white-space: normal; }
.toolbar-result { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); }
.parameter-table-scroll { overflow-x: auto; max-width: 100%; }
.detail-fields-grid > .parameter-table-scroll { grid-column: 1 / -1; }
.parameter-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.parameter-table :is(th,td) { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.parameter-table th { color: var(--ink-600); background: var(--surface-subtle); }
.parameter-table .field-control { width: 100%; min-width: 110px; }
.parameter-table td:last-child { min-width: 90px; }
.json-parameter-editor { grid-column: 1 / -1; min-width: 0; }
.json-parameter-editor h4 { margin: 0; }
@media (max-width: 900px) {
    .workspace-toolbar.workspace-toolbar--shared { grid-template-columns: minmax(0,1fr); }
    .workspace-toolbar--shared .toolbar-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .workspace-toolbar.workspace-toolbar--shared { padding: 12px; }
    .workspace-toolbar--shared .toolbar-filters { grid-template-columns: minmax(0,1fr); }
    .workspace-toolbar--shared :is(.field-control,.button,.check-control) { min-height: 44px; }
    .workspace-toolbar--shared .field-control { font-size: 16px; }
    .parameter-table :is(input:not([type="checkbox"]):not([type="radio"]),select,.button) { min-height: 44px; font-size: 16px; }
}

/* 조회는 약하게, 등록·수정·확정·다운로드·위험 동작은 각각의 역할색으로 표시한다. */
.button {
    --button-ink: var(--ink-800);
    --button-bg: var(--surface);
    --button-border: var(--line-strong);
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 4px 12px;
    color: var(--button-ink);
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.button:hover:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--button-bg) 92%, var(--ink-950));
    border-color: color-mix(in srgb, var(--button-border) 65%, var(--ink-600));
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--button-bg) 84%, var(--ink-950));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);
}

.button:disabled, .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
}

.button:focus-visible,
.nav-link:focus-visible,
.field-control:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* 추가·저장은 같은 파랑을 공유하며 역할 클래스는 구분한다. success는 기존 저장 버튼의 호환 이름이다. */
.button-primary, .primary-action, .button-confirm, .button-success {
    --button-ink: var(--surface);
    --button-bg: var(--accent-strong);
    --button-border: var(--accent-strong);
}

.button-quiet, .button-neutral, .pager .button {
    --button-ink: var(--ink-600);
    --button-bg: var(--surface);
    --button-border: var(--line-strong);
}

/* 수정 시작의 기존 호환 클래스다. 상태 경고의 의미와는 별도로 사용한다. */
.button-warning {
    --button-ink: var(--surface);
    --button-bg: var(--warning);
    --button-border: var(--warning);
}

.danger-action:not(.button) { color: var(--danger); }
.button.danger-action, .button.button-danger {
    --button-ink: var(--surface);
    --button-bg: var(--danger);
    --button-border: var(--danger);
}

.button-icon { width: 34px; padding: 0; }

.page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: 15px;
}

.page-intro h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.page-intro p {
    max-width: 760px;
    margin: 4px 0 0;
    color: var(--ink-600);
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.summary-item {
    min-width: 0;
    padding: 15px;
}

.summary-item + .summary-item {
    border-left: 1px solid var(--line);
}

/* 요약 수치의 종류를 표시하는 장식 아이콘. 의미는 옆의 텍스트로 제공한다. */
.summary-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
}

.summary-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.summary-label {
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 650;
}

.summary-value {
    display: block;
    margin-top: 4px;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
    letter-spacing: -.04em;
}

.summary-meta {
    display: block;
    margin-top: var(--space-1);
    color: var(--ink-400);
    font-size: 11px;
}

.content-grid[hidden] { display: none; }

.content-grid {
    display: grid;
    gap: 15px;
    margin-top: 15px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.panel-header {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 15px;
    border-bottom: 1px solid var(--line);
}

.panel-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.panel-body {
    padding: 15px;
}

.log-detail-body pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 32rem;
    overflow: auto;
}

.workflow-list,
.activity-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.workflow-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.workflow-link:hover {
    background: var(--surface-subtle);
    border-color: var(--line);
}

.workflow-index {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    color: #ffffff;
    background: var(--primary-color, #2c5282);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.workflow-copy {
    min-width: 0;
    flex: 1;
}

.workflow-copy strong,
.workflow-copy span {
    display: block;
}

.workflow-copy span {
    color: var(--ink-600);
    font-size: 12px;
}

.quick-link-groups { display: grid; gap: var(--space-5); }
.quick-group-link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.quick-work-guide { margin-top: var(--space-4); max-width: 52rem; }
.quick-work-guide .panel-header h2 { margin: 0; font-size: 16px; }
.quick-work-guide .record-actions { margin-top: var(--space-4); flex-wrap: wrap; }
.quick-work-guide [hidden], .recommended-work[hidden] { display: none; }
.recommended-work { flex: 0 0 auto; }
.recommended-work summary { cursor: pointer; list-style: none; }
.recommended-work summary::-webkit-details-marker { display: none; }
.recommended-work-panel {
    position: absolute;
    inset: 100% var(--space-3) auto auto;
    width: min(25rem, calc(100vw - 24px));
    max-height: calc(100dvh - var(--header-height) - 12px);
    overflow: auto;
    padding: var(--space-3);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.recommended-work-panel h2 { margin: 0 0 var(--space-2); font-size: 14px; }
.recommended-work-panel[popover] {
    position: fixed;
    inset: var(--recommended-work-top, var(--header-height)) var(--space-3) auto auto;
    margin: 0;
}
.recommended-work-panel .workflow-link { gap: var(--space-2); }
.recommended-work-panel .status-badge, .quick-work-guide .status-badge { flex-shrink: 0; }
.quick-link-group h4 { margin: 0 0 var(--space-2); color: var(--ink-600); font-size: 13px; }
.quick-link-group + .quick-link-group { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.quick-link-group[hidden], .registration-wizard-panel[hidden], .registration-wizard-bar[hidden],
.registration-wizard-review[hidden] { display: none; }
.quick-links-empty { padding: var(--space-4); }
.workflow-link:focus-visible, .registration-wizard-bar button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.registration-wizard-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.registration-wizard-progress { align-self: center; margin: 0; font-weight: 700; color: var(--ink-950); overflow-wrap: anywhere; }
.registration-wizard-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); grid-column: 1 / -1; margin: 0; padding-left: var(--space-5); color: var(--ink-600); font-size: 12px; }
.registration-wizard-steps[hidden] { display: none; }
.registration-wizard-steps li[aria-current="step"] { color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.registration-wizard-review h4 { margin: 0 0 var(--space-2); }
.registration-review-section { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-4); }
.registration-review-section h5 { font-size: 13px; margin: 0 0 var(--space-2); }
.registration-review-values { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-4); font-size: 13px; }
.registration-review-values dt { color: var(--ink-600); overflow-wrap: anywhere; }
.registration-review-values dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto; }
@media (min-width: 1280px) {
    .quick-link-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-link-group + .quick-link-group { border-top: 0; padding-top: 0; }
    .quick-link-reference { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--space-4); }
    .quick-link-reference .workflow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .registration-wizard-bar { grid-template-columns: minmax(0, 1fr); }
    .registration-wizard-bar button { justify-self: start; }
    .registration-review-values { grid-template-columns: minmax(0, 1fr); }
    .registration-review-values dd { margin-bottom: var(--space-2); }
    .editor-footer { flex-wrap: wrap; }
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.status-row + .status-row {
    border-top: 1px solid var(--line);
}

.status-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 8px;
    color: var(--ink-600);
    background: var(--surface-muted);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.status-badge.is-success {
    color: var(--success);
    background: var(--success-soft);
}

.status-badge.is-warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.record-list .record-card.has-inactive-reference { background: var(--warning-soft); }
.record-list .record-card.has-inactive-reference.is-selected { background: var(--warning-soft); box-shadow: inset 3px 0 var(--warning); }
.inactive-reference { color: var(--warning); }
.detail-kv-label.inactive-reference, .editor-dialog .field > label.inactive-reference { color: var(--warning); font-weight: 750; background: var(--warning-soft); border-radius: var(--radius-sm); padding-inline: 4px; }
.inactive-reference-warning { display: inline-block; color: var(--warning); margin-inline-start: 4px; }
.record-meta .inactive-reference-note, .field .inactive-reference-hint { color: var(--warning); }
select.field-control.inactive-reference-control { border-color: var(--warning); background: var(--warning-soft); }
.detail-header .panel-heading-copy > span span { display: inline; }
.detail-header .panel-heading-copy > span .inactive-reference { color: var(--warning); }
.workspace-item-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.workspace-item-link:hover { text-decoration-thickness: 2px; }
.workspace-item-link:focus-visible { outline: 2px solid var(--warning); outline-offset: 3px; }
.compatibility-workspace .service-card > .record-meta { padding: 0 11px 10px; }
.status-indicator { display: inline-block; margin-inline-start: 4px; cursor: help; }
.status-indicator-image { display: inline-block; width: 16px; height: 16px; max-width: none; vertical-align: -3px; }
.status-indicator.is-warning { color: var(--warning); }
.status-indicator.is-error { color: var(--danger); }
.status-indicator.is-info { color: var(--info); }
.status-indicator-tooltip {
    position: fixed; inset: auto; margin: 0; z-index: 1000;
    width: max-content; max-width: min(320px, calc(100vw - 16px));
    box-sizing: border-box; padding: 8px 10px;
    color: var(--ink-950); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 3px 10px #0002; font-size: 12px; font-weight: 400;
    line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-align: left;
    text-decoration: none; cursor: default;
}
.status-indicator-tooltip[hidden] { display: none !important; }
.detail-header .panel-heading-copy .status-indicator-tooltip { display: block; white-space: normal; overflow: visible; color: var(--ink-950); }
.status-indicator:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }
.entity-list-table tr.has-reference-warning { background: var(--warning-soft); }
.entity-list-table tr.has-reference-warning.is-selected { background: var(--warning-soft); }
.entity-list-table .reference-warning-cell { background: var(--warning-soft); color: var(--warning); }
.entity-list-cell-summary { display: inline-flex; align-items: center; white-space: nowrap; }
.entity-list-cell-summary > .status-indicator { flex-shrink: 0; }
.workspace-item-link.inactive-reference { color: var(--warning); }
.reference-editor-warning { color: var(--warning); }
.reference-inline-label { background: var(--warning-soft); font-weight: 600; }
.contract-connection-card.has-reference-warning { background: var(--warning-soft); }

.state-box {
    display: grid;
    min-height: 150px;
    place-items: center;
    padding: 24px;
    color: var(--ink-600);
    text-align: center;
}

.state-box strong {
    display: block;
    color: var(--ink-800);
    font-size: 15px;
}

.state-box p {
    max-width: 520px;
    margin: var(--space-2) auto 0;
}

.notice {
    padding: 10px 12px;
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid #bed8e5;
    border-radius: var(--radius-sm);
}

.field {
    display: grid;
    gap: 6px;
}

.field[hidden] {
    display: none;
}

.form-stack[hidden],
.editor-body[hidden] {
    display: none;
}

.field label {
    color: var(--ink-800);
    font-size: 12px;
    font-weight: 700;
}

.field-required {
    margin-left: 4px;
    color: var(--danger);
}

.field-control {
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    color: var(--ink-950);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.field-control:focus {
    border-color: var(--accent);
}

.field-control[data-validation="valid"] {
    border-color: var(--success);
    background: var(--success-soft);
}

.field-control[data-validation="invalid"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.field-control[data-validation="valid"]:focus-visible {
    outline-color: var(--success);
}

.field-control[data-validation="invalid"]:focus-visible {
    outline-color: var(--danger);
}

.field-validation-message {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.field-input-help {
    position: absolute;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    max-height: min(240px, 40vh);
    overflow: auto;
    z-index: 10000;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.field-input-hint {
    display: block;
    color: var(--ink-600);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.field-input-help[hidden],
.field-input-hint[hidden] {
    display: none;
}

.field-input-help .field-validation-message {
    margin-top: 0;
}

.field-input-hint:not([hidden]) + .field-validation-message:not([hidden]) {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.field-validation-cell {
    min-width: 0;
}

.field-validation-message[hidden] {
    display: none;
}

.field-validation-message[data-validation="valid"] {
    color: var(--success);
}

.field-validation-message[data-validation="invalid"] {
    color: var(--danger);
}

.form-stack {
    display: grid;
    gap: var(--space-4);
}

.form-error {
    margin: 0;
    padding: var(--space-3);
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.form-error[hidden],
.form-error:empty {
    display: none;
}

.login-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
}

.login-panel {
    width: 100%;
    max-width: 360px;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 25px;
}

.login-panel h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.035em;
}

.login-panel > p {
    margin: 5px 0 22px;
    color: var(--ink-600);
}

.login-context {
    display: none;
}

.login-context-copy {
    max-width: 680px;
}

.login-context-kicker {
    color: #78b9a9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
}

.login-context h2 {
    margin: var(--space-3) 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.12;
    letter-spacing: -.045em;
}

.login-context p {
    max-width: 560px;
    margin: 0;
    color: #aebfc8;
    font-size: 15px;
}

.toast-region {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1100;
    display: grid;
    width: min(360px, calc(100vw - 40px));
    gap: var(--space-2);
}

.toast-message {
    padding: var(--space-3) var(--space-4);
    color: #fff;
    background: var(--ink-950);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.toast-message.is-error {
    background: var(--danger);
}

.workspace-toolbar {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 7px 12px;
    margin-bottom: var(--space-4);
}

.toolbar-group,
.toolbar-actions,
.check-control,
.record-title-row,
.record-meta,
.record-actions {
    display: flex;
    align-items: center;
}

.toolbar-group,
.toolbar-actions {
    gap: var(--space-3);
}

.check-control {
    min-height: 32px;
    gap: var(--space-2);
    color: var(--ink-800);
    cursor: pointer;
    font-weight: 600;
}

.check-control input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

/* Choice inputs keep their own dimensions, including inside input tables. */
input.choice-control,
input.field-control:is([type="checkbox"], [type="radio"]) {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.field.field-choice {
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    column-gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
}

.field-choice > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.field-choice > input {
    justify-self: end;
}

.parameter-table input.choice-control {
    display: block;
    margin-inline-start: auto;
}

.parameter-table .choice-cell {
    min-width: 80px;
    text-align: right;
    white-space: nowrap;
}

.choice-control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toolbar-summary {
    color: var(--ink-600);
    font-size: 12px;
}

.master-detail {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(440px, 1.65fr);
    align-items: start;
    gap: var(--space-4);
}

.master-panel,
.detail-panel {
    min-width: 0;
}

.detail-header {
    min-height: 52px;
}

.panel-heading-copy {
    min-width: 0;
}

.panel-heading-copy h3,
.panel-heading-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-heading-copy span {
    margin-top: 1px;
    color: var(--ink-600);
    font-size: 11px;
}

.record-list {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
}

.group-list {
    max-height: calc(100vh - 225px);
    overflow-y: auto;
}

.record-card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.record-card.is-selected {
    background: var(--accent-soft);
    border-color: #8cbce5;
    box-shadow: inset 3px 0 0 var(--accent);
}

.record-select {
    display: block;
    width: 100%;
    padding: 10px 11px;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.group-card-header {
    display: flex;
    align-items: flex-start;
}

.group-card-header > .record-select {
    flex: 1;
    min-width: 0;
}

.group-essential-toggle {
    flex: 0 0 auto;
    gap: var(--space-1);
    margin: 6px 11px 0 0;
    font-size: 12px;
    white-space: nowrap;
}

.record-select:focus-visible,
.editor-dialog:focus-visible,
.check-control input:focus-visible {
    outline: 3px solid rgb(49 130 206 / 24%);
    outline-offset: 2px;
}

.record-title-row {
    justify-content: space-between;
    gap: var(--space-3);
}

.record-title-row strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-code {
    display: inline-block;
    margin-top: 3px;
    color: var(--accent-strong);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
}

.record-description {
    display: -webkit-box;
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--ink-600);
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.record-actions {
    justify-content: flex-end;
    gap: var(--space-1);
    padding: 4px 7px;
    border-top: 1px solid var(--line);
}

.record-actions .button {
    min-height: 28px;
    padding: 2px 7px;
    font-size: 11px;
}

.code-card .record-actions {
    flex-wrap: wrap;
}

.code-card .record-actions .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.code-deactivate-dialog .editor-footer {
    flex-wrap: wrap;
}

.code-deactivate-dialog .editor-footer .button {
    white-space: nowrap;
}

.code-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code-list .state-box {
    grid-column: 1 / -1;
}

.code-card {
    display: flex;
    min-height: 126px;
    flex-direction: column;
}

.record-main {
    flex: 1;
    padding: 11px;
}

.record-meta {
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: 5px;
    color: var(--ink-400);
    font-size: 11px;
}

.record-meta .record-code {
    margin-top: 0;
}

.compact-state {
    min-height: 126px;
}

.editor-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.editor-dialog::backdrop {
    background: rgb(9 18 25 / 58%);
}

.editor-form {
    display: flex;
    max-height: inherit;
    flex-direction: column;
}

.editor-header,
.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 14px;
}

.editor-header {
    border-bottom: 1px solid var(--line);
}

.editor-header h3 {
    margin: 0;
    font-size: 15px;
}

.editor-body {
    overflow-y: auto;
    padding: 15px;
}

.editor-footer {
    justify-content: flex-end;
    background: var(--surface-subtle);
    border-top: 1px solid var(--line);
}

.editor-textarea {
    min-height: 92px;
    resize: vertical;
}

.editor-check {
    width: fit-content;
}

.status-badge.is-info {
    color: var(--info);
    background: var(--info-soft);
}

.status-badge.is-danger {
    color: var(--danger);
    background: var(--danger-soft);
}

/* Shared list search toolbar: accommodate each page's filter count. */
.toolbar-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.toolbar-search > .field-control:not(.toolbar-select) {
    flex: 1 1 220px;
    width: auto;
    min-width: 160px;
}

.toolbar-search > .toolbar-select,
.toolbar-search > .check-control,
.toolbar-search > .toolbar-summary,
.workspace-toolbar > .toolbar-actions {
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 180px;
    min-width: 0;
}

.toolbar-filter > label {
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-filter > .field-control {
    flex: 1;
    width: 0;
    min-width: 120px;
}

.toolbar-select {
    width: 130px;
}

.record-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.company-card .record-select {
    min-height: 92px;
}

.detail-body-actions {
    display: flex;
    gap: var(--space-2);
}

.detail-body-actions .button {
    min-height: 30px;
}

.detail-header {
    flex-wrap: wrap;
    row-gap: 6px;
}

.company-detail {
    display: grid;
    gap: var(--space-4);
}

.detail-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 22px;
    padding: 15px;
}

.detail-fields-grid h4,
.detail-role-badges {
    grid-column: 1 / -1;
}

.detail-fields-grid h4 {
    margin: 0;
    color: var(--ink-600);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.detail-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.detail-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.detail-kv-label {
    color: var(--ink-400);
    font-size: 11px;
}

.detail-kv-value {
    overflow-wrap: anywhere;
    color: var(--ink-800);
}

.detail-memo {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--space-3);
    color: var(--ink-600);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
}

.detail-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.inner-panel {
    box-shadow: none;
}

.detail-kv-list {
    display: grid;
    gap: var(--space-3);
}

.history-list {
    display: grid;
    gap: var(--space-2);
}

.history-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 0;
}

.history-row + .history-row {
    border-top: 1px solid var(--line);
}

.history-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: var(--ink-600);
    font-size: 11px;
}

.role-fields {
    display: grid;
    gap: var(--space-4);
}

.editor-scroll {
    max-height: calc(100vh - 180px);
}

.editor-section + .editor-section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.editor-section h4 {
    margin: 0 0 var(--space-3);
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.address-control {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.address-control .field-control {
    flex: 1 1 auto;
    min-width: 0;
}

.address-control .address-search-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.region-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: 6px 2px;
}

.region-options:empty::before {
    content: "-";
    color: var(--ink-600);
    font-size: 12px;
}

.field-hint {
    color: var(--ink-600);
    font-size: 12px;
}

.editor-field-group + .editor-field-group {
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}
.editor-field-group h4 { margin-bottom: 0; }
.editor-group-hint, .identifier-hint { margin: 0; line-height: 1.6; }
.provided-contract-number { font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; }
.field-required { margin-left: var(--space-2); font-size: 11px; font-weight: 700; color: var(--ink-700); }

.company-editor {
    width: min(760px, calc(100vw - 32px));
}

/* Searchable entity selectors inside editor dialogs. */
.entity-select-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    min-width: 0;
}

.entity-select-control > select {
    min-width: 0;
}

.entity-select-control > .button {
    white-space: nowrap;
}

.entity-select-control > .field-input-help {
    grid-column: 1 / -1;
}

.editor-dialog.entity-picker-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
}

.entity-picker-dialog[open] {
    display: flex;
    flex-direction: column;
}

.entity-picker-dialog > .editor-header,
.entity-picker-dialog > .editor-footer {
    flex-shrink: 0;
}

.entity-picker-body {
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.entity-picker-body .field-hint {
    margin: 4px 0;
}

.entity-picker-results {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
}

.entity-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.entity-picker-row > .button {
    flex-shrink: 0;
}

.entity-picker-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
    overflow-wrap: anywhere;
}

.entity-picker-footer {
    justify-content: space-between;
    flex-wrap: wrap;
}

.entity-picker-dialog [hidden] {
    display: none !important;
}

.entity-picker-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Service editor: grow with specification rows, then scroll only the body. */
.editor-dialog.service-editor {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
}

.service-editor .editor-header,
.service-editor .editor-footer {
    flex-shrink: 0;
}

.service-editor .editor-body {
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.service-spec-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.service-spec-heading h4 {
    margin-bottom: 0;
}

.service-spec-hint {
    margin: var(--space-2) 0 var(--space-3);
}

.service-spec-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.service-spec-scroll .service-spec-table {
    min-width: 620px;
}

.service-spec-table th,
.service-spec-table td {
    padding: 8px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.service-spec-table th {
    color: var(--ink-600);
    background: var(--surface-subtle);
    font-size: 12px;
}

.service-spec-table th:first-child {
    width: 48px;
}

.service-spec-table th:nth-child(2) {
    width: 35%;
}

.service-spec-table th:last-child {
    width: 68px;
}

.service-spec-table .service-spec-number {
    color: var(--ink-600);
    text-align: center;
}

.service-spec-table .field-control {
    min-width: 0;
    width: 100%;
}

.service-spec-table td:focus-within {
    background: var(--surface-subtle);
}

.service-spec-add {
    width: 100%;
    margin-top: var(--space-2);
    border-style: dashed;
}

@media (max-width: 560px) {
    .service-spec-table th,
    .service-spec-table td {
        padding: 4px;
    }

    .service-spec-table th:first-child {
        width: 32px;
    }

    .service-spec-table th:last-child {
        width: 56px;
    }

    .service-spec-table .button {
        padding-inline: 6px;
    }
}

.config-list {
    display: grid;
    gap: var(--space-3);
}

.config-card {
    display: flex;
    flex-direction: column;
}

.config-params {
    max-height: 220px;
    margin-top: var(--space-2);
}

.param-header {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 11px;
    color: var(--ink-600);
    background: var(--surface-subtle);
    border-top: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
}

.param-list {
    display: grid;
    gap: 1px;
    border-top: 1px solid var(--line);
}

.service-parameter-scroll { min-width: 0; }
.service-detail { grid-template-columns: minmax(0, 1fr); }
.service-detail > .inner-panel { min-width: 0; }
.service-detail > .inner-panel > .panel-header { flex-wrap: wrap; gap: var(--space-2); }
.service-detail > .inner-panel > .panel-header > .detail-body-actions { flex-wrap: wrap; min-width: 0; }
.service-parameter-table { min-width: 640px; table-layout: fixed; }
.service-parameter-table tr > :nth-child(1) { width: 24%; }
.service-parameter-table tr > :nth-child(2) { width: 54%; }
.service-parameter-table tr > :nth-child(3) { width: 12%; }
.service-parameter-table tr > :nth-child(4) { width: 10%; min-width: 0; }
.service-parameter-table tbody th { background: var(--surface); font-weight: 400; }
.service-parameter-table code { font-family: Consolas, "Courier New", monospace; }
.service-parameter-table .service-parameter-value { white-space: pre-wrap; }

.param-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 7px 11px;
    background: var(--surface);
}

.param-row + .param-row {
    border-top: 1px solid var(--line);
}

.param-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.param-copy strong {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.param-copy span {
    color: var(--ink-600);
    font-size: 11px;
}

.param-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.param-empty {
    padding: 10px 11px;
    color: var(--ink-400);
    font-size: 11px;
}

.param-edit-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 11px;
    background: var(--surface);
}

.service-param-input-list {
    display: grid;
    gap: var(--space-2);
    overflow-x: auto;
}

.service-param-input-row {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) minmax(220px, 2fr) minmax(140px, 1fr) auto;
    align-items: start;
    gap: var(--space-2);
    min-width: 710px;
}

.service-param-input-row > .field {
    min-width: 0;
    margin: 0;
}

.service-param-input-row > .item-copy-actions {
    align-self: end;
    white-space: nowrap;
}

.service-param-input-row > input[type="checkbox"] { align-self: center; }
.item-copy-toolbar, .item-copy-actions { display: flex; align-items: center; gap: var(--space-2); }
.item-copy-toolbar { flex-wrap: wrap; margin-bottom: var(--space-2); }
.model-item-copy-list { display: grid; gap: var(--space-1); max-height: 260px; overflow: auto; }
.model-item-copy-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.model-item-copy-row code { overflow-wrap: anywhere; }

.param-edit-row + .param-edit-row {
    border-top: 1px solid var(--line);
}

.param-edit-key {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.param-edit-key code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.param-edit-value {
    min-width: 0;
    color: var(--ink-600);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.param-edit-row .check-control {
    min-height: 0;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .param-edit-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.installer-list {
    display: grid;
    gap: var(--space-3);
}

.installer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
}

.field-control-label {
    color: var(--ink-600);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.log-results {
    min-height: 120px;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.history-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.log-type-tabs {
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.log-type-tabs .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.log-detail-dialog {
    width: min(960px, calc(100vw - 32px));
}

.log-detail-dialog[open] {
    display: flex;
    flex-direction: column;
}

.log-detail-dialog .editor-header {
    flex-shrink: 0;
}

.log-detail-dialog .log-detail-body {
    min-height: 0;
    overflow: auto;
}

.log-detail-dialog pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.device-relations {
    display: grid;
    gap: var(--space-1);
    padding: 6px 11px 10px;
    border-top: 1px solid var(--line);
}

.device-relation-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.device-relation-row > .detail-kv-label {
    flex: 0 0 56px;
}

.record-summary-link {
    --button-ink: var(--accent-strong);
    --button-bg: transparent;
    --button-border: transparent;
    min-width: 0;
    padding: 4px 0;
    color: var(--button-ink);
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.related-summary-dialog {
    width: min(760px, calc(100vw - 32px));
}

.related-summary-dialog[open] {
    display: flex;
    flex-direction: column;
}

.related-summary-dialog .editor-header {
    flex-shrink: 0;
}

.related-summary-dialog .editor-body {
    min-height: 0;
    overflow: auto;
}

.related-summary-dialog .detail-kv-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th,
.data-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.data-table th {
    color: var(--ink-600);
    background: var(--surface-subtle);
    font-size: 12px;
    white-space: nowrap;
}

.workspace-list-layout,
.workspace-list-layout > .panel {
    min-width: 0;
    width: 100%;
}

.table-list-body {
    overflow-x: auto;
}

.entity-list-table {
    min-width: 720px;
}

.entity-list-table td {
    white-space: nowrap;
    overflow-wrap: normal;
}

.entity-list-table tr.is-selected {
    background: var(--accent-soft);
}

.table-row-actions {
    width: 70px;
    white-space: nowrap;
}

.entity-detail-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
}

.entity-detail-dialog[open] {
    display: flex;
    flex-direction: column;
}

.entity-detail-dialog > .editor-header {
    flex-shrink: 0;
}

.entity-detail-dialog > .detail-panel {
    min-height: 0;
    overflow: auto;
    border: 0;
    box-shadow: none;
}

@media (max-width: 720px) {
    .log-results { overflow-x: auto; }
    .data-table { min-width: 680px; }
}
.seda-template-dialog { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; }
.seda-template-dialog .editor-body { display: grid; gap: 1rem; }
.seda-template-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.seda-template-variables { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.seda-template-output { white-space: pre; overflow-x: auto; min-height: 4rem; }
.seda-template-dialog textarea { font-family: monospace; white-space: pre; overflow-x: auto; }

/* Contract editor and list controls share the existing field and color tokens. */
.contract-workspace-toolbar { flex-wrap: wrap; }
.contract-workspace-toolbar .toolbar-search { flex: 1 1 320px; flex-wrap: wrap; min-width: 0; }
.contract-workspace-toolbar .toolbar-search .field-control { min-width: 0; }
.contract-control-action { display: flex; align-items: center; gap: var(--space-2); }
.contract-control-action .field-control { flex: 1; min-width: 0; }
.contract-control-action .button { flex: 0 0 auto; }
.contract-list-filters { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.contract-list-filters .field { flex: 1 1 160px; min-width: 0; }
.contract-list-filters .form-error { flex-basis: 100%; }
.contract-number-state:empty { display: none; }
.contract-status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.contract-status-tone-0 { color: var(--success); background: var(--success-soft); }
.contract-status-tone-1 { color: var(--info); background: var(--info-soft); }
.contract-status-tone-2 { color: var(--warning); background: var(--warning-soft); }
.contract-status-tone-3 { color: var(--danger); background: var(--danger-soft); }
.contract-status-tone-4 { color: var(--accent-strong); background: var(--accent-soft); }
.contract-status-tone-unset { color: var(--ink-600); background: var(--surface-muted); }
@media (max-width: 480px) {
    .contract-control-action { flex-wrap: wrap; }
    .contract-control-action .field-control { flex-basis: 100%; }
    .contract-list-filters .field { flex-basis: 100%; }
}

.contract-editor [hidden] { display: none !important; }
.editor-dialog [hidden] { display: none !important; }

.contract-control-action .button-quiet { border-color: var(--line-strong); background: var(--surface); }

.field-required { color: rgb(220, 53, 69); font-weight: 700; }
.pager { flex-wrap: wrap; }
.pager-page-size { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.pager-page-size .field-control { width: auto; min-width: 5rem; }
.button.button-excel, .button.button-download { --button-ink: var(--surface); --button-bg: var(--success); --button-border: var(--success); }

.pager-index { display: inline-flex; align-items: center; gap: 4px; order: 2; }
.pager-index [hidden] { display: none !important; }
.pager-index .button, .pager-first, .pager-last, .pager-previous, .pager-next { min-width: 36px; padding-inline: 10px; }
.pager-index .is-current { background: var(--accent-soft); border-color: var(--line-strong); color: var(--accent-strong); font-weight: 700; }
.pager-first { order: 0; } .pager-previous { order: 1; } .pager-next { order: 3; } .pager-last { order: 4; }
.pager-summary { order: 5; color: var(--ink-600); font-size: .85rem; }
.pager-page-size { order: 6; }
@media (max-width: 640px) { .pager-index { gap: 2px; } .pager-index .button, .pager-first, .pager-last, .pager-previous, .pager-next { min-width: 32px; padding-inline: 6px; } }
.code-usage-dialog li { overflow-wrap: anywhere; }
.work-workspace-toolbar { flex-wrap: wrap; }
.work-workspace-toolbar .toolbar-search { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
@media (max-width: 620px) {
    .work-workspace-toolbar .toolbar-search { flex: 0 0 auto; }
}

@media (max-width: 620px) {
    .contract-workspace-toolbar .toolbar-search, .contract-list-filters { flex: 0 0 auto; }
}

/* Firmware filenames wrap within their metadata row on narrow screens. */
.model-firmware-card .record-meta > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/*
 * 상세에서는 대상 이름과 실제 값을, 편집에서는 입력 묶음과 저장 행동을 먼저 읽는다.
 * 필드 이름을 값보다 크게 강조하거나 본문을 여러 겹 테두리로 감싸면 각 정보의
 * 중요도가 같아 보인다. 이 규칙은 표현만 정리하며 업무 단계나 필수 입력을 바꾸지 않는다.
 */
.editor-dialog {
    --editor-inset: 16px;
    --editor-label-size: 13px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.editor-dialog[open] { display: flex; flex-direction: column; }
.editor-dialog > .editor-form { min-height: 0; }

.editor-dialog :is(.field > label, label.field, .field-control-label) {
    color: var(--ink-950);
    font-size: var(--editor-label-size);
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.editor-dialog label.field > .field-control {
    color: var(--ink-950);
    font-size: 13px;
    font-weight: 400;
}

.editor-dialog :is(.editor-header, .editor-footer) {
    flex-wrap: wrap;
    gap: var(--editor-inset);
    padding: var(--editor-inset);
}

.editor-dialog .editor-header h3 { color: var(--ink-950); font-size: 17px; }
.editor-dialog .editor-header > .button { margin-left: auto; }
.editor-dialog .editor-footer { background: var(--surface); }

.editor-dialog .editor-body {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--editor-inset);
    border: 0;
    border-radius: 0;
    background: var(--surface);
}

.editor-dialog :is(.form-stack, .field-grid, .role-fields) { gap: 16px; }
.editor-dialog .field { min-width: 0; gap: 8px; }

.editor-dialog .editor-field-group,
.editor-dialog .editor-field-group + .editor-field-group {
    min-width: 0;
    margin: 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.editor-dialog .editor-field-group:first-of-type { padding-top: 0; border-top: 0; }

.editor-dialog :is(.editor-section h4, .editor-field-group h4, .json-parameter-editor > h4) {
    margin: 0;
    color: var(--ink-950);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: normal;
}

.editor-dialog .editor-section + .editor-section {
    margin-top: 10px;
    padding-top: 10px;
}

.editor-dialog .editor-section:not(:has(.editor-field-group)) {
    padding: var(--editor-inset);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.editor-dialog .editor-section:not(:has(.editor-field-group)) > h4 { margin-bottom: 8px; }

.editor-dialog .field-control { min-height: 36px; padding: 6px 8px; border-radius: var(--radius-md); }
.editor-dialog .field-hint { margin-block: 0; line-height: 1.6; }
.editor-dialog .form-error:not(:empty) { margin: 8px; }
.editor-dialog .parameter-table-scroll { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.editor-dialog .parameter-table :is(th, td) { padding: 8px; }
.editor-dialog .parameter-table th { color: var(--ink-800); font-weight: 700; }

.editor-dialog.entity-detail-dialog > .detail-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
}
.editor-dialog .detail-body { padding: var(--editor-inset); }

/* 긴 상세를 읽는 동안에도 현재 대상과 그 대상의 조작 버튼을 함께 보여준다. */
.entity-detail-dialog > .detail-panel > .detail-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}
.entity-detail-dialog .panel-heading-copy h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.entity-detail-dialog .panel-heading-copy > span { color: var(--ink-600); }
.entity-detail-dialog .detail-kv-label {
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.entity-detail-dialog .detail-kv-value {
    color: var(--ink-950);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}
.entity-detail-dialog .detail-fields-grid h4 { font-size: 14px; letter-spacing: normal; }

.editor-dialog details {
    min-width: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.editor-dialog details > summary {
    padding: var(--editor-inset);
    color: var(--ink-950);
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.editor-dialog details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.editor-dialog details[open] > summary { border-bottom: 1px solid var(--line); border-radius: 0; }
.editor-dialog details > :not(summary) { margin: 8px; }
.editor-dialog details > .field-control { width: calc(100% - 16px); }
.editor-dialog .asset-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.editor-dialog .asset-search-controls > .button { min-height: 36px; }

@media (max-width: 640px) {
    .editor-dialog { --editor-inset: 12px; }
    .editor-dialog .field-control,
    .editor-dialog label.field > .field-control { min-height: 44px; font-size: 16px; }
    .editor-dialog .asset-search-controls > .button { min-height: 44px; }
    .editor-dialog .editor-footer { gap: 8px; }
}

/* Related contract collections open as searchable dialogs, never inline folds. */
.contract-collection-summary > .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
}
.contract-collection-summary h3 { min-width: 0; overflow-wrap: anywhere; }
.contract-collection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.contract-collection-actions .button { min-height: 30px; padding: 4px 12px; }
.editor-dialog .detail-header .detail-body-actions > .button { min-height: 30px; height: 30px; align-self: center; }
.editor-dialog.contract-collection-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.contract-collection-dialog > .editor-body { max-height: none; }
.contract-collection-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.contract-collection-toolbar > .button { min-height: 30px; }
.contract-collection-list { min-width: 0; }
.contract-collection-list .record-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px; }
.contract-collection-list .record-main { min-width: 0; padding: 0; }
.contract-collection-list .record-title-row { flex-wrap: wrap; }
.contract-collection-list .record-title-row > strong { min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.contract-collection-list .record-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.contract-collection-list .record-meta > span { min-width: 0; overflow-wrap: anywhere; }
.contract-collection-list .record-description { display: block; overflow-wrap: anywhere; }
.contract-collection-list .record-actions { flex-wrap: wrap; max-width: 12rem; padding: 0; border: 0; }
.contract-collection-list .contract-document-row > .form-error { grid-column: 1 / -1; }
.contract-collection-dialog .contract-collection-pager { justify-content: center; }
.editor-dialog .detail-fields-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; padding: 0; }
.entity-detail-dialog .detail-fields-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
    .entity-detail-dialog .detail-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .entity-detail-dialog .detail-fields-grid { grid-template-columns: minmax(0, 1fr); }
}
.editor-dialog .detail-kv-wide { grid-column: 1 / -1; }
.parameter-readonly-table { table-layout: fixed; }
.parameter-readonly-table th:nth-child(1) { width: 28%; }
.parameter-readonly-table th:nth-child(2) { width: 44%; }
.parameter-readonly-table th:nth-child(3) { width: 28%; }
.parameter-readonly-table td { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.contract-detail > .inner-panel {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.contract-detail > .inner-panel > .panel-header { padding: 8px 0; border-bottom: 0; }
.contract-detail > .inner-panel > .panel-body { padding: 8px 0; }
.contract-detail > .inner-panel .record-card { border: 0; border-radius: 0; }
.contract-detail > .inner-panel .record-card + .record-card { border-top: 1px solid var(--line); }
.contract-detail > .inner-panel .record-main { padding: 8px 0; }
.contract-collection-list .record-card { border: 0; border-radius: 0; padding: 8px 0; }
.contract-collection-list .record-card + .record-card { border-top: 1px solid var(--line); }

@media (max-width: 640px) {
    .contract-collection-summary > .panel-header,
    .contract-collection-toolbar,
    .contract-collection-list .record-card { grid-template-columns: minmax(0, 1fr); }
    .contract-collection-actions { justify-content: flex-end; }
    .contract-collection-actions .button { flex: 0 1 auto; min-height: 40px; }
    .editor-dialog .detail-header .detail-body-actions > .button { min-height: 40px; height: 40px; }
    .contract-collection-toolbar > .button { min-height: 40px; }
    .contract-collection-list .record-actions { max-width: none; justify-content: flex-end; }
}

/* 계약 원장의 검색과 행 작업은 참고 정보보다 먼저 읽고 작은 화면에서도 이름으로 고른다. */
.contract-connection-workflow { display: grid; gap: 16px; min-width: 0; }
.contract-connection-ledger > .panel-header { padding: 0; }
.contract-connection-ledger > .panel-header > h3 { width: 100%; }
.contract-connection-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.contract-connection-toggle:hover { background: var(--surface-subtle); }
.contract-connection-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.contract-connection-toggle-hint { color: var(--ink-600); font-size: 12px; font-weight: 400; }
.contract-connection-toggle::before { content: '▾'; font-size: 12px; font-weight: 400; }
.contract-connection-toggle[aria-expanded="false"]::before { content: '▸'; }
.contract-connection-toggle-hint { margin-left: auto; }
.contract-connection-body[hidden] { display: none; }
.contract-connection-controls { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 12px; }
.contract-connection-controls > .field { margin: 0; min-width: 0; }
.contract-connection-controls .field-control { width: 100%; min-width: 0; }
.contract-connection-controls > .field:last-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.contract-connection-ledger .record-card { display: block; padding: 12px; }
.contract-connection-list { margin: 0 8px 8px; padding: 8px; border-radius: var(--radius-md); background: var(--surface-muted); }
.contract-connection-card { box-shadow: var(--shadow-sm); }
.contract-connection-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.contract-connection-assets { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.contract-connection-asset { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; padding: 0 6px; }
.contract-connection-asset-label, .contract-connection-arrow { color: var(--ink-600); font-size: 12px; font-weight: 400; }
.contract-connection-asset-value { padding: 4px 0; overflow-wrap: anywhere; }
.contract-connection-asset.is-pending .contract-connection-asset-value { color: var(--warning); background: var(--warning-soft); padding-inline: 6px; border-radius: var(--radius-sm); }
.contract-connection-asset-editor { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.contract-connection-asset-editor > p { margin: 0 0 8px; }
.contract-connection-asset-editor .record-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.contract-connection-history-section { display: grid; gap: 8px; }
.contract-connection-history-section > h4 { margin: 0; }
.contract-connection-history-section > p { margin: 0; }
.contract-connection-history-section .record-card { padding: 12px; }
.contract-connection-history-section + .contract-connection-history-section { padding-top: 12px; border-top: 1px solid var(--line); }
.contract-connection-ledger .record-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.contract-connection-ledger .record-actions .button { flex: 0 0 auto; white-space: nowrap; }
.contract-connection-body > .field-hint { padding-inline: 12px; }
@media (max-width: 640px) {
    .contract-connection-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .contract-connection-asset-editor .record-actions .button { min-height: 44px; }
    .contract-connection-ledger .record-actions .button { min-height: 44px; min-width: 64px; padding-inline: 12px; }
}

/* summary와 별도 원장 버튼은 같은 제목 크기를 쓴다. 높이는 줄바꿈 시 늘어나게 두고,
   native details의 키보드 동작은 유지하면서 삼각형 모양도 두 방식에 맞춘다. */
.editor-dialog details.modal-section { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.editor-dialog details.modal-section > summary,
.editor-dialog .contract-connection-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 12px; margin: 0; color: var(--ink-950); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 21px; }
.editor-dialog details.modal-section > summary { flex-wrap: wrap; }
.editor-dialog details.modal-section > summary::marker { content: ''; }
.editor-dialog details.modal-section > summary::-webkit-details-marker { display: none; }
.editor-dialog details.modal-section > summary::before,
.editor-dialog .contract-connection-toggle::before { content: '▸'; flex: 0 0 12px; width: 12px; color: var(--ink-600); font-size: 12px; font-weight: 400; text-align: center; }
.editor-dialog details.modal-section[open] > summary::before,
.editor-dialog .contract-connection-toggle[aria-expanded="true"]::before { content: '▾'; }
.editor-dialog details.modal-section > summary > :is(h3,h4) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.editor-dialog details.modal-section > summary > .panel-header { flex: 1 1 0; flex-wrap: wrap; gap: 8px; min-width: 0; min-height: 0; padding: 0; border: 0; }
.editor-dialog details.modal-section > summary .panel-header h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.editor-dialog details.modal-section > summary > label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 12px; vertical-align: middle; }
.editor-dialog details.modal-section > .modal-section-content { margin: 0; padding: 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.editor-dialog details.modal-section > .modal-section-content.panel { padding: 0; }
.editor-dialog .modal-section-content + .modal-section-content { margin: 0; }
.editor-dialog .editor-body:not(.form-stack) > .modal-section + .modal-section { margin-top: 12px; }
.service-preset-tree { margin: 0 12px 12px 26px; padding-left: 12px; border-left: 1px solid var(--border-color, #dce3ec); display: grid; gap: 4px; }
.service-preset-tree:empty { display: none; }
.service-preset-select { text-align: left; padding: 10px 12px; border: 0; background: transparent; border-radius: 6px; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.service-preset-select:hover { background: #f1f5fa; }
.service-preset-select.is-selected { color: #175c9e; background: #e7f1fc; font-weight: 600; }
.service-preset-select:focus-visible { outline: 2px solid #2675bd; outline-offset: 2px; }
.service-preset-detail { display: grid; gap: 28px; min-width: 0; padding: 24px; }
.service-preset-form > button { justify-self: end; min-width: 88px; }
.preset-value-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preset-value-heading label { overflow-wrap: anywhere; min-width: 0; }
.preset-item-import-dialog { width: min(640px, calc(100vw - 32px)); }
.preset-item-import-dialog textarea { font-family: Consolas, monospace; }
.field-control-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.field-control-actions > .field-control { flex: 1; min-width: 0; width: 0; }
.field-control-actions > .button { flex: 0 0 auto; white-space: nowrap; }
.inline-refresh-button { width: 36px; min-width: 36px; height: 36px; padding: 0; font-size: 23px; line-height: 1; }
.section-help-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-help-heading > h4 { margin: 0; min-width: 0; }
.section-help-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.section-help-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-subtle); color: var(--ink-600); font: inherit; font-weight: 600; cursor: help; }
.section-help-button:focus-visible { outline: 2px solid var(--accent, #2876ba); outline-offset: 2px; }
.section-help-overlay { pointer-events: auto; font-size: 12px; line-height: 1.6; white-space: pre-line; }
.service-type-add-button { padding-inline: 10px; }
.service-preset-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .35fr); gap: 18px; }
.preset-field-name, .preset-field-connectionStatement, .preset-field-description { grid-column: 1 / -1; }
.preset-field-connectionStatement textarea { font-family: Consolas, monospace; resize: vertical; }
.service-preset-history { min-width: 0; border-top: 1px solid var(--border-color, #dce3ec); padding-top: 18px; }
.service-preset-history .table-scroll { overflow-x: auto; }
.service-preset-history table { width: 100%; }
.preset-restore-dialog { max-width: 480px; }
.preset-restore-dialog h3 { padding: 20px 24px 0; }
@media (max-width: 600px) { .service-preset-fields { grid-template-columns: minmax(0, 1fr); } .service-preset-detail { padding: 16px; } }

.record-card.has-reference-warning, .work-card.has-reference-warning { background: var(--warning-soft); }
.reference-card-meta { padding: 0 11px 10px; margin-top: -5px; }
.related-creation-dialog { width: min(1080px, calc(100vw - 24px)); height: min(900px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.related-creation-dialog[open] { display: flex; flex-direction: column; }
.related-creation-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.related-creation-dialog > .field-hint { margin: 0 16px; }
.related-creation-dialog > iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--surface); }
.embedded-creation .app-sidebar, .embedded-creation .app-header, .embedded-creation .sidebar-backdrop { display: none; }
.embedded-creation .app-main { margin: 0; padding: 0; }
.embedded-creation .app-content { padding: 0; }
.embedded-creation #workspaceContent > :not(dialog) { display: none; }
.embedded-creation dialog.editor-dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: auto; }
.table-sort-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 32px; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.table-sort-button:hover { color: var(--accent); }
.table-sort-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.table-sort-indicator { flex: 0 0 auto; color: var(--ink-500); }
.table-sort-indicator[data-direction="none"]::before { content: '↕'; }
.table-sort-indicator[data-direction="asc"]::before { content: '↑'; }
.table-sort-indicator[data-direction="desc"]::before { content: '↓'; }
th[aria-sort] .table-sort-indicator { color: var(--accent); }

/* JSON 영역만 가로 스크롤하고 모델·서비스 화면 전체의 폭은 유지한다. */
.cert-json { min-width: 0; max-width: 100%; overflow-x: auto; white-space: pre; }

@media (max-width: 640px) {
    .service-param-input-row {
        min-width: 0;
        grid-template-columns: auto minmax(0, 1fr);
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--line);
    }
    .service-param-input-row > .field,
    .service-param-input-row > .item-copy-actions { grid-column: 2; }
    .service-param-input-row > input[type="checkbox"] { grid-column: 1; grid-row: 1; }
    .service-param-input-row > .item-copy-actions { display: flex; flex-wrap: wrap; white-space: normal; }
}

.button-neutral.is-selected { --button-bg: var(--accent-soft); --button-ink: var(--accent-strong); }