@import url("./fonts.css");

/* SSO 관리 콘솔의 반응형 레이아웃과 화면 요소 스타일 */

        :root {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-card: #1e293b;
            --bg-input: #0f172a;
            --border: #334155;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent: #38bdf8;
            --accent-hover: #0ea5e9;
            --success: #22c55e;
            --danger: #ef4444;
            --danger-hover: #dc2626;
            --warning: #f59e0b;
            --radius: 8px;
            --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
        }

        header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 16px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        header h1 {
            font-size: 18px;
            font-weight: 600;
        }

        header h1 span {
            color: var(--accent);
        }

        #auth-section {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        #auth-section input {
            background: var(--bg-input);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 6px 12px;
            border-radius: var(--radius);
            font-size: 13px;
            width: 200px;
        }

        .tabs {
            display: flex;
            gap: 0;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 0 24px;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .tab:hover {
            color: var(--text-primary);
        }

        .tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        main {
            padding: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .panel {
            display: none;
        }

        .panel.active {
            display: block;
        }

        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 16px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .card-header h2 {
            font-size: 16px;
            font-weight: 600;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        th {
            text-align: left;
            padding: 10px 12px;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border);
            font-weight: 500;
        }

        td {
            padding: 10px 12px;
            border-bottom: 1px solid rgba(51, 65, 85, 0.5);
        }

        tr:hover td {
            background: rgba(56, 189, 248, 0.05);
        }

        .btn {
            padding: 6px 14px;
            border: none;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-primary {
            background: var(--accent);
            color: #0f172a;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background: var(--danger-hover);
        }

        .btn-sm {
            padding: 4px 10px;
            font-size: 12px;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }

        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .badge-success {
            background: rgba(34, 197, 94, 0.15);
            color: var(--success);
        }

        .badge-danger {
            background: rgba(239, 68, 68, 0.15);
            color: var(--danger);
        }

        .badge-warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--warning);
        }

        .badge-info {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            background: var(--bg-input);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: var(--radius);
            font-size: 13px;
            font-family: inherit;
        }

        .form-group textarea {
            min-height: 60px;
            resize: vertical;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            width: 90%;
            max-width: 520px;
            box-shadow: var(--shadow);
        }

        .modal h3 {
            margin-bottom: 16px;
            font-size: 16px;
        }

        .modal-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--accent);
        }

        .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .api-key-display {
            background: var(--bg-input);
            border: 1px solid var(--accent);
            border-radius: var(--radius);
            padding: 12px;
            font-family: var(--font-family);
            font-size: 13px;
            word-break: break-all;
            margin: 12px 0;
            color: var(--accent);
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }

        .empty-state p {
            margin-top: 8px;
            font-size: 14px;
        }

        code {
            background: var(--bg-input);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            color: var(--accent);
        }

        .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 20px;
            font-size: 13px;
            z-index: 200;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

:root { --bg-primary:#f6f8fb; --bg-secondary:#fff; --bg-card:#fff; --bg-input:#fff; --border:#e2e8f0; --text-primary:#17243b; --text-secondary:#526079; --text-muted:#66758c; --accent:#2563eb; --accent-hover:#1d4ed8; --radius:12px; --shadow:0 12px 40px #14233b12; }
body { font-family:var(--font-family); line-height:1.5; }
header { position:fixed; inset:0 0 auto 240px; height:76px; z-index:20; padding:0 36px; }
header h1 { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; color:var(--text-secondary); }
.tabs { position:fixed; inset:0 auto 0 0; width:240px; padding:30px 18px; flex-direction:column; border-right:1px solid var(--border); border-bottom:0; gap:6px; z-index:30; }
.brand { padding:0 14px 34px; }
.brand img, .header-symbol { display:block; flex-shrink:0; }
.nav-label { padding:0 14px 12px; font-size:11px; color:var(--text-muted); letter-spacing:1.4px; }
.tab { border:0; background:transparent; text-align:left; border-radius:9px; padding:12px 16px; font-family:inherit; }
.tab.active { background:#eaf1ff; color:#1d4ed8; font-weight:650; }
.sidebar-footer { margin-top:auto; padding:20px 14px 0; font-size:12px; border-top:1px solid var(--border); color:var(--text-muted); }
.sidebar-footer a { display:block; margin-top:12px; color:var(--accent); text-decoration:none; }
main { margin:76px 0 0 240px; max-width:none; padding:38px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.page-heading h2 { font-size:28px; letter-spacing:-1px; margin-bottom:6px; }
.page-heading p { color:var(--text-secondary); font-size:14px; }
.card { padding:24px; box-shadow:0 2px 6px #17243b03; }
.stats-grid { gap:18px; margin-bottom:24px; }
.stat-card { text-align:left; padding:24px; border-top:3px solid #dbe7ff; }
.stat-value { color:var(--text-primary); font-size:32px; }
.stat-label { font-size:13px; margin-top:10px; }
.btn { min-height:38px; padding:8px 14px; font-family:inherit; justify-content:center; }
.btn-primary { color:#fff; }
.btn-sm { min-height:32px; padding:5px 10px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
input,select { font-family:inherit; }
:focus-visible { outline:3px solid #93b4fd; outline-offset:3px; }
.table-scroll { overflow:auto; width:100%; }
table { min-width:660px; }
th { background:#f8fafc; font-size:12px; padding:13px 14px; white-space:nowrap; }
td { border-bottom:1px solid #edf1f6; padding:15px 14px; font-size:13px; }
td:last-child { min-width:160px; }
td .btn { margin:2px; }
.badge { padding:4px 9px; font-weight:500; white-space:nowrap; }
.badge-success { background:#eaf8f1; color:#187147; }
.badge-danger { background:#fff0ef; color:#b83732; }
.badge-warning { background:#fff6e2; color:#936010; }
.badge-info { background:#edf3ff; color:#245bbb; }
.empty-state { padding:48px 20px; color:var(--text-muted); text-align:center; }
.table-search { width:100%; max-width:360px; padding:10px 13px; border:1px solid var(--border); border-radius:8px; margin-bottom:18px; color:var(--text-primary); background:#fff; }
.modal-overlay { padding:20px; background:#13233b70; backdrop-filter:blur(3px); z-index:100; }
.modal { max-height:90dvh; overflow:auto; width:min(100%,580px); padding:28px; }
.form-group label { color:var(--text-secondary); }
.form-group input,.form-group select { min-height:42px; }
.toast { max-width:calc(100vw - 40px); border-left:4px solid var(--accent); }
.auth-gate { max-width:430px; margin:9vh auto; padding:36px; }
.auth-gate h2 { font-size:24px; margin-bottom:12px; }
.auth-gate p { color:var(--text-secondary); margin-bottom:24px; font-size:14px; }
.auth-gate .btn { width:100%; }
.auth-error { color:#b83732!important; min-height:21px; margin:12px 0!important; }
[hidden] { display:none!important; }
@media(max-width:1000px) { header { left:200px; padding:0 22px; } .tabs { width:200px; } main { margin-left:200px; padding:24px; } .stats-grid { grid-template-columns:repeat(2,1fr); } .card-header { flex-wrap:wrap; gap:14px; } }
@media(max-width:700px) { header { position:static; height:64px; padding:0 20px; } .tabs { position:static; width:auto; padding:10px 16px; flex-direction:row; overflow:auto; border-right:0; border-bottom:1px solid var(--border); } .tab { white-space:nowrap; padding:10px 14px; } .brand,.nav-label,.sidebar-footer { display:none; } main { margin:0; padding:24px 16px; } .page-heading { align-items:flex-start; } .page-heading h2 { font-size:24px; } .card { padding:18px; } .stat-card { padding:18px; } .form-row { flex-direction:column; } .auth-gate { margin:30px auto; } }
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }

.btn { white-space:nowrap; }
.page-heading > .btn { flex-shrink:0; }
@media(max-width:700px) { .empty-state { text-align:left; padding:24px 16px; } }

/* 프로토콜별 운영 현황과 설정 폼 */
.tabs { overflow-y:auto; }
.tabs .nav-label { margin-top:20px; margin-bottom:6px; font-size:10px; letter-spacing:1.6px; }
.protocol-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:24px; }
.protocol-card { padding:26px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.protocol-card-top,.context-banner { display:flex; align-items:center; gap:16px; }
.protocol-icon { display:inline-grid; place-items:center; flex-shrink:0; width:46px; height:46px; background:#e9f0ff; color:#315ec7; font-size:22px; font-weight:700; border-radius:12px; }
.oauth-icon { background:#ede9fe; color:#6e42c1; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--text-muted); margin-bottom:10px; }
.protocol-card h3 { font-size:19px; margin:0; }
.protocol-card p,.context-banner p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-top:4px; }
.protocol-numbers { display:flex; gap:38px; margin:24px 0; }
.protocol-numbers strong { display:block; font-size:27px; letter-spacing:-.6px; }
.protocol-numbers span { font-size:12px; color:var(--text-secondary); }
.protocol-actions { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid #edf1f6; padding-top:18px; }
.context-banner { border:1px solid #dde6f2; border-radius:12px; padding:20px; background:#f8faff; margin-bottom:22px; }
.context-banner > .badge { margin-left:auto; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:22px; align-items:start; }
.settings-aside { display:grid; gap:20px; min-width:0; }
.settings-aside h2 { font-size:16px; margin-bottom:16px; }
.hint,.form-group small,.check-row small { font-size:12px; line-height:1.7; color:var(--text-secondary); display:block; }
.settings-form > .hint { margin-bottom:24px; }
.card-header .hint { margin-top:7px; }
.form-group small { margin-top:6px; }
.settings-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:20px; margin-top:20px; border-top:1px solid var(--border); }
.setting-divider { border-top:1px solid var(--border); margin:24px 0; }
.check-row { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.6; margin:18px 0; cursor:pointer; }
.check-row input { width:17px; height:17px; margin-top:3px; flex-shrink:0; accent-color:var(--accent); }
textarea { width:100%; resize:vertical; min-height:90px; padding:12px; font:13px/1.7 var(--font-family); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); background:#fff; }
.dirty-state { font-size:12px; color:#986509; }
.form-error { color:#b83732; font-size:13px; line-height:1.6; min-height:20px; margin-top:12px; }
.endpoint { padding:13px 0; border-bottom:1px solid #edf1f6; }
.endpoint-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-secondary); }
.endpoint code { display:block; margin-top:7px; font-size:12px; line-height:1.7; word-break:break-all; background:none; padding:0; }
.copy-button { border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; padding:5px; }
.setup-steps { padding-left:20px; font-size:13px; line-height:1.8; color:var(--text-secondary); }
.setup-steps li { padding-bottom:12px; }
.settings-aside .btn { margin:15px 0; }
.filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.filter-bar .table-search { margin:0; }
.filter-bar select,.filter-bar input { border:1px solid var(--border); border-radius:8px; padding:10px 12px; font:13px inherit; color:var(--text-primary); background:#fff; min-height:40px; }
.log-filters { align-items:flex-end; }
.log-filters label { display:grid; gap:7px; font-size:12px; color:var(--text-secondary); }
.count { color:var(--text-muted); font-size:13px; }
.below-card { padding:16px 2px; }
.app-name { font-weight:600; font-size:14px; margin-bottom:7px; }
.cell-secondary { display:block; color:var(--text-secondary); font-size:11px; margin-top:6px; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.uri-list { max-width:240px; word-break:break-all; line-height:1.7; font-size:12px; }
.modal-wide { width:min(100%,660px); }
@media(max-width:1050px) { .settings-grid { grid-template-columns:1fr; } .settings-aside { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .protocol-grid,.settings-aside { grid-template-columns:1fr; } .context-banner { align-items:flex-start; flex-wrap:wrap; } .context-banner > div { flex:1; } .context-banner > .badge { margin-left:62px; } .protocol-card { padding:22px; } .filter-bar > input { width:100%; } .log-filters label { flex:1 1 130px; min-width:0; } .log-filters input,.log-filters select { width:100%; min-width:0; } }

@media(max-width:700px) {
    .context-banner { display:grid; grid-template-columns:46px minmax(0,1fr); }
    .context-banner > .badge { grid-column:2; margin-left:0; justify-self:start; }
    .form-row { grid-template-columns:1fr; }
}
.form-group select { width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:#fff; color:var(--text-primary); }
.form-group select[multiple] { min-height:120px; }
.form-group select[multiple] option { padding:6px; }
@media(min-width:701px) {
    .tabs { gap:2px; padding:22px 16px; }
    .tabs .brand { padding-bottom:16px; }
    .tabs .nav-label { margin:10px 0 4px; padding-bottom:0; }
    .tab { padding:9px 16px; }
    .sidebar-footer { padding-top:12px; }
}

@media(max-width:480px) { header h1 .console-label { display:none; } }

.log-row { cursor:pointer; }
body.modal-open { overflow:hidden; }
.auth-account-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:24px; font-size:13px; }
.auth-account-links a { color:var(--accent); }
.log-row:hover, .log-row:focus-within { background:#f3f7ff; }
.log-detail-button { border:0; background:none; padding:0; color:var(--accent); font:inherit; text-align:left; cursor:pointer; white-space:nowrap; }
.log-detail-button:hover { text-decoration:underline; }
.log-detail-modal { width:min(100%,800px); max-width:800px; }
.log-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:sticky; top:-28px; background:#fff; z-index:1; padding-top:8px; margin-top:-8px; }
.log-detail-heading h3 { font-size:22px; margin:8px 0 24px; }
.log-detail-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; }
.log-detail-fields dt { color:var(--text-secondary); font-size:12px; margin-bottom:5px; }
.log-detail-fields dd { margin:0; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.log-detail-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.log-detail-section h4 { font-size:13px; margin-bottom:10px; }
.log-detail-section p, .log-detail-section pre { font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-detail-section pre { margin:0; padding:16px; background:#f5f7fb; border-radius:8px; }
@media(max-width:600px) { .log-detail-fields { grid-template-columns:1fr; } .log-detail-modal { padding:20px; } .log-detail-heading { top:-20px; } }