:root {
    /*
     * Base
     */
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-sub: #f8fafc;

    --text: #172033;
    --muted: #7b8496;
    --border: #e5e9f0;

    /*
     * Primary
     */
    --primary: #315efb;
    --primary-contrast: #ffffff;

    /*
     * Status
     */
    --success: #178a4b;
    --success-bg: #e8f7ef;

    --warning: #b86b00;
    --warning-bg: #fff4dd;

    --info: #2563eb;
    --info-bg: #eaf1ff;

    --danger: #d13b3b;
    --danger-bg: #fdecec;

    /*
     * Shadow
     */
    --shadow:
        0 8px 30px
        rgba(22, 34, 51, 0.06);

    /*
     * Sidebar - Light
     */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e6eaf0;

    --sidebar-text: #778296;
    --sidebar-text-strong: #1c2638;

    --sidebar-hover-bg: #f3f6fa;

    --sidebar-active-bg: #eaf0ff;
    --sidebar-active-text: #315efb;

    --sidebar-sub-bg: transparent;
    --sidebar-sub-hover-bg: #f3f6fa;
    --sidebar-sub-active-bg: #edf2ff;

    --sidebar-dot: #a2abba;

    --sidebar-brand-bg: #5b7cff;
    --sidebar-brand-text: #ffffff;

    --sidebar-divider: #edf0f4;
}

/*
 * Dark Theme
 */
[data-theme="dark"] {
    /*
     * Base
     */
    --bg: #0d1117;
    --surface: #141922;
    --surface-sub: #1a202b;

    --text: #edf2f8;
    --muted: #8e99aa;
    --border: #282f3a;

    /*
     * Primary
     */
    --primary: #6f8cff;
    --primary-contrast: #ffffff;

    /*
     * Status
     */
    --success: #67d391;
    --success-bg: #173627;

    --warning: #ffc463;
    --warning-bg: #3a2b13;

    --info: #8bb0ff;
    --info-bg: #1c2b4d;

    --danger: #ff8c8c;
    --danger-bg: #3b2024;

    /*
     * Shadow
     */
    --shadow: none;

    /*
     * Sidebar - Dark
     */
    --sidebar-bg: #11161e;
    --sidebar-border: #252c36;

    --sidebar-text: #8995a8;
    --sidebar-text-strong: #edf2f8;

    --sidebar-hover-bg: #1a212c;

    --sidebar-active-bg: #1e2a3d;
    --sidebar-active-text: #7899ff;

    --sidebar-sub-bg: transparent;
    --sidebar-sub-hover-bg: #181f29;
    --sidebar-sub-active-bg: #1c2738;

    --sidebar-dot: #596678;

    --sidebar-brand-bg: #607fff;
    --sidebar-brand-text: #ffffff;

    --sidebar-divider: #252c36;
}

/*
 * Global
 */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;

    background: var(--bg);
    color: var(--text);

    font-family:
        "Noto Sans KR",
        "Noto Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

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

button {
    color: inherit;
}

.muted {
    color: var(--muted);
}

/*
 * Common Card / Panel
 */
.card,
.panel {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow);
}

.card {
    padding: 18px;
}

.card strong {
    display: block;
    margin: 8px 0;

    font-size: 28px;
}

.card small {
    color: var(--muted);
}

.panel-head {
    height: 54px;
    padding: 0 16px;

    border-bottom: 1px solid var(--border);

    display: flex;
    align-items: center;
    justify-content: space-between;
}