@charset "utf-8";
/* ==========================================================================
   NEXTT — 블로그 운영 관리 시스템  관리자 UI
   브랜드 기준: https://www.next-t.co.kr
     · Primary  #00EB88 (네온 그린)
     · Ink      #111    (다크 배경)
     · Text     #222 / Muted #666
     · Font     Pretendard (본문) + Outfit (숫자·영문)
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */
:root {
    /* 브랜드 */
    --nx-primary:        #00EB88;
    --nx-primary-dark:   #00c974;
    --nx-primary-soft:   rgba(0, 235, 136, .12);
    --nx-ink:            #111;
    --nx-ink-2:          #1b1b1b;
    --nx-ink-3:          #2a2a2a;

    /* 텍스트 */
    --nx-text:           #222;
    --nx-muted:          #666;
    --nx-faint:          #999;
    --nx-white:          #fff;

    /* 면·선 */
    --nx-bg:             #f4f5f6;
    --nx-card:           #fff;
    --nx-card-2:         #f5f5f5;
    --nx-line:           rgba(0, 0, 0, .1);
    --nx-line-soft:      rgba(0, 0, 0, .05);

    /* 상태 */
    --nx-blue:           #2563eb;
    --nx-amber:          #f59e0b;
    --nx-red:            #ef4444;
    --nx-violet:         #7c3aed;

    /* 형태 */
    --nx-radius:         10px;
    --nx-radius-sm:      6px;
    --nx-shadow:         0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);

    /* 레이아웃 */
    --nx-side-w:         236px;
    --nx-head-h:         62px;

    /* 폰트 */
    --nx-font:           'Pretendard Variable', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    --nx-font-num:       'Outfit', 'Pretendard Variable', 'Pretendard', sans-serif;
}

/* --------------------------------------------------------------------------
   2. 리셋
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-font);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote {
    margin: 0; padding: 0;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* 숫자는 Outfit + tabular */
.nx-num, .nx-stat-value, .nx-table td.nx-n {
    font-family: var(--nx-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   3. 레이아웃
   -------------------------------------------------------------------------- */
.nx-wrap { display: flex; min-height: 100vh; }

/* --- 사이드바 --- */
.nx-side {
    width: var(--nx-side-w);
    flex: 0 0 var(--nx-side-w);
    background: var(--nx-ink);
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.nx-side-logo {
    height: var(--nx-head-h);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nx-side-logo b {
    font-family: var(--nx-font-num);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--nx-white);
}
.nx-side-logo span {
    font-size: 11px;
    color: var(--nx-primary);
    letter-spacing: .04em;
    font-weight: 600;
}

.nx-nav { padding: 14px 12px; overflow-y: auto; flex: 1; }
.nx-nav-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .34);
    padding: 14px 10px 7px;
    text-transform: uppercase;
}
.nx-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--nx-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    transition: background .15s, color .15s;
}
.nx-nav a:hover { background: rgba(255, 255, 255, .06); color: var(--nx-white); }
.nx-nav a.on {
    background: var(--nx-primary);
    color: var(--nx-ink);
    font-weight: 700;
}
.nx-nav a .nx-nav-count {
    font-family: var(--nx-font-num);
    font-size: 11px;
    font-weight: 700;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 9.5px;
    background: rgba(255, 255, 255, .12);
    color: var(--nx-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nx-nav a.on .nx-nav-count { background: rgba(0, 0, 0, .18); color: var(--nx-ink); }

.nx-side-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
}

/* --- 본문 --- */
.nx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.nx-head {
    height: var(--nx-head-h);
    background: var(--nx-white);
    border-bottom: 1px solid var(--nx-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.nx-head h1 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.nx-head-sub { font-size: 12.5px; color: var(--nx-muted); margin-left: 10px; font-weight: 400; }
.nx-head-right { display: flex; align-items: center; gap: 12px; }
.nx-user { font-size: 13px; color: var(--nx-muted); }
.nx-user b { color: var(--nx-text); font-weight: 600; }

.nx-body { padding: 24px 26px 60px; }

/* --------------------------------------------------------------------------
   4. 카드 / 섹션
   -------------------------------------------------------------------------- */
.nx-card {
    background: var(--nx-card);
    border: 1px solid var(--nx-line-soft);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow);
}
.nx-card + .nx-card { margin-top: 18px; }

.nx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--nx-line-soft);
}
.nx-card-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.nx-card-head .nx-card-desc { font-size: 12.5px; color: var(--nx-muted); font-weight: 400; }
.nx-card-body { padding: 18px; }
.nx-card-body.nx-p0 { padding: 0; }

/* --------------------------------------------------------------------------
   5. 통계 타일
   -------------------------------------------------------------------------- */
.nx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.nx-stat {
    background: var(--nx-card);
    border: 1px solid var(--nx-line-soft);
    border-radius: var(--nx-radius);
    padding: 17px 18px;
    box-shadow: var(--nx-shadow);
}
.nx-stat-label {
    font-size: 12.5px;
    color: var(--nx-muted);
    font-weight: 500;
    margin-bottom: 7px;
}
.nx-stat-value {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.nx-stat-value small { font-size: 14px; font-weight: 500; color: var(--nx-faint); margin-left: 2px; }
.nx-stat-sub { font-size: 12px; color: var(--nx-faint); margin-top: 6px; }
.nx-stat.is-accent { background: var(--nx-ink); border-color: var(--nx-ink); }
.nx-stat.is-accent .nx-stat-label { color: rgba(255, 255, 255, .58); }
.nx-stat.is-accent .nx-stat-value { color: var(--nx-primary); }
.nx-stat.is-accent .nx-stat-sub { color: rgba(255, 255, 255, .42); }

/* 진행률 바 */
.nx-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--nx-line-soft);
    overflow: hidden;
    margin-top: 10px;
}
.nx-bar > i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--nx-primary);
    transition: width .3s ease;
}
.nx-bar.is-warn > i { background: var(--nx-amber); }
.nx-bar.is-danger > i { background: var(--nx-red); }

/* --------------------------------------------------------------------------
   6. 표
   -------------------------------------------------------------------------- */
.nx-table-wrap { overflow-x: auto; }

.nx-table { font-size: 13.5px; }
.nx-table th, .nx-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nx-line-soft);
    text-align: left;
    vertical-align: middle;
}
.nx-table thead th {
    background: var(--nx-card-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nx-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--nx-line);
}
.nx-table tbody tr:hover { background: rgba(0, 235, 136, .04); }
.nx-table td.nx-c, .nx-table th.nx-c { text-align: center; }
.nx-table td.nx-r, .nx-table th.nx-r { text-align: right; }
.nx-table .nx-title-cell { font-weight: 500; color: var(--nx-text); }
.nx-table .nx-title-cell:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-table tbody tr:last-child td { border-bottom: 0; }

.nx-empty {
    padding: 54px 20px;
    text-align: center;
    color: var(--nx-faint);
    font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   7. 배지 (상태)
   -------------------------------------------------------------------------- */
.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 9px;
    border-radius: 11.5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--nx-card-2);
    color: var(--nx-muted);
}
.nx-badge::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.nx-badge.is-draft     { background: #f1f2f3;               color: #6b7280; }
.nx-badge.is-review    { background: rgba(37,99,235,.1);    color: var(--nx-blue); }
.nx-badge.is-revise    { background: rgba(245,158,11,.14);  color: #b45309; }
.nx-badge.is-approved  { background: rgba(124,58,237,.1);   color: var(--nx-violet); }
.nx-badge.is-published { background: var(--nx-primary-soft); color: #047857; }
.nx-badge.is-hold      { background: rgba(239,68,68,.1);    color: var(--nx-red); }

/* D-day */
.nx-dday { font-family: var(--nx-font-num); font-size: 12px; font-weight: 700; color: var(--nx-faint); }
.nx-dday.is-near { color: var(--nx-amber); }
.nx-dday.is-over { color: var(--nx-red); }

/* --------------------------------------------------------------------------
   8. 버튼
   -------------------------------------------------------------------------- */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-white);
    color: var(--nx-text);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.nx-btn:hover { background: var(--nx-card-2); }

.nx-btn-primary {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: var(--nx-ink);
}
.nx-btn-primary:hover { background: var(--nx-primary-dark); border-color: var(--nx-primary-dark); }

.nx-btn-dark { background: var(--nx-ink); border-color: var(--nx-ink); color: var(--nx-white); }
.nx-btn-dark:hover { background: var(--nx-ink-3); }

.nx-btn-danger { background: var(--nx-white); border-color: rgba(239,68,68,.4); color: var(--nx-red); }
.nx-btn-danger:hover { background: rgba(239,68,68,.06); }

.nx-btn-sm { height: 29px; padding: 0 11px; font-size: 12.5px; }
.nx-btn-lg { height: 46px; padding: 0 26px; font-size: 15px; }
.nx-btn-block { width: 100%; }
.nx-btn[disabled], .nx-btn.is-disabled { opacity: .45; pointer-events: none; }

.nx-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.nx-btns-center { justify-content: center; }
.nx-btns-right  { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   9. 폼
   -------------------------------------------------------------------------- */
.nx-field { margin-bottom: 16px; }
.nx-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.nx-label .nx-req { color: var(--nx-red); margin-left: 2px; }
.nx-help { font-size: 12px; color: var(--nx-faint); margin-top: 5px; }

.nx-input, .nx-select, .nx-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-white);
    font-size: 13.5px;
    transition: border-color .15s, box-shadow .15s;
}
.nx-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus {
    outline: 0;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px var(--nx-primary-soft);
}
.nx-input[readonly], .nx-input[disabled] { background: var(--nx-card-2); color: var(--nx-muted); }

.nx-select { appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

.nx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.nx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }

/* 검색·필터 바 */
.nx-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--nx-card-2);
    border-bottom: 1px solid var(--nx-line-soft);
}
.nx-filter .nx-input, .nx-filter .nx-select { width: auto; min-width: 130px; background: var(--nx-white); }
.nx-filter .nx-spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   10. 페이징
   -------------------------------------------------------------------------- */
.nx-paging { display: flex; justify-content: center; gap: 4px; padding: 20px 0 4px; }
.nx-paging a, .nx-paging strong {
    min-width: 33px; height: 33px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-white);
    font-family: var(--nx-font-num);
    font-size: 13px; font-weight: 500;
}
.nx-paging a:hover { background: var(--nx-card-2); }
.nx-paging strong { background: var(--nx-ink); border-color: var(--nx-ink); color: var(--nx-white); font-weight: 700; }

/* --------------------------------------------------------------------------
   11. 로그인 / 단독 페이지
   -------------------------------------------------------------------------- */
body.nx-plain { background: var(--nx-ink); display: flex; align-items: center; justify-content: center; }

.nx-login {
    width: 100%;
    max-width: 380px;
    padding: 36px 32px 32px;
    background: var(--nx-white);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.nx-login-logo { text-align: center; margin-bottom: 26px; }
.nx-login-logo b {
    font-family: var(--nx-font-num);
    font-size: 26px; font-weight: 800; letter-spacing: .02em;
    display: block;
}
.nx-login-logo span { font-size: 12.5px; color: var(--nx-muted); }

.nx-empty-page { text-align: center; color: var(--nx-white); padding: 40px; }
.nx-empty-code { font-family: var(--nx-font-num); font-size: 68px; font-weight: 800; color: var(--nx-primary); line-height: 1; }
.nx-empty-title { font-size: 20px; font-weight: 700; margin: 14px 0 8px; color: var(--nx-white); }
.nx-empty-desc { font-size: 14px; color: rgba(255, 255, 255, .55); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   11-b. 표준 상태 배지 (workflow.lib.php 의 wf_statuses() 와 1:1)
   -------------------------------------------------------------------------- */
.nx-badge.st-idle  { background: #f1f2f3;              color: #6b7280; }
.nx-badge.st-run   { background: rgba(245,158,11,.14); color: #b45309; }
.nx-badge.st-wait  { background: rgba(37,99,235,.1);   color: var(--nx-blue); }
.nx-badge.st-done  { background: var(--nx-primary-soft); color: #047857; }
.nx-badge.st-block { background: rgba(239,68,68,.1);   color: var(--nx-red); }
.nx-badge.st-hold  { background: rgba(124,58,237,.1);  color: var(--nx-violet); }
.nx-badge.st-na    { background: transparent; color: var(--nx-faint); box-shadow: inset 0 0 0 1px var(--nx-line); }
.nx-badge.st-na::before { display: none; }

/* 로그인 화면 부가 */
.nx-login-err {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    color: #b91c1c;
    border-radius: var(--nx-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}
.nx-login-foot { text-align: center; font-size: 12px; color: var(--nx-faint); margin-top: 18px; }
.nx-side-out { display: inline-block; margin-top: 5px; color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 2px; }
.nx-side-out:hover { color: var(--nx-primary); }

/* --------------------------------------------------------------------------
   11-c. 체크보드 — 글 상세의 단계 목록
   -------------------------------------------------------------------------- */
.nx-phase { margin-bottom: 22px; }
.nx-phase-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: var(--nx-muted);
    padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: 1px solid var(--nx-line);
}
.nx-phase-title .nx-phase-n {
    font-family: var(--nx-font-num);
    background: var(--nx-ink); color: var(--nx-white);
    border-radius: 3px; padding: 1px 6px; font-size: 10.5px;
}

.nx-stage {
    background: var(--nx-card);
    border: 1px solid var(--nx-line-soft);
    border-left: 3px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    margin-bottom: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.nx-stage:hover { box-shadow: var(--nx-shadow); }
.nx-stage.is-gate    { border-left-color: var(--nx-ink); }
.nx-stage.s-done     { border-left-color: var(--nx-primary); }
.nx-stage.s-run      { border-left-color: var(--nx-amber); }
.nx-stage.s-wait     { border-left-color: var(--nx-blue); }
.nx-stage.s-block    { border-left-color: var(--nx-red); background: rgba(239,68,68,.03); }
.nx-stage.s-hold     { border-left-color: var(--nx-violet); }
.nx-stage.s-na       { opacity: .55; }

/* details/summary 로 접었다 편다 — 기본 삼각형은 지우고 우측에 표식을 둔다 */
.nx-stage > summary { list-style: none; cursor: pointer; }
.nx-stage > summary::-webkit-details-marker { display: none; }
.nx-stage > summary::marker { content: ''; }
.nx-stage > summary:hover { background: rgba(0, 0, 0, .015); }
.nx-stage > summary::after {
    content: '';
    width: 7px; height: 7px; flex: none;
    border-right: 1.6px solid var(--nx-faint);
    border-bottom: 1.6px solid var(--nx-faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s;
}
.nx-stage[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.nx-stage-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px;
}
.nx-stage-code {
    font-family: var(--nx-font-num); font-size: 11.5px; font-weight: 700;
    color: var(--nx-muted); background: var(--nx-card-2);
    border-radius: 3px; padding: 2px 6px; flex: none;
}
.nx-stage-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.nx-stage-tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    border: 1px solid var(--nx-ink); color: var(--nx-ink);
    border-radius: 3px; padding: 1px 5px;
}
.nx-stage-tag.is-ext { border-color: var(--nx-blue); color: var(--nx-blue); }
.nx-stage-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nx-stage-people { font-size: 12px; color: var(--nx-muted); }
.nx-stage-people b { color: var(--nx-text); font-weight: 600; }

.nx-stage-body {
    padding: 0 14px 13px;
    border-top: 1px dashed var(--nx-line-soft);
    margin-top: -1px;
}
.nx-stage-guide {
    font-size: 12.5px; color: var(--nx-muted); line-height: 1.65;
    background: var(--nx-card-2); border-radius: var(--nx-radius-sm);
    padding: 9px 12px; margin: 12px 0 0;
}

.nx-reject {
    margin-top: 12px; padding: 10px 12px;
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--nx-radius-sm);
    font-size: 13px; line-height: 1.6;
}
.nx-reject b { color: var(--nx-red); }

/* --------------------------------------------------------------------------
   12. 유틸
   -------------------------------------------------------------------------- */
.nx-mt0  { margin-top: 0 !important; }
.nx-mt8  { margin-top: 8px; }
.nx-mt16 { margin-top: 16px; }
.nx-mt24 { margin-top: 24px; }
.nx-mb0  { margin-bottom: 0 !important; }
.nx-mb16 { margin-bottom: 16px; }
.nx-muted { color: var(--nx-muted); }
.nx-faint { color: var(--nx-faint); }
.nx-small { font-size: 12.5px; }
.nx-bold  { font-weight: 700; }
.nx-nowrap { white-space: nowrap; }
.nx-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. 반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    :root { --nx-side-w: 62px; }
    .nx-side-logo { justify-content: center; padding: 0; }
    .nx-side-logo span, .nx-nav-title, .nx-nav a span:not(.nx-nav-count), .nx-side-foot { display: none; }
    .nx-nav a { justify-content: center; padding: 10px 0; }
}

@media (max-width: 720px) {
    .nx-body { padding: 16px 14px 46px; }
    .nx-head { padding: 0 14px; }
    .nx-grid-2, .nx-grid-3 { grid-template-columns: 1fr; }
    .nx-filter { padding: 12px 14px; }
    .nx-filter .nx-spacer { margin-left: 0; width: 100%; }
}