/* ATLAS-inspired visual layer shared by WebSquare demo screens. */

:root {
    --demo-ink: var(--ws-color, #111318);
    --demo-muted: var(--ws-gray-600, #66707d);
    --demo-line: var(--ws-gray-300, #dfe3e8);
    --demo-soft: var(--ws-gray-50, #f6f7f9);
    --demo-blue: var(--ws-primary-500, #266df0);
    --demo-blue-soft: var(--ws-primary-100, #eef3fe);
    --demo-canvas: var(--ws-gray-100, #f4f5f7);
    --demo-surface: var(--ws-gray-0, #ffffff);
    --demo-line-soft: var(--ws-gray-200, #edf0f3);
    --demo-control-line: var(--ws-form-bd, #cfd5dc);
    --demo-heading: var(--ws-gray-900, #172033);
    --demo-on-action: var(--ws-gray-0, #ffffff);
    --demo-shadow: 0 10px 28px rgba(16, 24, 40, .06);
    --demo-font-family: Pretendard, Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", var(--ws-font-family, "Malgun Gothic"), sans-serif;
}

:root[data-demo-theme="paper"] {
    --demo-ink: #1c1712;
    --demo-muted: #655a4e;
    --demo-line: #e8e0d3;
    --demo-soft: #faf5ec;
    --demo-blue: #b0653a;
    --demo-blue-soft: #f9ede3;
    --demo-canvas: #eee7da;
    --demo-surface: #fffcf6;
    --demo-line-soft: #f0e9dd;
    --demo-control-line: #d8cfc2;
    --demo-heading: #2b241c;
}

:root[data-demo-theme="ocean"] {
    --demo-ink: #0d1b20;
    --demo-muted: #4f636b;
    --demo-line: #dfe8ec;
    --demo-soft: #f7fbfc;
    --demo-blue: #0d7490;
    --demo-blue-soft: #e3f2f6;
    --demo-canvas: #e6eef1;
    --demo-surface: #ffffff;
    --demo-line-soft: #eaf1f4;
    --demo-control-line: #cbd8dd;
    --demo-heading: #1a2a30;
}

:root[data-demo-theme="midnight"] {
    --demo-ink: #f2f5f9;
    --demo-muted: #9aa3b1;
    --demo-line: #262a31;
    --demo-soft: #1e242e;
    --demo-blue: #6e9bff;
    --demo-blue-soft: #1a2333;
    --demo-canvas: #0b0c0e;
    --demo-surface: #16181c;
    --demo-line-soft: #232935;
    --demo-control-line: #3c4552;
    --demo-heading: #e4e8ef;
    --demo-on-action: #0b0c0e;
    --demo-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

html,
body {
    min-height: 100%;
    color: var(--demo-ink);
    background: var(--demo-canvas) !important;
    font-family: var(--demo-font-family) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 28px !important;
}

/* Example screens do not expose a shell-style left menu. */
.demo-example-page body > .side,
.demo-example-page body > .sidebar,
.demo-example-page body > .side-menu,
.demo-example-page body > .left-menu,
.demo-example-page body > .lnb {
    display: none !important;
}

.demo-example-page body > .side + *,
.demo-example-page body > .sidebar + *,
.demo-example-page body > .side-menu + *,
.demo-example-page body > .left-menu + *,
.demo-example-page body > .lnb + * {
    box-sizing: border-box;
    width: 100% !important;
    margin-left: 0 !important;
}

body::before {
    content: "WEBSQUARE  /  EXAMPLE";
    display: block;
    margin: 0 0 14px;
    color: var(--demo-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

body > .w2group:first-of-type,
body > [class*="w2"]:first-of-type {
    box-sizing: border-box;
    min-height: calc(100vh - 92px);
    padding: 28px !important;
    border: 1px solid var(--demo-line) !important;
    border-radius: 14px;
    background: var(--demo-surface) !important;
    box-shadow: var(--demo-shadow);
}

.w2textbox {
    color: var(--demo-ink);
    font-family: inherit !important;
}

.w2trigger {
    box-sizing: border-box !important;
    min-height: 34px;
    padding: 0 14px !important;
    border: 1px solid var(--demo-ink) !important;
    border-radius: 8px !important;
    color: var(--demo-on-action) !important;
    background: var(--demo-ink) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.w2trigger:hover {
    border-color: var(--demo-blue) !important;
    background: var(--demo-blue) !important;
    transform: translateY(-1px);
}

.w2input,
.w2selectbox,
.w2textarea {
    box-sizing: border-box !important;
    min-height: 36px;
    padding: 7px 10px !important;
    border: 1px solid var(--demo-control-line) !important;
    border-radius: 8px !important;
    color: var(--demo-ink) !important;
    background: var(--demo-surface) !important;
    font-family: inherit !important;
    outline: none;
}

.w2input:focus,
.w2textarea:focus {
    border-color: var(--demo-blue) !important;
    box-shadow: 0 0 0 3px rgba(38, 109, 240, .12) !important;
}

.w2tb {
    overflow: hidden;
    border: 1px solid var(--demo-line) !important;
    border-radius: 10px;
    background: var(--demo-surface);
}

.w2tb_th {
    padding: 10px 12px !important;
    border-color: var(--demo-line) !important;
    color: var(--demo-heading) !important;
    background: var(--demo-soft) !important;
    font-weight: 650 !important;
}

.w2tb_td {
    padding: 8px 12px !important;
    border-color: var(--demo-line) !important;
    background: var(--demo-surface) !important;
}

.w2grid {
    overflow: hidden;
    border: 1px solid var(--demo-line) !important;
    border-radius: 10px !important;
    background: var(--demo-surface) !important;
}

.gridHeaderTDDefault,
.gridHeaderTDDefault_background {
    border-color: var(--demo-line) !important;
    color: var(--demo-heading) !important;
    background: var(--demo-soft) !important;
    font-family: inherit !important;
    font-weight: 650 !important;
}

.gridBodyDefault,
.gridBodyDefault_data {
    border-color: var(--demo-line-soft) !important;
    font-family: inherit !important;
}

.w2tabcontrol_tabhost,
.w2windowContainer_windowTabControl {
    border-color: var(--demo-line) !important;
    background: var(--demo-soft) !important;
}

.w2tabcontrol_tabhost li[aria-selected="true"],
.w2tabcontrol_active {
    color: var(--demo-blue) !important;
    background: var(--demo-blue-soft) !important;
}

@media (max-width: 720px) {
    body {
        padding: 14px !important;
    }

    body > .w2group:first-of-type,
    body > [class*="w2"]:first-of-type {
        padding: 16px !important;
    }
}