@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

/* =============================================================================
   SJDS — Shinjin Design System (settings + company management)
   Apple HIG 절제 기반. 토큰 출처: Documents/new-ui-ux-design-spec.md §2 (verbatim).
   배포: 전역(비격리) CSS 1개. 충돌 방지를 위해 .sjds-* / --sjds-* 네임스페이스 전용.
   (기존 .sj-* 는 이미 회사/고객 페이지에서 사용 중이므로 절대 재사용하지 않는다.)
   비주얼: primary = 단색 블루(#0071e3), 그라데이션 없음. 인스타 무드 = 여백·청결·정렬.
   ※ 다크 모드: 앱이 라이트 전용이라 자동 다크(prefers-color-scheme)는 의도적으로 보류.
     필요 시 .sjds-dark 옵트인 스코프로 후속 도입.
   ========================================================================== */

:root {
    /* 표면/배경 */
    --sjds-bg: #fbfbfd;
    --sjds-elev: #ffffff;
    --sjds-tint: #f4f4f6;
    --sjds-tint2: #ebebef;

    /* 텍스트 */
    --sjds-text: #1d1d1f;
    --sjds-text2: #62626a;
    --sjds-text3: #9b9ba3;

    /* 헤어라인 */
    --sjds-hair: rgba(0, 0, 0, 0.075);
    --sjds-hair2: rgba(0, 0, 0, 0.13);

    /* 강조색 — primary 단색 블루 */
    --sjds-blue: #0071e3;
    --sjds-blue-press: #0064c8;
    --sjds-blue-soft: #eaf4ff;
    --sjds-danger: #e5484d;
    --sjds-danger-soft: #fdecec;
    --sjds-success: #30b85a;
    --sjds-success-soft: #eafaf0;
    --sjds-warning: #d98324;
    --sjds-indigo: #5e5ce6;

    /* 반경 */
    --sjds-radius-lg: 20px;
    --sjds-radius: 16px;
    --sjds-radius-sm: 13px;
    --sjds-radius-xs: 10px;

    /* 그림자 (저투명 레이어드) */
    --sjds-shadow-sm: 0 1px 2px rgba(17, 17, 26, 0.04), 0 2px 6px rgba(17, 17, 26, 0.03);
    --sjds-shadow: 0 2px 6px rgba(17, 17, 26, 0.04), 0 10px 26px rgba(17, 17, 26, 0.05);
    --sjds-shadow-lg: 0 6px 18px rgba(17, 17, 26, 0.07), 0 24px 56px rgba(17, 17, 26, 0.12);

    /* 타입/모션 */
    --sjds-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --sjds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -- 페이지/스코프 베이스 -------------------------------------------------- */
/* 변환 페이지의 루트는 .sjds-page 를 단다. Pretendard·기본색이 자식으로 상속됨. */
.sjds-page,
.sjds-scope {
    font-family: var(--sjds-font);
    color: var(--sjds-text);
    letter-spacing: -0.011em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

.sjds-page {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 4px 16px 28px;
}

/* 보드 컨텐츠 안에서 임베드될 때는 페이지가 max-width/패딩을 갖지 않도록 */
.sjds-board-content .sjds-page {
    max-width: none;
    padding: 0;
}

/* 보드를 감싸는 호스트 페이지 래퍼(예: 본사 설정 페이지) */
.sjds-board-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 24px 28px;
    font-family: var(--sjds-font);
}

.sj-settings-wide-page {
    max-width: 1840px;
}

/* -- 헤더(머리말) ---------------------------------------------------------- */
/* eyebrow = 분류 라벨 · title = 탭 라벨 · desc = 한 줄 설명 */
.sjds-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-top: 18px;
    margin-bottom: 18px;
}

.sjds-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sjds-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sjds-text3);
}

.sjds-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sjds-text);
    line-height: 1.25;
}

.sjds-brand-clevi {
    color: #785AFA;
}

.sjds-desc {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--sjds-text2);
    line-height: 1.5;
}

/* 같은 줄에 붙이는 보조 설명(상단 여백 제거) */
.sjds-desc--flush {
    margin: 0;
}

/* 세로 스택 컨테이너(카드 목록 등) */
.sjds-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

/* 제목/설명 프리미티브를 한 줄(인라인) 라벨로 쓸 때 */
.sjds-inline-title {
    display: inline;
}

.sjds-inline-desc {
    display: inline;
    margin: 0;
}

/* 조건부 표시 토글 유틸 */
.sjds-hidden {
    display: none;
}

.sjds-block-gap {
    margin-top: 14px;
}

.sjds-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* 섹션 내 부제목 + 우측 액션을 한 줄에 배치(예: "○○ 범위" + ＋ 추가) */
.sjds-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.sjds-toolbar .sjds-section-title {
    margin: 0;
}

/* 폼 필드 라벨 */
.sjds-field-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sjds-text2);
}

/* -- 섹션 소제목(표 위) ---------------------------------------------------- */
.sjds-subhead {
    margin: 18px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sjds-text);
    letter-spacing: -0.006em;
}

/* -- 칩 묶음(셀 내 다중 태그) --------------------------------------------- */
.sjds-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* -- 검색바 ---------------------------------------------------------------- */
.sjds-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    max-width: 380px;
    transition: border-color 0.15s var(--sjds-ease), box-shadow 0.15s var(--sjds-ease);
}

.sjds-search:focus-within {
    border-color: var(--sjds-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjds-blue) 22%, transparent);
}

.sjds-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--sjds-text3);
    opacity: 0.85;
}

.sjds-search input,
.sjds-search-input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--sjds-text);
    padding: 0 !important;
}

.sjds-search input::placeholder,
.sjds-search-input::placeholder {
    color: var(--sjds-text3);
}

/* -- 버튼 ------------------------------------------------------------------ */
/* 생성 액션은 항상 "＋ 추가". 한 화면에 1개의 채워진 primary 버튼 원칙. */
.sjds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--sjds-radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s var(--sjds-ease), border-color 0.15s var(--sjds-ease),
        color 0.15s var(--sjds-ease), transform 0.1s var(--sjds-ease), box-shadow 0.15s var(--sjds-ease);
}

.sjds-btn:active {
    transform: scale(0.975);
}

.sjds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjds-blue) 35%, transparent);
}

.sjds-btn[disabled],
.sjds-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.sjds-btn .sjds-btn-ic {
    font-size: 1.05em;
    line-height: 1;
    margin-top: -1px;
}

.sjds-btn--primary {
    background: var(--sjds-blue);
    color: #fff;
}

.sjds-btn--primary:hover {
    background: var(--sjds-blue-press);
}

.sjds-btn--ghost {
    background: var(--sjds-tint);
    border-color: var(--sjds-hair);
    color: var(--sjds-text);
}

.sjds-btn--ghost:hover {
    background: var(--sjds-tint2);
}

.sjds-btn--danger {
    background: var(--sjds-elev);
    border-color: var(--sjds-hair2);
    color: var(--sjds-danger);
}

.sjds-btn--danger:hover {
    background: var(--sjds-danger-soft);
    border-color: color-mix(in srgb, var(--sjds-danger) 35%, transparent);
}

/* 작은 인라인 버튼(표 행 액션 등) */
.sjds-btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
    border-radius: var(--sjds-radius-xs);
}

/* 아이콘 전용 버튼(수정/삭제 등) */
.sjds-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-xs);
    background: var(--sjds-elev);
    color: var(--sjds-text2);
    cursor: pointer;
    transition: background 0.15s var(--sjds-ease), border-color 0.15s var(--sjds-ease),
        color 0.15s var(--sjds-ease), transform 0.1s var(--sjds-ease);
}

.sjds-icon-btn:hover {
    background: var(--sjds-blue-soft);
    border-color: color-mix(in srgb, var(--sjds-blue) 35%, transparent);
    color: var(--sjds-blue);
}

.sjds-icon-btn:active {
    transform: scale(0.94);
}

.sjds-icon-btn--danger {
    color: var(--sjds-danger);
}

.sjds-icon-btn--danger:hover {
    background: var(--sjds-danger-soft);
    border-color: color-mix(in srgb, var(--sjds-danger) 35%, transparent);
    color: var(--sjds-danger);
}

.sjds-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sjds-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* -- 세그먼트 토글(2지선다 모드 전환 등) ----------------------------------- */
.sjds-seg {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    background: var(--sjds-tint);
    min-width: 240px;
}

.sjds-seg-btn {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--sjds-radius-xs);
    background: transparent;
    color: var(--sjds-text2);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s var(--sjds-ease), color 0.15s var(--sjds-ease);
}

.sjds-seg-btn:hover:not(:disabled):not(.sjds-seg-btn--active) {
    color: var(--sjds-text);
}

.sjds-seg-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.sjds-seg-btn--active {
    background: var(--sjds-elev);
    color: var(--sjds-blue);
    box-shadow: var(--sjds-shadow-sm);
}

/* -- 기간 필터 버튼(주간·월간·분기·연간) — 단독 플랫 토글, 활성=단색 블루(견적 현황과 동일) -- */
.sjds-period-btn {
    border: 1px solid var(--sjds-hair2);
    background: var(--sjds-elev);
    color: var(--sjds-text2);
    border-radius: 8px;
    padding: 5px 13px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s var(--sjds-ease), border-color 0.15s var(--sjds-ease), color 0.15s var(--sjds-ease);
}

.sjds-period-btn:hover:not(.sjds-period-btn--active) {
    border-color: var(--sjds-text3);
    color: var(--sjds-text);
}

.sjds-period-btn--active {
    border-color: var(--sjds-blue);
    background: var(--sjds-blue);
    color: #fff;
}

/* -- 표 -------------------------------------------------------------------- */
.sjds-table-shell {
    width: 100%;
    margin-top: 14px;
    overflow-x: auto;
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius);
    box-shadow: var(--sjds-shadow-sm);
}

.sjds-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.sjds-table th,
.sjds-table td {
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--sjds-hair);
    vertical-align: middle;
    text-align: left; /* 기본 좌측 정렬 */
}

.sjds-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sjds-tint);
    color: var(--sjds-text3);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.004em;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
}

.sjds-table tbody td {
    color: var(--sjds-text);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.4;
    background: var(--sjds-elev);
}

.sjds-table tbody tr:last-child td {
    border-bottom: 0;
}

.sjds-table tbody tr:hover td {
    background: var(--sjds-tint);
}

/* 정렬 규칙: 텍스트=좌(기본) · 숫자/수치=우 · 상태/코드/액션=중앙 */
.sjds-table .sjds-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sjds-table .sjds-ctr {
    text-align: center;
}

.sjds-cell-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 정렬 가능한 헤더 */
.sjds-table th.sjds-sortable {
    cursor: pointer;
    user-select: none;
}

.sjds-table th.sjds-sortable:hover {
    color: var(--sjds-blue);
    background: var(--sjds-blue-soft);
}

.sjds-empty {
    height: 96px;
    text-align: center;
    color: var(--sjds-text3);
    font-weight: 500;
}

/* -- 상태 배지(pill) ------------------------------------------------------- */
.sjds-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
}

.sjds-pill--on {
    background: var(--sjds-success-soft);
    color: #1f8f44;
    border-color: color-mix(in srgb, var(--sjds-success) 30%, transparent);
}

.sjds-pill--off {
    background: var(--sjds-tint);
    color: var(--sjds-text2);
    border-color: var(--sjds-hair);
}

.sjds-pill--info {
    background: var(--sjds-blue-soft);
    color: var(--sjds-blue);
    border-color: color-mix(in srgb, var(--sjds-blue) 25%, transparent);
}

/* =============================================================================
   SJDS Tag — 텍스트 뒤 색상 배지의 단일 "고급 튠"(소프트 틴트 · 헤어라인 · 차분한 채도).
   여기 한 곳에서만 색/모양을 정의하고, 화면은 의미에 맞는 톤 클래스만 붙인다.
     기본 = 라운드렉트 · .sjds-tag--pill = 알약 · .sjds-tag--solid = 채움(강조)
     톤: neutral · blue · green · amber · red · indigo · violet
     선택: .sjds-tag-dot(앞 점) · .sjds-tag--lg(약간 큼)
   점진 적용: 기존 .xxx-badge / .dash-* 등을 .sjds-tag + 톤으로 교체.
   ========================================================================== */
.sjds-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.002em;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.sjds-tag--lg { height: 24px; padding: 0 10px; font-size: 0.78rem; }
.sjds-tag--pill { border-radius: 999px; padding: 0 10px; }
/* 내비 카운트 버블 — 고정 높이 해제(사이드바 정렬 안전), 알약 */
.sjds-tag--count { height: auto; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; line-height: 1.35; }

.sjds-tag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* 인스타 감성 톤 — 생동감 있는 액센트 + 소프트 틴트, 테두리 없는 모던 라벨 */
.sjds-tag--neutral { background: var(--sjds-tint);                                  color: var(--sjds-text2); }
.sjds-tag--blue    { background: color-mix(in srgb, #0095f6 14%, var(--sjds-elev)); color: #0a7fd0; }
.sjds-tag--green   { background: color-mix(in srgb, #20c373 15%, var(--sjds-elev)); color: #12a155; }
.sjds-tag--amber   { background: color-mix(in srgb, #fb8c3c 17%, var(--sjds-elev)); color: #cc6510; }
.sjds-tag--red     { background: color-mix(in srgb, #ed4956 13%, var(--sjds-elev)); color: #df2d3c; }
.sjds-tag--indigo  { background: color-mix(in srgb, #8b3dff 13%, var(--sjds-elev)); color: #7a2fe0; }
.sjds-tag--violet  { background: color-mix(in srgb, #e1306c 12%, var(--sjds-elev)); color: #d31e63; }

/* 채움(강조) — 긴급 D-day 등 */
.sjds-tag--solid { border-color: transparent; }
.sjds-tag--solid.sjds-tag--blue   { background: #0095f6; color: #fff; }
.sjds-tag--solid.sjds-tag--green  { background: #20c373; color: #fff; }
.sjds-tag--solid.sjds-tag--amber  { background: #fb8c3c; color: #fff; }
.sjds-tag--solid.sjds-tag--red    { background: #ed4956; color: #fff; }
.sjds-tag--solid.sjds-tag--indigo { background: #8b3dff; color: #fff; }

/* -- 카드 ------------------------------------------------------------------ */
.sjds-card {
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius);
    box-shadow: var(--sjds-shadow-sm);
    padding: 18px 20px;
}

/* 섹션 간 하단 여백 모디파이어(다음 블록과의 리듬을 헤더와 동일하게) */
.sjds-card--gap {
    margin-bottom: 18px;
}

/* 스크롤 가능한 카드/박스 모디파이어(긴 미리보기 등) */
.sjds-scroll {
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.6;
}

/* 코드/HTML 입력 영역(템플릿 본문 등) */
.sjds-code-area {
    min-height: 220px;
    resize: vertical;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 미리보기 내부 마크업(인라인 hex 대신 토큰) */
.sjds-preview-muted {
    color: var(--sjds-text3);
}

.sjds-preview-var {
    color: var(--sjds-blue);
    font-weight: 600;
}

/* -- 섹션 패널(폼/도구 그룹 컨테이너) ------------------------------------- */
.sjds-panel {
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius);
    padding: 18px 20px;
}

.sjds-section-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sjds-text);
}

/* 강조 결과 패널(블루 소프트 배경 + 토큰 보더) — 일회성 인라인 카드 변형 대체 */
.sjds-panel--accent {
    background: var(--sjds-blue-soft);
    border-color: color-mix(in srgb, var(--sjds-blue) 25%, transparent);
}

/* 강조 수치(결과 헤드라인) — 인라인 font-size/weight 대신 타입 토큰 */
.sjds-metric {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

/* 보조 지표 값(미리보기 메트릭) */
.sjds-metric-val {
    font-weight: 600;
}

/* 패널 첫 자식 툴바는 위 여백 제거 */
.sjds-panel > .sjds-toolbar:first-child {
    margin-top: 0;
    margin-bottom: 10px;
}

/* 카드 첫 자식 툴바도 위 여백 제거 */
.sjds-card > .sjds-toolbar:first-child {
    margin-top: 0;
}

/* 강조색 텍스트(인라인 hex 대신) */
.sjds-accent {
    color: var(--sjds-blue);
}

/* 패널 내 인라인 상태(로딩/빈/안내) */
.sjds-state {
    padding: 24px;
    text-align: center;
    color: var(--sjds-text3);
    font-size: 0.875rem;
}

/* 2분할 마스터-디테일 레이아웃 */
.sjds-split {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    align-items: flex-start;
}

.sjds-split-side {
    flex: 1;
    min-width: 300px;
}

.sjds-split-main {
    flex: 2;
    min-width: 0;
}

@media (max-width: 860px) {
    .sjds-split {
        flex-direction: column;
    }

    .sjds-split-side,
    .sjds-split-main {
        width: 100%;
        min-width: 0;
    }
}

/* 클릭 가능한 리스트(소분류 등 마스터 목록) */
.sjds-list {
    display: flex;
    flex-direction: column;
}

.sjds-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--sjds-hair);
    cursor: pointer;
    transition: background 0.15s var(--sjds-ease);
}

.sjds-list-item:last-child {
    border-bottom: 0;
}

.sjds-list-item:hover {
    background: var(--sjds-tint);
}

.sjds-list-item.active {
    background: var(--sjds-blue-soft);
}

.sjds-list-code {
    font-weight: 600;
    color: var(--sjds-blue);
    margin-right: 8px;
}

.sjds-list-meta {
    color: var(--sjds-text3);
    font-size: 0.85em;
    margin-left: 4px;
}

/* -- 폼 행 · 네이티브 select · 도움말 ------------------------------------- */
.sjds-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sjds-form-row .sjds-field-label {
    margin: 0;
    min-width: 72px;
}

/* 카드 내부에 세로로 쌓는 폼 행: 위는 리듬 간격, 아래 여백은 제거(마지막 행 정렬) */
.sjds-form-row--stack {
    margin-top: 12px;
    margin-bottom: 0;
}

/* 체크박스 + 라벨 텍스트를 한 줄로 묶는 라벨 래퍼 */
.sjds-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* SJDS 체크박스(블루 액센트, 일관 크기) */
.sjds-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--sjds-blue);
    cursor: pointer;
}

.sjds-select-native {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    background: var(--sjds-elev);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--sjds-text);
    cursor: pointer;
}

.sjds-select-native:focus {
    outline: none;
    border-color: var(--sjds-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjds-blue) 18%, transparent);
}

.sjds-help {
    font-size: 0.8rem;
    color: var(--sjds-text2);
    margin-bottom: 8px;
    line-height: 1.5;
}

.sjds-help--warn {
    color: var(--sjds-danger);
    font-weight: 600;
}

/* -- 후보↔선택 이동(transfer) 위젯 · 결재 차수 등 -------------------------- */
.sjds-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.sjds-transfer-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sjds-transfer-panel {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius);
    overflow: hidden;
}

.sjds-transfer-head {
    padding: 9px 14px;
    border-bottom: 1px solid var(--sjds-hair);
    background: var(--sjds-tint);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sjds-text2);
}

.sjds-transfer-body {
    flex: 1;
    overflow: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
}

.sjds-transfer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--sjds-radius-xs);
}

.sjds-transfer-row:hover {
    background: var(--sjds-tint);
}

.sjds-transfer-row.disabled {
    opacity: 0.5;
}

.sjds-transfer-name {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--sjds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sjds-transfer-pos {
    font-size: 0.78rem;
    color: var(--sjds-text3);
    margin-left: 6px;
}

.sjds-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--sjds-blue);
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* 다이얼로그/폼 푸터(우측 정렬 액션) */
.sjds-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* 좌측 정렬 푸터(추가 버튼 등) */
.sjds-foot--start {
    justify-content: flex-start;
}

/* -- 페이저 ---------------------------------------------------------------- */
.sjds-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.sjds-pager-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--sjds-radius-xs);
    border: 1px solid var(--sjds-hair2);
    background: var(--sjds-elev);
    color: var(--sjds-text);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s var(--sjds-ease);
}

.sjds-pager-btn:hover:not(:disabled) {
    background: var(--sjds-tint);
}

.sjds-pager-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.sjds-pager-info {
    font-size: 0.8125rem;
    color: var(--sjds-text2);
    font-variant-numeric: tabular-nums;
}

/* -- 상태 패널(로딩/권한 없음/빈 화면) ------------------------------------ */
.sjds-pane {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.sjds-need-company {
    text-align: center;
    color: var(--sjds-text3);
    font-size: 0.9rem;
}

/* -- 드롭다운(검색형 셀렉트) ---------------------------------------------- */
.sjds-select {
    position: relative;
    width: 100%;
}

.sjds-select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    font-size: 0.875rem;
    color: var(--sjds-text);
    cursor: pointer;
    transition: border-color 0.15s var(--sjds-ease);
}

.sjds-select-display:hover {
    border-color: color-mix(in srgb, var(--sjds-blue) 45%, transparent);
}

.sjds-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sjds-select-arrow {
    color: var(--sjds-text3);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.sjds-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    box-shadow: var(--sjds-shadow);
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sjds-select-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sjds-hair);
}

.sjds-select-search input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-xs);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}

.sjds-select-search input:focus {
    border-color: var(--sjds-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjds-blue) 18%, transparent);
}

.sjds-select-list {
    overflow-y: auto;
    flex: 1;
}

.sjds-select-item {
    padding: 9px 14px;
    font-size: 0.85rem;
    color: var(--sjds-text);
    cursor: pointer;
}

.sjds-select-item:hover {
    background: var(--sjds-tint);
}

.sjds-select-item.selected {
    background: var(--sjds-blue-soft);
    color: var(--sjds-blue);
    font-weight: 600;
}

.sjds-select-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--sjds-text3);
}

/* =============================================================================
   2단 세로탭 보드(.sjds-board) — 탑바 설정 + 회사 관리 공용 셸.
   기존 .cs-root/.cs-col/.cs-tab 를 대체. 활성탭 = 옅은 tint + 블루 텍스트(그라데이션 없음).
   ========================================================================== */
.sjds-board {
    display: flex;
    min-height: calc(100vh - 170px);
    background: var(--sjds-elev);
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius);
    overflow: hidden;
    box-shadow: var(--sjds-shadow-sm);
    font-family: var(--sjds-font);
    color: var(--sjds-text);
}

.sjds-board-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 10px;
    flex-shrink: 0;
}

.sjds-board-col1 {
    width: 200px;
    background: var(--sjds-bg);
    border-right: 1px solid var(--sjds-hair);
}

.sjds-board-col2 {
    width: 224px;
    background: var(--sjds-elev);
    border-right: 1px solid var(--sjds-hair);
}

.sjds-tab {
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--sjds-radius-xs);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sjds-text2);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s var(--sjds-ease), color 0.15s var(--sjds-ease);
}

.sjds-tab:hover {
    background: var(--sjds-tint);
    color: var(--sjds-text);
}

.sjds-tab1 {
    font-weight: 600;
}

.sjds-tab1.active {
    background: var(--sjds-tint2);
    color: var(--sjds-text);
}

/* 2열 항목: 라벨 + 보조 설명(아래) */
.sjds-tab2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sjds-tab-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.sjds-tab-sub {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--sjds-text3);
    line-height: 1.25;
}

.sjds-tab2.active {
    background: var(--sjds-blue-soft);
}

.sjds-tab2.active .sjds-tab-label {
    color: var(--sjds-blue);
    font-weight: 600;
}

.sjds-tab2.active .sjds-tab-sub {
    color: color-mix(in srgb, var(--sjds-blue) 70%, var(--sjds-text2));
}

.sjds-board-content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 20px 22px;
}

.sjds-board-fill {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sjds-board-placeholder {
    text-align: center;
}

.sjds-board-placeholder-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sjds-text);
    margin-bottom: 6px;
}

.sjds-board-placeholder-sub {
    font-size: 0.875rem;
    color: var(--sjds-text3);
}

/* -- 인라인 편집 입력(표 셀 내 텍스트 입력 등) ---------------------------- */
.sjds-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    background: var(--sjds-elev);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--sjds-text);
    transition: border-color 0.15s var(--sjds-ease), box-shadow 0.15s var(--sjds-ease);
}

.sjds-input::placeholder {
    color: var(--sjds-text3);
}

.sjds-input:focus {
    outline: none;
    border-color: var(--sjds-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjds-blue) 18%, transparent);
}

.sjds-input:disabled {
    background: var(--sjds-tint);
    color: var(--sjds-text2);
    cursor: not-allowed;
}

/* 체크박스 + 라벨 인라인 묶음 */
.sjds-checkline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--sjds-text2);
    white-space: nowrap;
    cursor: pointer;
}

.sjds-checkline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sjds-blue);
    cursor: pointer;
}

/* -- 반응형 ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .sjds-header {
        padding-top: 14px;
    }

    .sjds-title {
        font-size: 1.15rem;
    }

    .sjds-search {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .sjds-board {
        flex-direction: column;
        min-height: 0;
    }

    .sjds-board-col1,
    .sjds-board-col2 {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--sjds-hair);
    }
}

/* -- 필터 인라인 필드 그룹(라벨+컨트롤 한 줄, 검색바+버튼 등) --------------- */
.sjds-field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sjds-field-inline .sjds-field-label {
    margin: 0;
    white-space: nowrap;
}

/* 보조 텍스트(총 N건 등) */
.sjds-text2 {
    font-size: 0.84rem;
    color: var(--sjds-text2);
}

.sjds-text2 strong {
    color: var(--sjds-text);
    font-weight: 700;
}

/* -- 범례(표 위 색상 의미 안내) ------------------------------------------- */
.sjds-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 2px 8px;
    font-size: 0.78rem;
    color: var(--sjds-text2);
}

.sjds-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--sjds-hair2);
    flex: 0 0 auto;
}

.sjds-legend-swatch--success {
    background: var(--sjds-success-soft);
    border-color: color-mix(in srgb, var(--sjds-success) 30%, transparent);
}

/* -- 행 강조(개별 정책 적용 등). 셀 배경에 적용 ------------------------------ */
.sjds-table tbody tr.sjds-row--success td {
    background: var(--sjds-success-soft);
}

.sjds-table tbody tr.sjds-row--success:hover td {
    background: color-mix(in srgb, var(--sjds-success-soft) 70%, var(--sjds-tint));
}

/* -- 모션 저감 ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sjds-btn,
    .sjds-icon-btn,
    .sjds-tab,
    .sjds-search,
    .sjds-select-display {
        transition-duration: 0.01ms;
    }

    .sjds-btn:active,
    .sjds-icon-btn:active {
        transform: none;
    }
}

/* -- 할인 정책 종합 현황(DiscountPolicyOverview) 전용 프리미티브 ------------- */
/* 경고(주황) pill 변형 — 고객 단계 배지 등 */
.sjds-pill--warn {
    background: color-mix(in srgb, var(--sjds-warning) 14%, transparent);
    color: var(--sjds-warning);
    border-color: color-mix(in srgb, var(--sjds-warning) 30%, transparent);
}

/* KPI/헤드라인 메트릭 보조 */
.sjds-metric-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sjds-text3);
}

.sjds-metric--green {
    color: var(--sjds-success);
}

.sjds-headline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0;
}

/* 할인율 분포 막대 차트 */
.sjds-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.sjds-bar-label {
    width: 80px;
    text-align: right;
    font-size: 0.82rem;
    color: var(--sjds-text2);
}

.sjds-bar-track {
    flex: 1;
    height: 20px;
    background: var(--sjds-tint);
    border-radius: var(--sjds-radius-xs);
}

.sjds-bar-fill {
    height: 100%;
    border-radius: var(--sjds-radius-xs);
    background: var(--sjds-blue);
}

.sjds-bar-count {
    width: 48px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sjds-text);
}

/* 매트릭스 셀 */
.sjds-matrix-empty {
    color: var(--sjds-text3);
}

.sjds-matrix-details {
    font-size: 0.78rem;
    color: var(--sjds-text2);
}

.sjds-matrix-details > summary {
    cursor: pointer;
    font-weight: 600;
}

.sjds-matrix-mat {
    margin-top: 3px;
    text-align: left;
}

/* 정책 관리 — 그룹/회사 접이식 패널 */
.sjds-mgroup {
    padding: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.sjds-mgroup-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--sjds-tint);
}

.sjds-mcaret {
    color: var(--sjds-text3);
    font-size: 0.78rem;
}

.sjds-mcompany {
    padding: 0;
    margin: 8px 10px;
}

.sjds-mcompany > .sjds-mgroup-head {
    background: transparent;
}

.sjds-mbody {
    padding: 2px 14px 12px 30px;
}

.sjds-mrule {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sjds-hair);
    border-radius: var(--sjds-radius-sm);
    padding: 8px 10px;
    margin-bottom: 5px;
    font-size: 0.82rem;
    background: var(--sjds-elev);
}

.sjds-mrule--conflict {
    border-color: color-mix(in srgb, var(--sjds-danger) 60%, transparent);
    background: var(--sjds-danger-soft);
}

.sjds-mrule-text {
    flex: 1;
    min-width: 0;
    color: var(--sjds-text);
}

/* 정책 관리 행 우측 '상세 조건'(크기·수량 등) 칩 — 중립 틴트, 길면 말줄임 + title 풀텍스트 */
.sjds-mrule-cond {
    flex-shrink: 0;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sjds-text2);
    background: var(--sjds-tint);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 600;
}

.sjds-mhist-info {
    flex: 1;
    min-width: 0;
}

.sjds-mhist-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- 통합 할인 정책 마법사(DiscountPolicyEditor) 전용 프리미티브 ------------- */
/* 선택형 카드(대상 3종 · 개인할인 처리 2종). 하드코딩 hex/px 대신 토큰. */
.sjds-choice {
    flex: 1;
    min-width: 160px;
    cursor: pointer;
    text-align: center;
    padding: 16px;
    border: 1px solid var(--sjds-hair2);
    border-radius: var(--sjds-radius-sm);
    background: var(--sjds-elev);
    transition: border-color 0.15s var(--sjds-ease), background 0.15s var(--sjds-ease);
}

.sjds-choice:hover {
    border-color: color-mix(in srgb, var(--sjds-blue) 45%, transparent);
}

.sjds-choice--on {
    border-color: var(--sjds-blue);
    border-width: 2px;
    padding: 15px; /* 보더 +1px 보정으로 레이아웃 흔들림 방지 */
    background: var(--sjds-blue-soft);
}

/* 카드 제목/보조 텍스트(인라인 font-weight/size 대신) */
.sjds-choice-title {
    font-weight: 700;
    margin-top: 4px;
}

.sjds-choice-sub {
    font-size: 0.8125rem;
    color: var(--sjds-text3);
}

/* 단계 제목(17px/700 인라인 → 타입 토큰) */
.sjds-step-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 원형 배지(이모지 대체). 색은 시맨틱 변형 클래스로만 — per-call hex 금지. */
.sjds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.75rem;
    flex: none;
}

.sjds-badge--lg {
    width: 46px;
    height: 46px;
    font-size: 0.875rem;
}

.sjds-badge--sm {
    width: 26px;
    height: 26px;
}

.sjds-badge--blue {
    background: var(--sjds-blue-soft);
    color: var(--sjds-blue-press);
}

.sjds-badge--sky {
    background: color-mix(in srgb, var(--sjds-blue) 12%, var(--sjds-elev));
    color: var(--sjds-blue-press);
}

.sjds-badge--green {
    background: var(--sjds-success-soft);
    color: #1f8f44;
}

/* 확정 체크(채워진 success) */
.sjds-badge--check {
    background: var(--sjds-success);
    color: #fff;
}

/* 코드(거래처코드 등) 모노스페이스 셀 — 인라인 font-family 대신 */
.sjds-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* 인라인 미니 셀렉트(가상 주문 재질/제품 등) — sjds-select 폭/패딩 인라인 오버라이드 대체 */
.sjds-select--inline {
    width: auto;
}

.sjds-select--inline .sjds-select-display {
    display: inline-flex;
    min-height: 32px;
    padding: 0 10px;
    width: auto;
}

/* Mobile list filters: keep the primary search visible and reveal advanced controls on demand. */
.sj-mobile-filter-toggle {
    display: none;
}

@media (max-width: 768px) {
    .sj-mobile-filter-toggle {
        flex: 0 0 auto;
        min-width: 58px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 9px;
        background: #fff;
        color: #475569;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
    }

    .sj-mobile-filter-toggle.active {
        border-color: #93c5fd;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .sj-mobile-filter-advanced {
        display: none !important;
    }

    .sj-mobile-filter-advanced.is-open {
        display: flex !important;
    }

    .sj-mobile-filter-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58px;
        align-items: center;
        gap: 6px !important;
    }

    .sj-mobile-filter-search {
        width: 100%;
        min-width: 0 !important;
    }

    .sj-mobile-filter-search input {
        min-width: 0 !important;
    }

    .sj-mobile-filter-full {
        grid-column: 1 / -1;
        width: 100%;
    }
}