/* 참고 ERP 시안 기반 최종 테마. 페이지 CSS 뒤에서 시각 문법만 통일한다. */

:root {
    --panel-radius: 0px;
    --radius: 0px;
    --radius-sm: 0px;
    --radius-xs: 0px;
}

:root[data-theme="light"],
:root[data-theme="dark"] {
    --panel-radius: 0px;
    --radius: 0px;
    --radius-sm: 0px;
    --radius-xs: 0px;
    --panel-shadow: none;
    --panel-shadow-hover: none;
    --glassmorphism-box-shadow: var(--panel-shadow);
}

.xab-boot-spinner,
.xab-invoice-btn-spinner,
.xs-spinner {
    border-radius: 50% !important;
}

.panel,
.tool-card,
.service-card,
.notice-strip,
.nav-dropdown,
.iar-panel,
.iar-notice,
.inq-table-scroll,
.approval-table-scroll,
.window,
.loader,
.xab-dd-menu,
.xab-boot-card,
.xs-popover,
.xs-menu {
    box-shadow: var(--panel-shadow) !important;
}

:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):focus,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.xab-dd-toggle:focus,
.xab-dd-toggle:focus-visible,
.xab-dd.is-open .xab-dd-toggle {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--accent-blue) !important;
}

/* ── 페이지 크롬 (브레드크럼 + 큰 제목) ─────────────────────── */
.admin-chrome {
    flex: none;
    padding: 2rem 2.8rem 0;
    background: var(--canvas);
}
.admin-chrome[hidden] { display: none !important; }
.admin-chrome-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 1.8rem;
    margin-bottom: .8rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.admin-chrome-crumb:empty { display: none; }
.admin-chrome-crumb a {
    color: var(--text-secondary);
    text-decoration: none;
}
.admin-chrome-crumb a:hover { color: var(--accent-blue); }
.admin-chrome-title {
    margin: 0 0 1.4rem;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.25;
    color: var(--text-primary);
}
.admin-chrome-title:empty { display: none; }

.window:has(.login_form_wrapper) .admin-chrome {
    display: none;
}
.window:has(.content-header > h1) .admin-chrome-title,
.window:has(.page-head h1) .admin-chrome-title {
    display: none;
}

/* ── 콘텐츠 여백 ───────────────────────────────────────────── */
.window:has(.admin-chrome-title:not(:empty)) .content {
    padding-top: .4rem !important;
}
.window:has(.admin-chrome-title:not(:empty)) .content.xab-page {
    padding: 0 !important;
}
.content.xab-page.is-queried,
.content.xab-page:has(.xab-list-panel) {
    padding-bottom: 0 !important;
}

.page-head h1,
.content-header h1,
.iar-header h1,
.cs-qa-header h1,
.cs-sms-header h1,
.approval-page .content-header h1 {
    font-size: 2.2rem !important;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text-primary);
}

.page-head p,
.content-header p,
.iar-header p,
.cs-qa-header p,
.cs-sms-header p {
    color: var(--text-secondary);
    font-size: 1.35rem;
    font-weight: 500;
}

/* ── 패널 ──────────────────────────────────────────────────── */
.panel-head {
    background: #f8fafc !important;
    min-height: 4.2rem;
    padding: .9rem 1.4rem !important;
    border-bottom: 1px solid var(--panel-divider) !important;
}
.panel-icon {
    width: 2rem !important;
    height: 2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}
.panel-icon .icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    color: currentColor !important;
    stroke: currentColor;
    stroke-width: 1.8;
}
.panel-icon.is-green,
.panel-icon.is-orange,
.panel-icon.is-red,
.panel-icon.is-purple,
.panel-icon.is-teal,
.panel-icon.is-gray {
    background: transparent !important;
    color: var(--text-secondary) !important;
}
.panel-icon.is-green .icon,
.panel-icon.is-orange .icon {
    color: currentColor !important;
}
.panel-title { font-size: 1.5rem; font-weight: 800; }
.panel-body { padding: 1.6rem !important; }

/* ── 버튼 ──────────────────────────────────────────────────── */
.btn,
.work-page .btn,
.approval-page .btn,
.board-search .board-btn,
.toolbar-btn,
.control-btn,
a.page-back {
    height: var(--ctrl-h, 3.6rem);
    padding: 0 1.6rem;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-primary);
}
.btn-primary,
.work-page .btn-primary,
.approval-page .btn-primary,
.board-search .board-btn {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}
.btn-primary:hover,
.work-page .btn-primary:hover,
.approval-page .btn-primary:hover,
.board-search .board-btn:hover {
    background: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
    color: #fff;
}
a.page-back {
    height: 3.2rem;
    padding: 0 1.2rem;
    font-size: 1.3rem;
    background: var(--panel);
    border-radius: var(--radius-sm) !important;
}

/* ── 입력 ──────────────────────────────────────────────────── */
.inq-search input,
.cs-qa-search,
.cs-qa-category-select,
.board-search input,
.board-search select {
    height: var(--ctrl-h, 3.6rem);
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.35rem;
    border-radius: var(--radius-sm) !important;
}

/* 통계 조회 줄 셀렉트. CS 업무(.cs-qa-category-select)와 같은 화살표.
   위 background 단축어가 화살표 이미지를 지우므로 그 다음에 다시 깐다. */
.board-search select,
.cs-qa-category-select {
    padding: 0 2.4rem 0 1.2rem;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

/* ── 탭/칩: 채움 대신 하단 언더라인 ────────────────────────── */
.menu-bar {
    gap: 0;
    border: none;
    background: transparent;
}
.menu-item,
.stats-tab {
    height: 3.6rem;
    margin: 0;
    padding: 0 1.6rem;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
}
.menu-item:hover,
.stats-tab:hover {
    color: var(--text-primary) !important;
    background: transparent !important;
}
.menu-item.active,
.stats-tab.on {
    background: transparent !important;
    color: var(--accent-blue) !important;
    border-bottom-color: var(--accent-blue) !important;
    font-weight: 800;
}

/* ── 뱃지: 외곽선 사각 ─────────────────────────────────────── */
.panel-meta .badge,
.status-badge,
.home-page .status-badge,
.inq-answered-pill,
.iar-badge,
.tool-hub .tool-badge-wip {
    height: 2.4rem;
    padding: 0 .8rem;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: var(--radius-xs) !important;
}
.home-page .status-badge.is-online,
.inq-answered-pill.is-answered {
    background: #f0faf6;
    border-color: #b7ebc9;
    color: #008c69;
}
.home-page .status-badge.is-testing,
.inq-answered-pill.is-unanswered {
    background: #fff8e8;
    border-color: #f8d48b;
    color: #c47d00;
}
.home-page .status-badge.is-offline {
    background: #fff1f2;
    border-color: #ffc9ce;
    color: #d63b4a;
}
.home-page .status-badge.is-utils,
.iar-badge {
    background: #eef4ff;
    border-color: #c5d8ff;
    color: var(--accent-blue);
}

/* ── 표 ────────────────────────────────────────────────────── */
.inq-table-scroll,
.approval-table-scroll {
    border: 1px solid var(--panel-border);
    background: var(--panel);
    border-radius: var(--panel-radius) !important;
    overflow: auto;
}
.inq-table thead,
.approval-table thead,
.inq-table th,
.approval-table th {
    background: var(--table-head, #f7f8fa) !important;
    color: var(--text-secondary);
    font-weight: 700;
    border-bottom: 1px solid var(--panel-border);
}
.inq-table td,
.approval-table td {
    border-bottom: 1px solid var(--panel-divider);
    border-left: none;
    border-right: none;
    padding: 1.15rem 1.2rem;
}
.inq-table tbody tr:hover,
.approval-table tbody tr:hover {
    background: #f8fafc;
}

/* ── 카드 타일 ─────────────────────────────────────────────── */
.home-page .service-card,
.tool-hub .tool-card,
.tool-card {
    border: 1px solid var(--panel-border) !important;
    background: var(--panel) !important;
    border-radius: var(--panel-radius) !important;
}
.home-page .service-card:hover,
.tool-hub .tool-card:hover,
.tool-card:hover {
    border-color: var(--accent-blue) !important;
    background: var(--panel) !important;
}
.tool-icon,
.home-page .service-icon {
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
}

/* 본문 메뉴 카드: 아이콘은 제목 왼쪽, 제목은 카드 상단에 둔다. */
.tool-hub .tool-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas:
        "icon name"
        "description description"
        "meta meta";
    align-content: start;
    align-items: center;
    justify-items: start;
    column-gap: .8rem;
    row-gap: .8rem;
    min-height: 10rem;
    padding-top: 1.4rem;
}

.tool-hub .tool-icon {
    grid-area: icon;
    width: 2rem;
    height: 2rem;
    margin: 0;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
}

.tool-hub .tool-icon .icon {
    width: 1.9rem;
    height: 1.9rem;
    color: currentColor;
    stroke-width: 1.8;
    vertical-align: 0;
}

.tool-hub .tool-icon .icon.is-cs {
    stroke-width: 1.45;
}

.tool-hub .tool-icon .icon.is-cs-fill {
    fill: currentColor;
    stroke: none;
}

.tool-hub .tool-name {
    grid-area: name;
    margin: 0;
    align-self: center;
    line-height: 2rem;
}

.tool-hub .tool-description {
    grid-area: description;
    margin: 0;
}

.tool-hub .tool-meta {
    grid-area: meta;
    margin-top: .35rem;
}

.tool-hub .tool-card:hover .tool-icon {
    border-color: transparent;
    background: transparent !important;
    color: var(--accent-blue);
}

.home-page .service-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0;
}

.home-page .service-icon img {
    max-width: 100%;
    max-height: 100%;
}

.work-page { --work-point: var(--accent-blue); --work-point-hover: var(--accent-blue-hover); }
.inquiry-page, .approval-page { --work-point: var(--accent-blue); --work-point-hover: var(--accent-blue-hover); }

/* ── ERP 공통 표면/컨트롤 ─────────────────────────────────── */
.panel,
.filter-panel,
.work-panel,
.iar-panel,
.cs-qa-panel,
.cs-sms-panel,
.xab-filter-panel,
.xab-list-panel {
    background: var(--panel) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: var(--panel-shadow) !important;
}

button,
input,
select,
textarea,
.xab-dd-toggle,
.xab-btn,
.inq-page-btn,
.cs-sms-page-btn {
    font-family: var(--font);
}

.inq-search input,
.cs-qa-search,
.cs-qa-category-select,
.board-search input,
.board-search select,
.cs-sms-search input,
.login_form input,
.iar-panel input,
.iar-panel textarea,
.re-wrap input,
.re-wrap select,
.re-wrap textarea,
.xab-filter input:not([type="hidden"]),
.xab-filter select,
.xab-dd-toggle {
    border-color: var(--panel-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--panel) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary);
}

.inq-toolbar,
.cs-sms-toolbar,
.work-toolbar,
.board-search,
.xab-filter {
    background: var(--panel) !important;
    border-color: var(--panel-divider) !important;
}

.xab-filter-label,
.filter-label {
    color: var(--text-secondary) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.xab-dd-menu,
.nav-dropdown,
.xs-popover,
.xs-menu {
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--panel) !important;
    box-shadow: 0 10px 24px rgba(35, 49, 83, 0.13) !important;
}

.xab-dd-option:hover,
.xab-dd-option.is-selected {
    background: var(--accent-blue-soft) !important;
    color: var(--accent-blue) !important;
}

/* 표의 DOM 계약은 유지하고 시각 밀도만 ERP 기준으로 통일한다. */
.board,
.inq-table,
.approval-table,
.cs-sms-table,
.xab-table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    color: var(--text-primary);
}

.board th,
.inq-table th,
.approval-table th,
.cs-sms-table th {
    height: 4.2rem;
    padding: .9rem 1.1rem;
    background: var(--table-head) !important;
    color: #5f687b !important;
    font-size: 1.2rem;
    font-weight: 700 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--panel-border) !important;
    white-space: nowrap;
}

.board td,
.inq-table td,
.approval-table td,
.cs-sms-table td {
    border-right: 0 !important;
    border-bottom: 1px solid var(--panel-divider) !important;
}

.xab-table th {
    height: 4.2rem;
    padding: .9rem 1.1rem;
    background: var(--table-head) !important;
    color: #5f687b !important;
    font-size: 1.2rem;
    font-weight: 700 !important;
    border-right: 1px solid var(--panel-divider) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    white-space: nowrap;
}

.xab-table td {
    border-right: 1px solid var(--panel-divider) !important;
    border-bottom: 1px solid var(--panel-divider) !important;
}

.board tr:hover td,
.inq-table tbody tr:hover td,
.approval-table tbody tr:hover td,
.cs-sms-table tbody tr:hover td,
/* 행 호버: 기본 흰/회색 칸을 덮는다. 팔레트 지정색(흰색 제외)은 유지한다.
 * 흰색(#fff) 팔레트 칸은 xab-delivery.css 에서 호버 하늘색을 적용한다.
 * background 단축어는 background-image(취소선 등)를 지우므로 color 만 지정한다. */
.xab-table tbody tr:hover td:not(.has-xab-cell-bg):not(.xs-editing):not(:focus-within):not(.xs-sel):not(.xs-active),
.xab-table tbody tr.is-xab-row-hover td:not(.has-xab-cell-bg):not(.xs-editing):not(:focus-within):not(.xs-sel):not(.xs-active) {
    background-color: #f7f9fe !important;
}

.xab-table tr.is-selected td,
.xab-table-frame:not(.is-xs-ready) .xab-table td.xs-sel:not(.xs-editing):not(:focus-within),
.xab-table-frame:not(.is-xs-ready) .xab-table td.xs-active:not(.xs-editing):not(:focus-within) {
    background-color: #eaf0ff !important;
}

/* 편집 중(입력 중) 칸: 인풋 위·아래 선택/호버 배경 제거 */
.xab-table tbody td.is-edit.xs-editing:not(.has-xab-cell-bg),
.xab-table tbody td.is-edit:focus-within:not(.has-xab-cell-bg),
.xab-table td.xs-sel.xs-editing:not(.has-xab-cell-bg),
.xab-table td.xs-active.xs-editing:not(.has-xab-cell-bg),
.xab-table td.xs-sel:focus-within:not(.has-xab-cell-bg),
.xab-table td.xs-active:focus-within:not(.has-xab-cell-bg) {
    background: transparent !important;
    background-color: transparent !important;
}

.inq-pager,
.cs-sms-pager,
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.6rem 0 .2rem;
}

.inq-page-btn,
.cs-sms-page-btn,
.pagination a,
.pagination span {
    min-width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--panel) !important;
    color: var(--text-secondary) !important;
}

.inq-page-btn.is-active,
.cs-sms-page-btn.is-active,
.pagination .active {
    border-color: var(--accent-blue) !important;
    background: var(--accent-blue) !important;
    color: #fff !important;
}

/* 업무 상태는 작은 외곽선 배지로 표현한다. */
.inq-badge,
.nav-metric,
.tool-badge-wip,
.xab-status,
[class*="status-pill"],
[class*="status-badge"] {
    border-radius: var(--radius-xs) !important;
}

/* ── WEHAGO형 테두리 기반 레이아웃 ───────────────────────────
   흰 작업면에서도 카드·입력·동작 영역의 경계를 놓치지 않도록 외곽선을 유지한다. */
html,
body,
.body-wrapper,
.window,
.content:not(.xab-page),
.iar-wrap {
    background: #f3f5f7 !important;
}

.content.xab-page {
    background: #fff !important;
}

/* X/A/B 배송은 카드형 페이지가 아니라 창 전체를 쓰는 워크시트다. */
body:has(.content.xab-page),
.window:has(> .content.xab-page) {
    margin: 0 !important;
    padding: 0 !important;
}

.window:has(> .content.xab-page) {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - var(--nav-height, 5.6rem)) !important;
    min-height: calc(100vh - var(--nav-height, 5.6rem)) !important;
    max-height: calc(100vh - var(--nav-height, 5.6rem)) !important;
}

.window > .content.xab-page {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.content.xab-page > .xab-workspace,
.content.xab-page .xab-list-panel,
.content.xab-page .xab-list-panel > .panel-body,
.content.xab-page .xab-table-frame {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.content.xab-page .xab-list-panel > .panel-body.is-flush {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.content.xab-page .xab-list-panel > .panel-body.is-flush > .xab-table-frame {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.content.xab-page > .xab-workspace {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.panel,
.filter-panel,
.work-panel,
.cs-qa-panel,
.cs-sms-panel {
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: none !important;
}

/* X/A/B 배송 작업면은 표 전용 무테 레이아웃을 그대로 유지한다. */
.xab-filter-panel,
.xab-list-panel,
.xab-workspace {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 배송 시트 상단(조회 막대 + 시트 도구막대)을 하나의 명령 막대로 묶는다.
   두 줄 모두 같은 흰 표면·같은 좌우 여백을 쓰고 가는 선으로만 나눈다.
   회색은 표 제목행에서 시작하게 두어 명령 막대 → 제목행 → 셀 순서로 읽힌다. */
.xab-workspace {
    --xab-cmd-edge: #ccd6e4;
    --xab-cmd-inset: .9rem;
    --xab-cmd-ctrl-border: #dbe1ea;
    --xab-cmd-ctrl-border-hover: #b9c4d4;
    --xab-cmd-hover: #f1f5ff;
    --xab-cmd-font: "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 두 줄 사이에는 선을 두지 않는다. 위아래 여백만 절반씩 나눠 가져
   한 판 안에서 줄만 바뀐 것처럼 보이게 하고, 아래 경계는 마지막 줄이 맡는다. */
.xab-filter-panel .panel-body.is-tight {
    padding: .6rem var(--xab-cmd-inset) .3rem !important;
    background: #fff !important;
    border-bottom: 0 !important;
}

.xab-workspace .xs-toolbar {
    padding: .3rem var(--xab-cmd-inset) .6rem !important;
    background: #fff !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--xab-cmd-edge) !important;
}

/* 시트가 아직 없을 때는 조회 막대가 아래 경계를 대신 맡는다. */
.xab-workspace:not(:has(.xs-toolbar)) .xab-filter-panel .panel-body.is-tight {
    padding-bottom: .6rem !important;
    border-bottom: 1px solid var(--xab-cmd-edge) !important;
}

/* 조회 막대·시트 도구막대·표를 같은 글꼴로 묶어 한 프로그램처럼 읽히게 한다. */
.xab-workspace .xs-tool,
.xab-workspace .xs-tool-hint,
.xab-workspace .xs-total-badge,
.xab-workspace .xs-status-busy {
    font-family: var(--xab-cmd-font) !important;
}

.xab-workspace .xs-tool:hover:not(:disabled) {
    background: var(--xab-cmd-hover) !important;
}

.xab-workspace .xs-color-split .xs-tool:hover:not(:disabled) {
    background: rgba(0, 0, 0, .06) !important;
}

.xab-workspace .xs-fav-palette:hover {
    background: rgba(0, 0, 0, .06) !important;
}

.xab-workspace .xs-tool-sep {
    background: #dfe4ec !important;
}

.xab-workspace .xs-total-badge {
    border: 0 !important;
    background: transparent !important;
}

/* 조작 설명은 배경으로 물러나게 둔다. */
.xab-workspace .xs-tool-hint {
    color: var(--text-tertiary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
}

/* 흰 도구 영역이 한 판으로 읽히도록 표 제목행부터 회색을 쓴다. */
.xab-workspace .xab-table thead th {
    background-color: var(--xab-header-bg) !important;
}

/* 조회 조건 / 검색 / 자동화를 아래 도구막대의 구분선과 같은 모양으로 나눈다.
   택배사 운송장 제거부터는 남는 공간을 밀어 오른쪽에 붙인다. */
.xab-filter-search-align,
.xab-filter-toolbar {
    position: relative;
    padding-left: .85rem !important;
    border-left: 0 !important;
}

.xab-filter-search-align {
    margin-left: 0 !important;
}

.xab-filter-toolbar {
    margin-left: auto !important;
    justify-content: flex-end;
}

.xab-filter-search-align::before {
    content: '';
    position: absolute;
    left: .2rem;
    top: 50%;
    width: 1px;
    height: 1.9rem;
    margin-top: -.95rem;
    background: #dfe4ec;
}

.xab-filter-toolbar::before {
    content: none;
    display: none;
}

/* 서비스·카테고리·배송상태는 같은 너비로 맞추고 기존보다 조금 넓힌다. */
.xab-filter-row-filters > .xab-filter-group > .xab-dd {
    width: 14rem !important;
}

/* 셀렉트박스와 동작 버튼은 같은 글꼴·크기·굵기를 쓴다. */
.xab-filter-panel .xab-dd-toggle,
.xab-filter-panel .xab-dd-text,
.xab-filter-panel .xab-btn,
.xab-filter-panel .xab-btn span {
    font-family: var(--xab-cmd-font) !important;
    font-size: var(--xab-filter-fs, 1.3rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}

/* 셀렉트박스는 밑줄 없이 두고, 검색어 입력만 하단선으로 입력 자리를 표시한다. */
.xab-filter-panel .xab-dd-toggle,
.xab-filter-panel .xab-search-input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

.xab-filter-panel .xab-search-input {
    border-bottom: 1px solid var(--xab-cmd-ctrl-border) !important;
}

.xab-filter-panel .xab-dd-toggle:hover,
.xab-filter-panel .xab-search-input:hover {
    background: var(--xab-cmd-hover) !important;
}

.xab-filter-panel .xab-search-input:hover {
    border-bottom-color: var(--xab-cmd-ctrl-border-hover) !important;
}

.xab-filter-panel .xab-dd.is-open .xab-dd-toggle,
.xab-filter-panel .xab-search-input:focus {
    outline: 0 !important;
    background: var(--accent-blue-soft) !important;
    color: var(--text-primary) !important;
}

.xab-filter-panel .xab-search-input:focus {
    border-bottom-color: var(--accent-blue) !important;
    box-shadow: inset 0 -1px 0 var(--accent-blue) !important;
}

/* 동작 버튼은 시트 도구막대 버튼과 같은 납작한 문법을 쓴다. */
.xab-filter-panel .xab-btn {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.xab-filter-panel .xab-btn:hover {
    background: var(--xab-cmd-hover) !important;
    color: var(--text-primary) !important;
}

/* 조회는 채움 없이 파란 글자와 아이콘으로 주 동작임을 표시한다. */
.xab-filter-panel .xab-btn-primary {
    border: 0 !important;
    background: transparent !important;
    color: var(--accent-blue) !important;
}

.xab-filter-panel .xab-btn-primary:hover {
    border: 0 !important;
    background: var(--accent-blue-soft) !important;
    color: var(--accent-blue-hover) !important;
}

/* 자동화 버튼도 하단 도구처럼 무테로 두고 색상으로만 기능 위계를 준다. */
.xab-filter-panel .xab-btn-tool,
.xab-filter-panel .xab-invoice-btn.xab-btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--accent-blue-hover) !important;
}

.xab-filter-panel .xab-btn-tool:hover,
.xab-filter-panel .xab-invoice-btn.xab-btn:hover {
    border: 0 !important;
    background: var(--accent-blue-soft) !important;
    color: var(--accent-blue-hover) !important;
}

.xab-filter-panel .xab-btn-tool .xab-btn-invoice-progress-track {
    background: #fff !important;
}

/* 자동화 기능의 번개 표시는 무테 상태에서도 식별되는 진한 황색을 쓴다. */
.xab-filter-panel .xab-btn-tool .xab-bolt-icon {
    color: #eb9a00 !important;
}

.xab-filter-panel .xab-btn-clear-invoice .xab-btn-invoice-state--idle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
}

.xab-filter-panel .xab-btn-clear-invoice {
    border: 0 !important;
    background: transparent !important;
    color: var(--accent-blue-hover) !important;
}

.xab-filter-panel .xab-btn-clear-invoice:hover {
    border: 0 !important;
    background: var(--accent-blue-soft) !important;
    color: var(--accent-blue-hover) !important;
}

/* 조회 조건 세 칸과 검색 두 칸은 간격 없이 이어 하나의 컨트롤처럼 보이게 한다.
   좁은 화면에서는 세로로 쌓이므로 넓은 화면에만 적용한다. */

    :where(html[data-layout="pc"]) .xab-filter-row-filters, :where(html[data-layout="pc"]) .xab-filter-search-fields, :where(html[data-layout="pc"]) .xab-filter-search-align{
        gap: 0;
    }

    :where(html[data-layout="pc"]) .xab-filter-toolbar{
        gap: .4rem;
    }


/* 맞붙은 테두리 중 지금 다루는 칸의 테두리가 위로 오게 한다. */
.xab-filter-panel .xab-dd-toggle:hover,
.xab-filter-panel .xab-search-input:hover,
.xab-filter-panel .xab-search-input:focus {
    position: relative;
    z-index: 2;
}

/* 줄바꿈된 묶음 앞에는 세로 구분선을 쓰지 않는다. */
@media (max-width: 1200px) {
    .xab-filter-toolbar {
        padding-left: 0 !important;
        padding-top: .35rem !important;
    }

    .xab-filter-toolbar::before {
        display: none;
    }
}


    :where(html[data-layout="mobile"]) .xab-filter-panel .panel-body.is-tight{
        padding: .7rem .85rem !important;
    }

    :where(html[data-layout="mobile"]) .xab-workspace .xs-toolbar{
        padding: .45rem .85rem !important;
    }

    :where(html[data-layout="mobile"]) .xab-filter-search-align{
        padding-left: 0 !important;
    }

    :where(html[data-layout="mobile"]) .xab-filter-search-align::before{
        display: none;
    }


.panel-head,
.panel-body {
    border-radius: 0 !important;
}

.home-page .services-grid,
.tool-hub .tool-grid {
    gap: 1.2rem !important;
    border: 0 !important;
}

.home-page .services-grid {
    row-gap: 1.2rem !important;
}

.home-page .service-card,
.tool-hub .tool-card,
.tool-card {
    margin: 0;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: none !important;
    transform: none !important;
}

.home-page .service-card:last-child,
.tool-hub .tool-card:last-child,
.tool-card:last-child {
    box-shadow: none !important;
}

.home-page .service-card:hover,
.tool-hub .tool-card:hover,
.tool-card:hover {
    border-color: var(--accent-blue) !important;
    background: #f8fbff !important;
}

/* 메뉴 카드 묶음의 바깥 프레임만 제거하고 개별 카드 경계는 유지한다. */
.tool-hub > .panel,
.home-page > .panel:has(.services-grid) {
    border: 0 !important;
}

.inq-table-scroll,
.approval-table-scroll,
.cs-sms-table-wrap,
.board-scroll {
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: none !important;
}

.xab-table-frame {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.inq-toolbar,
.cs-sms-toolbar,
.work-toolbar,
.board-search {
    border-radius: var(--panel-radius) !important;
    box-shadow: none !important;
}

.xab-filter {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.inq-toolbar,
.cs-sms-toolbar,
.work-toolbar,
.board-search,
.cs-qa-toolbar {
    padding: .8rem 1rem !important;
    border: 1px solid var(--panel-border) !important;
    background: #fafbfd !important;
}
.cs-sms-page .cs-sms-toolbar {
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 .4rem !important;
}

.iar-panel,
.iar-notice,
.re-editor-panel,
.re-list-panel {
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: none !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

/* 버튼·입력창·카드·팝오버 등 사각 요소의 모서리 둥글기를 제거한다.
   상태 점·스피너·아바타만 원형을 유지한다. */
* {
    border-radius: 0 !important;
}

.xab-boot-spinner,
.xab-invoice-btn-spinner,
.xs-spinner,
.cs-sms-overlay-spinner,
.cs-app-push-overlay-spinner,
.cs-work-kicker::before,
.iar-badge-dot,
.account-avatar,
.cstalk-assignee-icon,
.cstalk-room-svc,
.cstalk-room-svc-wrap,
.cstalk-room-avatar,
.cstalk-room-badge,
.cstalk-unread,
.cs-stats-hl-logo,
.loader::after {
    border-radius: 50% !important;
}


    :where(html[data-layout="mobile"]) .admin-chrome{ padding: 1.4rem 1.6rem 0; }
    :where(html[data-layout="mobile"]) .content{ padding: 1rem 1.6rem 3.2rem !important; }
    :where(html[data-layout="mobile"]) .admin-chrome-title, :where(html[data-layout="mobile"]) .page-head h1, :where(html[data-layout="mobile"]) .content-header h1{ font-size: 2rem !important; }
    :where(html[data-layout="mobile"]) .panel-body{ padding: 1.6rem !important; }
    :where(html[data-layout="mobile"]) .inq-toolbar, :where(html[data-layout="mobile"]) .cs-sms-toolbar, :where(html[data-layout="mobile"]) .work-toolbar, :where(html[data-layout="mobile"]) .board-search{ gap: 1rem; }