/* (주)CF대납결제 - Design System Components */
@import url('./tokens.css');

html, body {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-base);
    color: var(--fg-primary);
    background: var(--bg-page);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
}

body.main {
    background: var(--bg-page);
    min-height: 100vh;
    margin-bottom: 160px;
}

.container, .container-fluid { font-family: var(--font-sans); }

/* ============ TOP NAVBAR ============ */
.navbar.navbar-light.bg-light {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    padding: 0 var(--space-4);
    min-height: var(--layout-header-h);
}
.navbar.navbar-light .navbar-brand,
.navbar.navbar-light .nav-link {
    color: var(--fg-primary) !important;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
}
.navbar.navbar-light .nav-link:hover { color: var(--accent) !important; }

/* ============ MAIN NAV ============ */
.navbar.navbar-dark.bg-dark {
    background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%) !important;
    border-bottom: 2px solid var(--amber-500);
    box-shadow: var(--shadow-sm);
    padding: 0 var(--space-5);
}
.navbar.navbar-dark .navbar-brand {
    color: var(--amber-300) !important;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    font-size: var(--fs-md);
}
.navbar.navbar-dark .nav-link {
    color: var(--ink-100) !important;
    font-weight: var(--fw-medium);
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navbar.navbar-dark .nav-link:hover,
.navbar.navbar-dark .nav-link:focus {
    color: var(--amber-300) !important;
    background: rgba(232, 163, 61, 0.08);
}
.navbar.navbar-dark .nav-link.active {
    color: var(--amber-300) !important;
    background: rgba(232, 163, 61, 0.12);
}

/* ============ DROPDOWN ============ */
.dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
    min-width: 220px;
}
.dropdown-menu .dropdown-item {
    color: var(--fg-primary);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--accent-subtle) !important;
    color: var(--accent-hover) !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--accent) !important;
    color: var(--fg-inverse) !important;
}
.dropdown-menu .dropdown-item.disabled {
    color: var(--fg-disabled) !important;
    background: var(--bg-subtle) !important;
    cursor: not-allowed;
}
.dropdown-divider {
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-2) 0;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    border-radius: var(--radius-md);
}

/* ============ BUTTONS ============ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-normal);
    padding: var(--space-2) var(--space-4);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:focus, .btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: none !important;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--fg-inverse) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--fg-inverse) !important;
}
.btn-secondary {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--fg-primary) !important;
}
.btn-secondary:hover {
    background: var(--bg-subtle) !important;
    border-color: var(--border-strong) !important;
    color: var(--fg-primary) !important;
}
.btn-success { background: var(--success-500) !important; border-color: var(--success-500) !important; color: var(--fg-inverse) !important; }
.btn-success:hover { background: var(--success-700) !important; border-color: var(--success-700) !important; }
.btn-danger { background: var(--danger-500) !important; border-color: var(--danger-500) !important; color: var(--fg-inverse) !important; }
.btn-danger:hover { background: var(--danger-700) !important; border-color: var(--danger-700) !important; }
.btn-warning { background: var(--warning-500) !important; border-color: var(--warning-500) !important; color: var(--fg-inverse) !important; }
.btn-warning:hover { background: var(--warning-700) !important; border-color: var(--warning-700) !important; }
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
}
.btn-outline-primary:hover {
    background: var(--accent) !important;
    color: var(--fg-inverse) !important;
}

/* ============ FORMS ============ */
.form-label, label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--fg-secondary);
    margin-bottom: var(--space-1);
}
.form-control, .form-select,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], textarea, select {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--fg-primary);
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none;
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--fg-disabled); }

/* ============ TABLES ============ */
.table {
    color: var(--fg-primary);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: var(--fs-sm);
}
.table thead th {
    background: var(--bg-subtle);
    color: var(--fg-secondary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border-default);
    padding: var(--space-3) var(--space-4);
}
.table tbody td {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.table tbody tr:hover { background: var(--bg-subtle); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--ink-50); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border-subtle); }

/* ============ CARDS ============ */
.card {
    background: var(--bg-surface);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
}
.card-body { padding: var(--space-5); }
.card-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-5);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}

/* ============ BADGES ============ */
.badge {
    border-radius: var(--radius-xs);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    padding: var(--space-1) var(--space-2);
}
.badge.bg-primary { background: var(--accent) !important; color: var(--fg-inverse); }
.badge.bg-success { background: var(--success-500) !important; }
.badge.bg-warning { background: var(--warning-500) !important; color: var(--fg-inverse); }
.badge.bg-danger  { background: var(--danger-500) !important; }
.badge.bg-info    { background: var(--info-500) !important; }

/* ============ ALERTS ============ */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-4);
}
.alert-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-500); }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-500); }
.alert-danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: var(--danger-500); }
.alert-info    { background: var(--info-50);    color: var(--info-700);    border-color: var(--info-500); }

/* ============ PAGINATION ============ */
.pagination .page-link {
    color: var(--fg-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 2px;
    border-radius: var(--radius-sm);
}
.pagination .page-link:hover {
    background: var(--accent-subtle);
    color: var(--accent-hover);
    border-color: var(--accent);
}
.pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-inverse);
}
.pagination .page-item.disabled .page-link {
    color: var(--fg-disabled);
    background: var(--bg-subtle);
}

/* ============ FOOTER ============ */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) 0;
    text-align: center;
    color: var(--fg-muted);
    font-size: var(--fs-xs);
    box-shadow: 0 -1px 2px rgba(74, 55, 30, 0.04);
}
.footer .fot_wrap {
    max-width: var(--layout-content-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
.footer .fot_wrap article {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.footer em { font-style: normal; color: var(--fg-secondary); }
.footer a { color: var(--fg-secondary); }
.footer a:hover { color: var(--accent); }
.footer p { color: var(--fg-muted); font-size: var(--fs-xs); margin: 0; }

/* ============ LINKS ============ */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

/* ============ UTILITIES ============ */
.ppc-page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--fg-primary);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-2);
}
.ppc-page-subtitle {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-6);
}
.ppc-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}
.ppc-stat-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--accent);
}
.ppc-stat-card .stat-label {
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
}
.ppc-stat-card .stat-value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-tight);
}
.ppc-stat-card .stat-meta {
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
    margin-top: var(--space-2);
}
.ppc-amber-stripe { border-left: 3px solid var(--accent); }
.text-amber { color: var(--accent) !important; }
.bg-paper   { background: var(--bg-page) !important; }
.bg-subtle  { background: var(--bg-subtle) !important; }

.container, .container-fluid {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}
.navbar .container, .navbar .container-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb {
    background: var(--ink-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-subtle);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ============ AUTH / LOGIN ============ */
.ppc-auth-shell {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    background: linear-gradient(135deg, var(--paper) 0%, var(--amber-50) 100%);
}
.ppc-auth-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10);
    width: 100%;
    max-width: 420px;
}
.ppc-auth-brand { text-align: center; margin-bottom: var(--space-8); }
.ppc-auth-brand img { height: 40px; width: auto; margin-bottom: var(--space-4); }
.ppc-auth-brand h1 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
    margin: 0;
}
.ppc-auth-brand p {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-1);
}

@media (max-width: 768px) {
    body.main { margin-bottom: 220px; }
    .footer .fot_wrap article { flex-direction: column; gap: var(--space-2); }
}


/* ==========================================================================
   Spacing utilities — step 6 (extends Bootstrap's 0-5 scale using --space-6)
   ========================================================================== */
.m-6  { margin:        var(--space-6) !important; }
.mt-6 { margin-top:    var(--space-6) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.ms-6 { margin-left:   var(--space-6) !important; }
.me-6 { margin-right:  var(--space-6) !important; }
.my-6 { margin-top:    var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.mx-6 { margin-left:   var(--space-6) !important; margin-right:  var(--space-6) !important; }

.p-6  { padding:        var(--space-6) !important; }
.pt-6 { padding-top:    var(--space-6) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.ps-6 { padding-left:   var(--space-6) !important; }
.pe-6 { padding-right:  var(--space-6) !important; }
.py-6 { padding-top:    var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.px-6 { padding-left:   var(--space-6) !important; padding-right:  var(--space-6) !important; }

.gap-6 { gap: var(--space-6) !important; }