/*============================================================
  Project   : LeenleeERP
  File      : ERPTheme.css
  Version   : V3.0
  Date      : 2026-07-22
  Purpose   : LeenleeERP 공통 UI 테마 및 컴포넌트 스킨

  변경사항
  ------------------------------------------------------------
  V3.0
  - UI Framework V1.0 버튼·입력·그리드 표준 규격 확정
  - 공통 Focus 및 비활성 상태 접근성 보완
  - 체크박스·날짜·숫자 입력을 포함한 Form Control 표준화

  V2.1
  - MainButton Hover의 Border와 Shadow 강조
  - 조회 패널과 콘텐츠 영역의 세로 밀도 개선
  - 그리드 Header 배경색과 경계선 가독성 강화
  - 선택행 색상 대비 미세 조정
  - 비활성 버튼의 가독성과 일관성 보완

  V2.0
  - LeenleeERP UI Framework 공통 테마 최초 확정
============================================================*/


/*============================================================
  Global Foundation
============================================================*/

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--erp-color-canvas);
    color: var(--erp-color-text-primary);
    font-family: var(--erp-font-family);
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}


/*============================================================
  Common Buttons
============================================================*/

.erp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-2);
    min-height: var(--erp-button-height-md);
    padding: 0 13px;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-color-surface);
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-md);
    font-weight: var(--erp-font-weight-semibold);
    cursor: pointer;
    transition: transform var(--erp-transition-fast), background-color var(--erp-transition-base), border-color var(--erp-transition-base), color var(--erp-transition-base), box-shadow var(--erp-transition-base);
}

    .erp-button:not(:disabled):hover {
        transform: translateY(-1px);
        background: var(--erp-color-surface-hover);
        border-color: var(--erp-color-primary-light);
        box-shadow: var(--erp-shadow-button-hover);
    }

    .erp-button:not(:disabled):active {
        transform: translateY(0);
        box-shadow: none;
    }

    .erp-button:disabled {
        background: var(--erp-color-secondary-light);
        border-color: var(--erp-color-border-soft);
        color: var(--erp-color-text-disabled);
        cursor: not-allowed;
    }

.erp-button-primary {
    background: var(--erp-color-primary);
    border-color: var(--erp-color-primary);
    color: var(--erp-color-text-inverse);
}

    .erp-button-primary:not(:disabled):hover {
        background: var(--erp-color-primary-hover);
        border-color: var(--erp-color-primary-hover);
    }

.erp-button-danger {
    color: var(--erp-color-danger);
}

.erp-button-sm {
    min-height: var(--erp-button-height-sm);
    padding: 0 10px;
}

.erp-button-icon {
    width: var(--erp-button-height-sm);
    padding: 0;
}


/*============================================================
  Sheet Header
============================================================*/

.erp-sheet-header__breadcrumbs {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-sm);
}

.erp-sheet-header__title {
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-3xl);
    font-weight: var(--erp-font-weight-bold);
    line-height: var(--erp-line-height-tight);
    letter-spacing: -0.4px;
}

.erp-sheet-header__description {
    color: var(--erp-color-text-secondary);
    font-size: var(--erp-font-size-md);
    line-height: var(--erp-line-height-base);
}


/*============================================================
  Main Button Bar
============================================================*/

.erp-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-2);
    min-height: var(--erp-button-height-md);
    padding: 0 13px;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-color-surface);
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-md);
    font-weight: var(--erp-font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--erp-transition-fast), background-color var(--erp-transition-base), border-color var(--erp-transition-base), color var(--erp-transition-base), box-shadow var(--erp-transition-base);
}

    .erp-main-button:not(:disabled):hover {
        transform: translateY(-1px);
        background: var(--erp-color-surface-hover);
        border-color: var(--erp-color-primary-light);
        box-shadow: var(--erp-shadow-button-hover);
    }

    .erp-main-button:not(:disabled):active {
        transform: translateY(0);
        box-shadow: none;
    }

    .erp-main-button:disabled {
        background: var(--erp-color-secondary-light);
        border-color: var(--erp-color-border-soft);
        color: var(--erp-color-text-disabled);
        cursor: not-allowed;
    }

    .erp-main-button.is-save:not(:disabled) {
        background: var(--erp-color-primary);
        border-color: var(--erp-color-primary);
        color: var(--erp-color-text-inverse);
    }

        .erp-main-button.is-save:not(:disabled):hover {
            background: var(--erp-color-primary-hover);
            border-color: var(--erp-color-primary-hover);
        }

    .erp-main-button.is-delete:not(:disabled) {
        color: var(--erp-color-danger);
    }


/*============================================================
  Search Panel
============================================================*/

.erp-search-panel {
    padding: var(--erp-panel-padding-compact);
    background: var(--erp-color-surface-muted);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-xl);
    box-shadow: var(--erp-shadow-xs);
}

.erp-search-panel__heading strong {
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-base);
    font-weight: var(--erp-font-weight-bold);
}

.erp-search-panel__heading span {
    color: var(--erp-color-text-secondary);
    font-size: var(--erp-font-size-sm);
}


/*============================================================
  Form Controls
============================================================*/

.erp-field {
    min-width: 0;
}

    .erp-field label {
        display: block;
        margin-bottom: 6px;
        color: #53635d;
        font-size: var(--erp-font-size-sm);
        font-weight: var(--erp-font-weight-semibold);
    }

.erp-input,
.erp-select,
.erp-textarea {
    width: 100%;
    min-height: var(--erp-input-height);
    padding: 8px 10px;
    border: 1px solid var(--erp-color-border-strong);
    border-radius: var(--erp-radius-md);
    background: var(--erp-color-surface);
    color: var(--erp-color-text-primary);
    outline: none;
    transition: border-color var(--erp-transition-base), box-shadow var(--erp-transition-base);
}

    .erp-input:focus,
    .erp-select:focus,
    .erp-textarea:focus {
        border-color: var(--erp-color-primary);
        box-shadow: 0 0 0 3px var(--erp-color-focus-ring);
    }

    .erp-input:disabled,
    .erp-select:disabled,
    .erp-textarea:disabled {
        background: var(--erp-color-secondary-light);
        color: var(--erp-color-text-disabled);
    }


/*============================================================
  Content Section
============================================================*/

.erp-content-section {
    background: var(--erp-color-surface);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-xl);
    box-shadow: var(--erp-shadow-xs);
}

.erp-content-section__header {
    min-height: 50px;
    padding: 10px var(--erp-space-4);
    background: var(--erp-color-surface-muted);
    border-bottom: 1px solid var(--erp-color-border-soft);
}

.erp-content-section__heading h2 {
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-lg);
    font-weight: var(--erp-font-weight-bold);
}

.erp-content-section__heading p {
    margin-top: 3px;
    color: var(--erp-color-text-secondary);
    font-size: var(--erp-font-size-sm);
}

.erp-content-section__body {
    padding: var(--erp-panel-padding);
}

.erp-content-section__body--compact {
    padding: var(--erp-panel-padding-compact);
}

.erp-content-section__body--flush {
    padding: 0;
}


/*============================================================
  Data Grid
============================================================*/

.erp-grid-shell {
    background: var(--erp-color-surface);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-lg);
}

.erp-grid-scroll {
    background: var(--erp-color-surface);
}

.erp-grid {
    color: var(--erp-color-text-primary);
    font-size: var(--erp-font-size-md);
}

    .erp-grid th {
        height: var(--erp-table-header-height);
        padding: var(--erp-table-cell-vertical-padding) var(--erp-table-cell-horizontal-padding);
        background: #e5efea;
        border-right: 1px solid #d2dfd8;
        border-bottom: 1px solid #bccfc5;
        color: #314b40;
        font-weight: var(--erp-font-weight-bold);
        text-align: left;
        white-space: nowrap;
    }

    .erp-grid td {
        height: var(--erp-table-row-height);
        padding: var(--erp-table-cell-vertical-padding) var(--erp-table-cell-horizontal-padding);
        overflow: hidden;
        border-right: 1px solid var(--erp-color-border-soft);
        border-bottom: 1px solid var(--erp-color-border-soft);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .erp-grid th:last-child,
        .erp-grid td:last-child {
            border-right: 0;
        }

    .erp-grid tbody tr:last-child td {
        border-bottom: 0;
    }

    .erp-grid tbody tr {
        transition: background-color var(--erp-transition-fast);
    }

        .erp-grid tbody tr:hover {
            background: var(--erp-color-surface-hover);
        }

        .erp-grid tbody tr.is-selected {
            background: var(--erp-color-surface-selected);
            box-shadow: inset 3px 0 0 var(--erp-color-primary);
        }

.erp-grid-empty {
    color: var(--erp-color-text-muted);
}

    .erp-grid-empty strong {
        color: var(--erp-color-text-primary);
    }

.erp-grid-footer {
    padding: var(--erp-space-2) var(--erp-space-3);
    background: var(--erp-color-surface-muted);
    border-top: 1px solid var(--erp-color-border-soft);
    color: var(--erp-color-text-secondary);
    font-size: var(--erp-font-size-sm);
}

.erp-grid-overlay {
    background: rgb(255 255 255 / 78%);
    color: var(--erp-color-text-secondary);
    backdrop-filter: blur(1px);
}


/*============================================================
  Loading
============================================================*/

.erp-loading-host {
    position: relative;
}

.erp-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--erp-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 78%);
    backdrop-filter: blur(1px);
}

.erp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--erp-color-primary-light);
    border-top-color: var(--erp-color-primary);
    border-radius: 50%;
    animation: erp-spin 0.7s linear infinite;
}

@keyframes erp-spin {

    to {
        transform: rotate(360deg);
    }
}


/*============================================================
  UI Framework V1.0 Final Standards
============================================================*/

.erp-input,
.erp-select {
    height: var(--erp-input-height);
    box-sizing: border-box;
}

/*
  Native select는 브라우저 렌더링 차이로 고정 높이 안에서
  한글의 아래쪽 획이 잘릴 수 있으므로 내부 수직 여백과
  line-height를 공통 표준에서 명시합니다.
*/
.erp-select {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: normal;
    vertical-align: middle;
}

.erp-textarea {
    min-height: 88px;
    resize: vertical;
}

.erp-input::placeholder,
.erp-textarea::placeholder {
    color: var(--erp-color-text-muted);
}

.erp-input[readonly],
.erp-textarea[readonly] {
    background: var(--erp-color-surface-muted);
}

.erp-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--erp-color-primary);
}

.erp-input:focus-visible,
.erp-select:focus-visible,
.erp-textarea:focus-visible,
.erp-button:focus-visible,
.erp-main-button:focus-visible {
    outline: 2px solid var(--erp-color-focus-ring);
    outline-offset: 1px;
}

.erp-relative {
    position: relative;
}

.erp-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*============================================================
  UI Framework V1.0 Final - Compatibility & Layout Foundation
  ------------------------------------------------------------
  신규 화면은 ErpField를 우선 사용합니다.
  기존 화면의 .erp-field도 동일한 Form Control 규격을 사용하므로,
  입력 높이·글자 정렬·라벨·도움말은 이 파일 한 곳에서 보완합니다.
============================================================*/

.detail-form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--erp-space-4);
    min-width: 0;
}

.detail-form > .erp-field {
    grid-column: span 6;
}

.detail-form > .erp-field.is-full,
.detail-form > .erp-field.is-wide {
    grid-column: 1 / -1;
}

.erp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/*
 * ERP 전체 입력필드 공통 폭 규격.
 * 화면별 px 지정 대신 아래 의미 기반 클래스 또는 ErpField.Width를 사용합니다.
 */
.erp-field-width-date { --erp-field-target-width: var(--erp-field-width-date); }
.erp-field-width-time { --erp-field-target-width: var(--erp-field-width-time); }
.erp-field-width-short { --erp-field-target-width: var(--erp-field-width-short); }
.erp-field-width-standard { --erp-field-target-width: var(--erp-field-width-standard); }
.erp-field-width-keyword { --erp-field-target-width: var(--erp-field-width-keyword); }
.erp-field-width-wide { --erp-field-target-width: var(--erp-field-width-wide); }
.erp-field-width-full { --erp-field-target-width: 100%; }

.erp-field[class*="erp-field-width-"] {
    width: min(100%, var(--erp-field-target-width));
    max-width: 100%;
}

/* 콤보 안내문구의 하단 잘림을 공통 처리합니다. */
.erp-select,
select.erp-input {
    line-height: normal;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (max-width: 560px) {
    .erp-field[class*="erp-field-width-"] {
        width: 100%;
    }
}

.erp-field > label:not(.check-label) {
    display: block;
    margin: 0;
    color: var(--erp-color-text-secondary);
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-semibold);
    line-height: 1.3;
}

.erp-field > small {
    margin: 0;
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-xs);
    line-height: 1.35;
}

.erp-input,
.erp-select {
    height: var(--erp-input-height);
    min-height: var(--erp-input-height);
}

.erp-select {
    padding-block: 0;
    line-height: normal;
}

.erp-textarea {
    min-height: calc(var(--erp-input-height) * 2);
    resize: vertical;
}

.check-label {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: var(--erp-input-height);
    margin: 0 !important;
    white-space: nowrap;
    cursor: pointer;
}

.check-label > input[type="checkbox"],
.check-label > input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}

.option-item {
    display: flex;
    align-items: flex-start;
    gap: var(--erp-space-3);
    padding: var(--erp-space-4);
    border: 1px solid var(--erp-color-border-soft);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-color-surface);
}

.option-item > span {
    display: grid;
    gap: var(--erp-space-1);
    min-width: 0;
}

.option-item small {
    color: var(--erp-color-text-muted);
}

.code-input,
code.erp-code {
    font-family: Consolas, "Courier New", monospace;
}

.number-input,
.number-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.center-cell {
    text-align: center;
}

.summary-empty {
    padding: var(--erp-space-4) 0;
    color: var(--erp-color-text-muted);
}

@media (max-width: 900px) {
    .detail-form > .erp-field,
    .detail-form > .erp-field.is-full,
    .detail-form > .erp-field.is-wide {
        grid-column: 1 / -1;
    }
}