/*
 * PLATFMGMT 공통 스타일
 * Reset · Form · Button · Utility
 */

/**
 * platfmgmt Module Stylesheet
 * Version: 0.25.10.15 (Inline Styles to CSS Migration)
 * Date: 2025-10-15
 *
 * 변경사항:
 * - 모든 인라인 스타일을 CSS 클래스로 이동
 * - 디자인 요소 일관성 확보
 * - 재사용 가능한 유틸리티 클래스 추가
 */

/* === CSS Custom Properties === */
:root {
    --pm-font-family-base: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pm-font-size-base: 14px;
    --pm-line-height-base: 1.6;
    --pm-color-text: #343a40;
    --pm-color-background: #f8f9fa;
    --pm-color-surface: #ffffff;
    --pm-color-surface-alt: #f8f9fa;
    --pm-color-border-soft: #e9ecef;
    --pm-color-border: #dee2e6;
    --pm-color-border-strong: #ced4da;
    --pm-color-primary: #007bff;
    --pm-color-primary-hover: #0069d9;
    --pm-color-primary-active: #0062cc;
    --pm-color-secondary: #6c757d;
    --pm-color-secondary-hover: #5a6268;
    --pm-color-secondary-active: #545b62;
    --pm-color-success: #28a745;
    --pm-color-success-hover: #218838;
    --pm-color-success-active: #1e7e34;
    --pm-color-info: #17a2b8;
    --pm-color-info-hover: #138496;
    --pm-color-info-active: #117a8b;
    --pm-color-warning: #ffc107;
    --pm-color-warning-hover: #e0a800;
    --pm-color-warning-active: #d39e00;
    --pm-color-warning-dark: #856404;
    --pm-color-danger: #dc3545;
    --pm-color-danger-hover: #c82333;
    --pm-color-danger-active: #bd2130;
    --pm-color-dark: #343a40;
    --pm-color-muted: #6c757d;
    --pm-color-muted-light: #adb5bd;
    --pm-color-muted-mid: #8a97a8;
    --pm-color-neutral-strong: #1f2d3d;
    --pm-color-neutral-contrast: #1f2933;
    --pm-color-neutral-600: #555555;
    --pm-color-neutral-500: #666666;
    --pm-color-neutral-400: #888888;
    --pm-color-neutral-300: #999999;
    --pm-color-gray-100: #f8f9fa;
    --pm-color-gray-200: #f1f3f5;
    --pm-color-gray-400: #dee2e6;
    --pm-color-accent: #667eea;
    --pm-color-accent-dark: #0056b3;
    --pm-color-accent-soft: #f1f5ff;
    --pm-color-accent-border: #e0e6f4;
    --pm-color-primary-soft: #e7f3ff;
    --pm-color-info-soft: #e3f2fd;
    --pm-color-info-border: #bbdefb;
    --pm-color-warning-soft: #fff3cd;
    --pm-color-warning-soft-2: #fff9e6;
    --pm-color-danger-soft: #ffe6e6;
    --pm-color-danger-border: #ffcccc;
    --pm-color-success-soft: #f0fff4;
    --pm-color-neutral-soft: #f2f4f8;
    --pm-color-border-muted: #d1d5db;
    --pm-color-border-light-2: #e9e9e9;
    --pm-color-surface-soft: #fdfdfd;
    --pm-color-info-strong: #1976d2;
    --pm-color-info-contrast: #0d6efd;
    --pm-color-danger-soft-strong: #ffe6e6;
    --pm-color-success-strong: #0f5132;
    --pm-color-danger-strong: #842029;
    --pm-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
    --pm-shadow-button: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pm-shadow-button-hover: 0 2px 5px rgba(0, 0, 0, 0.1);
    --pm-radius-sm: 4px;
    --pm-radius-md: 6px;
    --pm-radius-lg: 8px;
    --pm-space-0: 0;
    --pm-space-1: 4px;
    --pm-space-1-5: 6px;
    --pm-space-2: 8px;
    --pm-space-2-5: 10px;
    --pm-space-3: 12px;
    --pm-space-3-5: 15px;
    --pm-space-4: 16px;
    --pm-space-5: 20px;
    --pm-space-6: 24px;
    --pm-space-7: 28px;
    --pm-space-8: 30px;
    --pm-space-9: 40px;
}

/* === EZS Branding === */
.ezs-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6em;
    vertical-align: middle;
    margin-right: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ezs-system-name {
    display: block;
    font-size: 11px;
    color: #868e96;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* === Base & Reset === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--pm-font-family-base);
    font-size: var(--pm-font-size-base);
    line-height: var(--pm-line-height-base);
    color: var(--pm-color-text);
    background-color: var(--pm-color-background);
}

/* === Card === */
.card {
    background: var(--pm-color-surface);
    border-radius: var(--pm-radius-lg);
    border: 1px solid var(--pm-color-border-soft);
    box-shadow: var(--pm-shadow-card);
    margin-bottom: 25px;
    overflow: hidden;
}
.card-header {
    background: var(--pm-color-surface-alt);
    border-bottom: 1px solid var(--pm-color-border-soft);
    padding: 15px 25px;
    font-weight: 600;
    font-size: 16px;
    color: var(--pm-color-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-body {
    padding: 25px;
}

/* === Table === */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}
.table th,
.table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--pm-color-border);
    vertical-align: middle;
}
.table th {
    background: var(--pm-color-surface-alt);
    font-weight: 600;
    color: var(--pm-color-dark);
}
.table tbody tr:hover {
    background: var(--pm-color-gray-200);
}

/* 테이블 내 앵커 스타일 */
.table a {
    color: var(--pm-color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.table a:hover {
    color: var(--pm-color-primary-hover);
    text-decoration: underline;
}

.table a:visited {
    color: var(--pm-color-primary);
}

.table a:focus {
    outline: 2px solid var(--pm-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* === Forms === */
.form-group {
    margin-bottom: 20px;
}
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--pm-color-dark);
    font-size: 13px;
}
.form-control,
.frm_input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--pm-color-border-strong);
    border-radius: var(--pm-radius-sm);
    font-size: 14px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

/* textarea는 높이 고정 해제 */
textarea.frm_input,
textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
    padding: 10px 12px;
    line-height: 1.6;
}

.form-control:focus,
.frm_input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.form-control.required,
.frm_input.required {
    border-left: 3px solid #dc3545;
}
.form-textarea {
    height: auto;
    resize: vertical;
    min-height: 120px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.form-info {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

/* === Buttons (v3 - Prefixed & Isolated) === */
.pm-btn {
    /* Reset & Structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Text & Font */
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pm-btn-color, #fff);
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;

    /* Icon spacing */
    gap: 6px;

    /* Behavior */
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
    background-color: var(--pm-btn-bg, var(--pm-color-primary));
    border-color: var(--pm-btn-border, var(--pm-btn-bg, var(--pm-color-primary)));
    box-shadow: var(--pm-btn-shadow, var(--pm-shadow-button));
}
.pm-btn:hover {
    box-shadow: var(--pm-btn-shadow-hover, var(--pm-shadow-button-hover));
    background-color: var(--pm-btn-bg-hover, var(--pm-btn-bg, var(--pm-color-primary-hover)));
    border-color: var(--pm-btn-border-hover, var(--pm-btn-border, var(--pm-btn-bg-hover, var(--pm-color-primary-hover))));
    color: var(--pm-btn-color-hover, var(--pm-btn-color, #fff));
}

/* 링크 버튼의 기본 색상 상속 방지 */
a.pm-btn,
a.pm-btn:link,
a.pm-btn:visited {
    color: var(--pm-btn-color, #fff) !important;
    text-decoration: none;
}

a.pm-btn:hover,
a.pm-btn:active {
    color: var(--pm-btn-color-hover, var(--pm-btn-color, #fff)) !important;
    text-decoration: none;
}

/* Color Schemes */
.pm-btn-primary {
    --pm-btn-bg: var(--pm-color-primary);
    --pm-btn-border: var(--pm-color-primary);
    --pm-btn-color: #fff;
    --pm-btn-bg-hover: var(--pm-color-primary-hover);
    --pm-btn-border-hover: var(--pm-color-primary-active);
}

.pm-btn-secondary {
    --pm-btn-bg: var(--pm-color-secondary);
    --pm-btn-border: var(--pm-color-secondary);
    --pm-btn-color: #fff; /* 흰색 텍스트로 가독성 보장 */
    --pm-btn-bg-hover: var(--pm-color-secondary-hover);
    --pm-btn-border-hover: var(--pm-color-secondary-active);
    --pm-btn-color-hover: #fff;
}

.pm-btn-danger {
    --pm-btn-bg: var(--pm-color-danger);
    --pm-btn-border: var(--pm-color-danger);
    --pm-btn-color: #fff; /* 흰색 텍스트로 가독성 보장 */
    --pm-btn-bg-hover: var(--pm-color-danger-hover);
    --pm-btn-border-hover: var(--pm-color-danger-active);
    --pm-btn-color-hover: #fff;
}

.pm-btn-success {
    --pm-btn-bg: var(--pm-color-success);
    --pm-btn-border: var(--pm-color-success);
    --pm-btn-color: #fff; /* 흰색 텍스트로 가독성 보장 */
    --pm-btn-bg-hover: var(--pm-color-success-hover);
    --pm-btn-border-hover: var(--pm-color-success-active);
    --pm-btn-color-hover: #fff;
}

.pm-btn-default {
    --pm-btn-bg: var(--pm-color-gray-100);
    --pm-btn-border: var(--pm-color-border-strong);
    --pm-btn-color: var(--pm-color-dark);
    --pm-btn-bg-hover: #e2e6ea;
    --pm-btn-border-hover: var(--pm-color-muted-light);
    --pm-btn-color-hover: var(--pm-color-dark);
}

.pm-btn-info {
    --pm-btn-bg: var(--pm-color-info);
    --pm-btn-border: var(--pm-color-info);
    --pm-btn-color: #fff; /* 흰색 텍스트로 가독성 보장 */
    --pm-btn-bg-hover: var(--pm-color-info-hover);
    --pm-btn-border-hover: var(--pm-color-info-active);
    --pm-btn-color-hover: #fff;
}

.pm-btn-warning {
    --pm-btn-bg: var(--pm-color-warning);
    --pm-btn-border: var(--pm-color-warning);
    --pm-btn-color: #1a1d20; /* 더 어두운 색상으로 대비비 개선 (WCAG AA 기준) */
    --pm-btn-bg-hover: var(--pm-color-warning-hover);
    --pm-btn-border-hover: var(--pm-color-warning-active);
    --pm-btn-color-hover: #1a1d20;
}

/* === PLATFMGMT Pagination === */
.platfmgmt-pagination {
    text-align: center;
    padding: 20px 0 40px 0;
    margin: 40px auto 50px auto;
    clear: both;
}

.pm-paging {
    display: inline-block;
}

.pm-pg-btn,
.pm-pg-current {
    display: inline-block;
    padding: 10px 14px;
    margin: 0 3px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-decoration: none;
    min-width: 40px;
    height: 40px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.pm-pg-btn {
    background: var(--pm-color-surface);
    color: var(--pm-color-primary);
}

.pm-pg-btn:hover {
    background: var(--pm-color-border-soft);
    color: var(--pm-color-primary-hover);
    border-color: var(--pm-color-muted-light);
}

.pm-pg-btn i {
    font-size: 16px;
}

.pm-pg-current {
    background: var(--pm-color-primary);
    color: #fff;
    border-color: var(--pm-color-primary);
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

@media (max-width: 768px) {
    .platfmgmt-pagination {
        padding: 15px 10px 30px 10px;
    }

    .pm-pg-btn,
    .pm-pg-current {
        padding: 8px 10px;
        min-width: 35px;
        height: 35px;
        font-size: 13px;
        margin: 0 2px;
    }
}

/* Small Button Variant */
.pm-btn-sm {
    height: 32px;
    font-size: 13px !important;
    padding: 0 10px;
}

.pm-btn-chip {
    height: auto;
    padding: 2px 6px;
    font-size: 11px !important;
    line-height: 1.3;
}

/* === Info & Help Text === */
.form-info-block {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
}

.form-info-sm {
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
}

.form-info-block--muted {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* === Button Container === */
.btn-confirm {
    text-align: center;
    margin-top: 30px;
}

/* === Input Size Modifiers === */
.input-min-w-200 {
    min-width: 200px;
}

.min-w-280 {
    min-width: 280px !important;
}

.input-min-w-100 {
    min-width: 100px;
}

.input-ml-5 {
    margin-left: 5px;
}

.mt-1 {
    margin-top: var(--pm-space-1) !important;
}
.mt-2,
.mt-8 {
    margin-top: var(--pm-space-2) !important;
}
.mt-3,
.mt-15 {
    margin-top: var(--pm-space-3-5) !important;
}
.mt-6 {
    margin-top: var(--pm-space-1-5) !important;
}
.mt-10 {
    margin-top: var(--pm-space-2-5) !important;
}
.mt-20 {
    margin-top: var(--pm-space-5) !important;
}
.mt-28 {
    margin-top: var(--pm-space-7) !important;
}
.mt-30 {
    margin-top: var(--pm-space-8) !important;
}
.mt-40 {
    margin-top: var(--pm-space-9) !important;
}
.mb-1 {
    margin-bottom: var(--pm-space-1) !important;
}
.mb-2 {
    margin-bottom: var(--pm-space-2) !important;
}
.mb-3 {
    margin-bottom: var(--pm-space-3-5) !important;
}
.mb-4 {
    margin-bottom: var(--pm-space-5) !important;
}
.mb-10 {
    margin-bottom: var(--pm-space-2-5) !important;
}
.mb-16 {
    margin-bottom: var(--pm-space-4) !important;
}
.mb-30 {
    margin-bottom: var(--pm-space-8) !important;
}
.mb-0 {
    margin-bottom: var(--pm-space-0) !important;
}
.my-30 {
    margin-top: var(--pm-space-8) !important;
    margin-bottom: var(--pm-space-8) !important;
}

/* === Disabled State === */
select.frm_input:disabled {
    background-color: var(--pm-color-border-soft);
    cursor: not-allowed;
    opacity: 0.6;
}

select.frm_input:disabled + label {
    color: var(--pm-color-muted);
}

/* === Alert === */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffe8a1;
    color: #856404;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* 페이징 */
.paging {
    margin-top: 20px;
    text-align: center;
}

.paging a,
.paging strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid var(--pm-color-border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--pm-color-accent);
    font-weight: 500;
    transition: all 0.2s ease;
}

.paging .pg-current {
    background: var(--pm-color-accent);
    color: #fff;
    border-color: var(--pm-color-accent);
}

.paging a:hover {
    background: #f8f9fa;
    border-color: var(--pm-color-accent);
}

/* === Utility: Typography & Colors === */
.text-muted {
    color: var(--pm-color-muted) !important;
}

.text-primary {
    color: var(--pm-color-primary) !important;
}

.text-dark {
    color: var(--pm-color-dark) !important;
}

.text-success {
    color: var(--pm-color-success) !important;
}

.text-info {
    color: var(--pm-color-info) !important;
}

.text-danger {
    color: var(--pm-color-danger) !important;
}

.debug-note {
    font-size: 13px;
    margin-top: 8px;
    white-space: pre-wrap;
}

.text-warning {
    color: var(--pm-color-warning) !important;
}

.text-orange {
    color: #fd7e14 !important;
}

.text-warning-dark {
    color: var(--pm-color-warning-dark) !important;
}

.text-success-dark {
    color: #0f5132 !important;
}

.text-secondary {
    color: #868e96 !important;
}

.text-silver {
    color: var(--pm-color-muted-light) !important;
}

.text-primary-dark {
    color: #084298 !important;
}

.text-info-dark {
    color: #052c65 !important;
}

.text-brown {
    color: #664d03 !important;
}

.text-no-underline {
    text-decoration: none !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.u-nowrap {
    white-space: nowrap !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-24 {
    font-size: 24px !important;
}

/* === Utility: Layout === */
.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

.align-center {
    align-items: center !important;
}

.align-start {
    align-items: flex-start !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-5 {
    gap: 5px !important;
}

.gap-8 {
    gap: 8px !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-15 {
    gap: 15px !important;
}

.gap-20 {
    gap: 20px !important;
}
.pm-inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bg-white {
    background-color: #fff !important;
}

.rounded-sm {
    border-radius: 4px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

.shadow-soft {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.scroll-y-500 {
    max-height: 500px;
    overflow-y: auto;
}

.max-h-360 {
    max-height: 360px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.flex-1 {
    flex: 1 1 auto !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-25 {
    width: 25% !important;
}

.w-40px {
    width: 40px !important;
}

.w-50 {
    width: 50% !important;
}
.align-end {
    align-items: flex-end !important;
}
.min-w-120 {
    min-width: 120px !important;
}
.max-w-120 {
    max-width: 120px !important;
}
.min-w-140 {
    min-width: 140px !important;
}
.min-w-60 {
    min-width: 60px !important;
}
.min-w-260 {
    min-width: 260px !important;
}
.w-80px {
    width: 80px !important;
}
.w-120px {
    width: 120px !important;
}
.w-130px {
    width: 130px !important;
}
.w-160px {
    width: 160px !important;
}
.w-100 {
    width: 100% !important;
}

.text-slate {
    color: #6b7280 !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}

.d-block {
    display: block !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-inline-flex {
    display: inline-flex !important;
}
.d-inline {
    display: inline !important;
}
.text-nowrap {
    white-space: nowrap !important;
}
.ml-2 {
    margin-left: 8px !important;
}
.ml-1 {
    margin-left: 4px !important;
}
.ml-3 {
    margin-left: 12px !important;
}
.mr-2 {
    margin-right: 8px !important;
}
.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}
.p-16 {
    padding: 16px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.pm-help-text {
    font-size: 13px;
    color: var(--pm-color-muted);
    margin-top: 8px;
    line-height: 1.5;
}

.pm-meta {
    font-size: 12px;
    color: var(--pm-color-muted);
    line-height: 1.4;
}

.pm-description-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #637293;
    line-height: 1.5;
}

.pm-description-list li + li {
    margin-top: 6px;
}

.pm-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--pm-color-muted);
    background: var(--pm-color-surface-alt);
    border-radius: var(--pm-radius-md);
    border: 1px solid var(--pm-color-border-soft);
}

.align-self-end {
    align-self: flex-end !important;
}

.h-100 {
    height: 100% !important;
}