/* ============================================================
   component.css — 컴포넌트/모달/패널 전용 스타일 (style.css에서 분리)
   ============================================================ */

/* air-datepicker 팝업: body 에 append 되므로 모달(z-index ~2000) 위로 오도록 상향 (overflow 클리핑 회피) */
.air-datepicker { z-index: 9999 !important; }

/* 오류/실패사유 모달 (Figma 4905-19921) */
.err-msg-modal { max-width: 650px; }
.err-msg-modal .modal-content { border-radius: 10px; overflow: hidden; border: none; }
/* 다른 모달(z-index 1055) 위에 stacked 로 뜰 때 backdrop 이 아래 모달 위로 깔려 어두워지도록 상향 */
.err-msg-backdrop { z-index: 3000 !important; }

/* 모달 backdrop: Figma 지정색 #11182766 = rgba(17,24,39,0.4) (neutral-900 40%) + 블러 */
.modal-backdrop.show {
    opacity: 1 !important;
    background-color: rgba(17, 24, 39, 0.4) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* ── 채널 패널 / 템플릿 모달 (ch-vendor-panel · template-modal · tmpt-) ── */
.ch-vendor-panel--dimmed {
    /* blur 제거: blur가 패널 가장자리를 반투명하게 번지게 해 두 패널 이음새로 뒤 배경이 비쳤음.
       밝기만 낮춰 딤 처리(가장자리 선명 → 이음새 비침 없음) */
    filter: brightness(0.8);
    pointer-events: none;
    user-select: none;
}


/* ── 채널상품등록 오른쪽 패널 ── */
.ch-vendor-panel {
    display: flex;
    flex-direction: column;
    width: 370px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e5e7eb; /* 좌측 경계선 — 전 패널 공통 */
    font-size: 13px;
}
/* .ch-vendor-panel__header 제거 — 전역 .csp-head 공통 헤더로 통일 */
.ch-vendor-panel__section-title {
    padding: 6px 20px 10px 0;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0;
}
.ch-vendor-panel__list {
    flex: 1;
    padding: 12px 16px;
    min-height: 0;
}
.ch-vendor-panel__list-box {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow-y: auto;
}
.ch-vendor-panel--oa01 .ch-vendor-panel__list-box {
    max-height: 440px;
}
.ch-vendor-panel--oa02 .ch-vendor-panel__list-box {
    max-height: 680px;
}
.ch-vendor-panel--oa03 .ch-vendor-panel__list-box {
    max-height: 530px;
}
.ch-vendor-panel__category {
    border-top: 1px solid #e2e8f0;
}
.ch-vendor-panel__footer {
    border-top: 1px solid #e2e8f0;
    padding: 18px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ch-vendor-panel__summary {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.ch-vendor-panel__summary-box {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.ch-vendor-panel__summary-box hr {
    border-color: #e2e8f0;
    margin: 8px 0;
    opacity: 1;
}

.template-modal .modal-dialog{
    width:1710px;
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 60px);
}
.template-modal .modal-dialog .modal-content{
    border-radius:12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    max-height: calc(100dvh - 60px);
    overflow: hidden;
}
.template-modal .modal-dialog .goods-form-simplebar {
    height: calc(100dvh - 260px);
}
.template-modal .template{
    display:flex;
}
.template-modal .template .tmpt-content{
    width: 1222px;
    flex: 0 0 auto;
    padding: 20px 0 0;
    border-radius:10px;
    background-color:#fff;
    display:flex;
    flex-direction:column;
    height: calc(100dvh - 60px);
    overflow: hidden;
}
.template-modal .template .tmpt-set{
    width: 488px;
    flex: 0 0 auto;
    padding: 0;
    border-radius:0 10px 10px 0;
    background-color:#fff;
    display:flex;
    flex-direction:column;
    border-left: 1px solid #e5e7eb;
    height: calc(100dvh - 60px);
    overflow: hidden;
}
.template-modal .template .tmpt-content .tmpl-body,
.template-modal .template .tmpt-set .tmpl-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.template-modal .template .tmpl-header{
    color: #7f7f7f;
    padding-top: 0 !important;
}
/* 좌측 패널: 헤더(제목20 + 채널select), 하단 full-width 구분선 */
.template-modal .tmpt-content > .tmpl-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 0 30px 20px;
}
.template-modal .tmpt-content > .tmpl-header h1.tmpl-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
/* 채널 select 행: 제목과 20 간격, 라벨/트리거 16, 트리거 h50 */
.template-modal .tmpt-content .tmpl-ch-select {
    margin-top: 10px;
    gap: 20px !important; /* 채널* 라벨 ↔ select 간격 */
}
.template-modal .tmpt-content .tmpl-ch-label {
    font-size: 16px;
}
.template-modal .tmpt-content .tmpl-ch-select .csel-trigger {
    height: 50px;
    font-size: 16px;
}
/* 좌측 패널: 탭 아래 구분선 */
.template-modal .tmpt-content .tab-items-simplebar {
    /*border-bottom: 1px solid #e5e7eb;*/
}
.template-modal .template .tmpl-title,
.template-modal .template .tmpl-attr-title{
    margin-bottom:0;
    color: #334155;
}
.template-modal .template h1.tmpl-title{
    font-size: 18px;
    font-weight: 700;
}
.template-modal .template div.tmpl-attr-title{
    font-size: 14px;
    font-weight: 600;
}

.template-modal .template .check-switch{
    width:65px;
}

.template-modal .template .check-switch input[switch]+label{
    width:65px;
}

.template-modal .template .check-switch input[switch]+label:before{
    right:3px;
}

.template-modal .template .check-switch input[switch]:checked+label:before{
    right:auto;
}

.template-modal .template .check-switch input[switch]:checked+label:after{
    left:43px;
}

.template-modal .form-items .form-item.item-title {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb; /* neutral 50 */
    color: #6b7280; /* neutral 500 */
    border-radius: 0;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    /* 탭 하단 구분선(.tab-items-simplebar)과 이중선으로 겹쳐 보여 제거 — 헤더는 배경색으로 구분 */
}
.template-modal .form-items .form-item.item-title .form-item-input {
    color: #64748b;
    padding-left: 0;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.template-modal .form-items .form-item.item-title .form-item-check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.template-modal .form-items .form-item.item-title .w-180p {
    display: flex;
    align-items: center;
    justify-content: center;
}
.template-modal .form-items .form-item:not(.item-title) {
    border-radius: 8px;
    padding: 6px 4px;
    transition: background-color 0.12s ease;
}
.template-modal .tmpt-content .form-items .form-item:not(.item-title):hover {
    background-color: var(--oligo-primary-soft);
}
.template-modal .form-items .form-item:not(.item-title) + .form-item:not(.item-title) {
    border-bottom: 1px solid #e5e7eb;
}
/* display_type: 'vertical' — 라벨을 위, 입력을 아래로(세로). 미지정/horizon 은 기존 수평.
   form-item 이 Bootstrap 유틸(align-items-center 등)을 인라인으로 쓰므로 !important 로 오버라이드.
   flex-wrap 로 입력영역만 다음 줄 전체폭으로 내림(체크박스+라벨은 윗줄 유지). */
.form-item--vertical {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}
.form-item--vertical > .form-item-input {
    flex: 0 0 100% !important;
    margin-top: 4px;
}
/* 세로 배치에서 라벨을 한 줄 전체로 편다(상품상세 라벨 폭 160 !important 고정을 이 칸만 푼다).
   예: 토스 고시 항목명처럼 긴 라벨이 160px 안에서 여러 줄로 꺾이지 않게. */
.goods-detail .form-items .form-item.form-item--vertical > .col-form-label.label-full {
    flex: 0 0 100%;
    min-width: 0 !important;
    max-width: none !important;
}

.template-modal .form-item-check{
    width:60px;
    text-align:center;
}
.template-modal .form-item-check .form-check-input {
    accent-color: var(--oligo-primary);
}

.template-modal .form-item-check.col-form-label{
    min-width:60px;
    max-width:60px;
}

/* 라벨류 = 13 (스케일: 라벨/보조), 입력값은 14 → 위계 */
.template-modal .form-items .form-item .col-form-label { font-size: 13px; }
.template-modal .form-check-label { font-size: 13px; }

.template-modal .tmpl-body.goods-detail{
    background-color:transparent;
    padding: 0;
    margin: 0; /* 공용 .goods-detail의 margin-bottom:20px 제거(하단 흰 여백 없앰) */
}
/* 템플릿 모달 전용: 공용 .goods-detail .form-items의 좌측 들여쓰기(padding-left:12px) 제거
   → 좌측 폼이 패널 왼쪽에 딱 붙도록(왼쪽 뜸 해결) */
.template-modal .tmpl-body.goods-detail .form-items{
    padding-left: 0;
}

/* off(미적용) 섹션: 입력요소만 차단, 스크롤/보기는 허용 */
.template-modal .goods-detail.section-off input,
.template-modal .goods-detail.section-off select,
.template-modal .goods-detail.section-off textarea,
.template-modal .goods-detail.section-off button,
.template-modal .goods-detail.section-off .form-check-input {
    pointer-events: none;
}

.template-modal .goods-detail .form-item textarea.form-control{
    /* 템플릿 모달에선 100% 유지 (goods-detail 1000px !important 를 특이도+!important로 되돌림) */
    width:100% !important;
    min-width:0;
    max-width:100% !important;
}

.template-modal .goods-detail .form-item .form-select.max, .template-modal .goods-detail .form-item .form-control.max{
    width:100%;
    min-width:0;
}
.template-modal .goods-detail .form-item .csel.max, .template-modal .goods-detail .form-item .csel:not(.max):not(.category){
    width:100%;
    min-width:0;
}

/* 좌측 콘텐츠 래퍼(.tmpl-body.goods-detail): 탭 / (수정된정보+표) / 푸터를 세로 분할하는 flex 컬럼.
   이게 없어서 안쪽 content-body flex가 안 먹고 footer가 떠 있었음 */
.template-modal .tmpt-content > .tmpl-body {
    display: flex;
    flex-direction: column;
}
/* 좌측 본문(=Figma '표' 4529:30864: 수정된정보 44 + 테이블 = 하나의 박스, 최소 571).
   modif-summary + template-attr-simplebar를 모두 품는 박스. 남은 공간 채우되 최소 571 보장.
   min-height:0 체인이 있어야 SimpleBar가 실제로 늘어나서 footer가 바닥에 고정됨 */
.template-modal .tmpt-content .tmpl-content-body {
    flex: 1 1 auto;
    min-height: 571px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.template-modal  .template-attr-simplebar{
    flex: 1 1 0;
    min-height: 0;
}
/* 채널 미선택(신규) 빈 상태도 본문을 채움 */
.template-modal .tmpt-content .tmpl-empty {
    flex: 1 1 0;
    min-height: 0;
}
/* 좌측 하단 footer + 속성저장 버튼 (Figma 4529-30917/30918): px30 py20 + 상단 구분선, 높이 84 고정 */
.template-modal .tmpt-content .tmpl-content-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 84px;
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}
.template-modal .tmpl-attr-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #6a61f5; /* primary */
    border-radius: 8px;
    color: #6a61f5;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.template-modal .tmpl-attr-save-btn:hover:not(:disabled) {
    background: #f6f5ff;
}
.template-modal .tmpl-attr-save-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* ── 좌측 상세 표(template-attr-simplebar): 체크박스44 / 속성250 / 행높이40 / 라운드 제거 ── */
/* 체크박스 칸 44 (헤더·데이터행 공통) */
.template-modal .template-attr-simplebar .form-items .form-item .form-item-check,
.template-modal .template-attr-simplebar .form-items .form-item .form-item-check.col-form-label {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
}
/* 속성(라벨) 칸 250 */
.template-modal .template-attr-simplebar .form-items .form-item .w-180p,
.template-modal .template-attr-simplebar .form-items .form-item .w-180p.col-form-label {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}
/* 행 높이 최소 60(고정 아님) + 모서리 라운드 제거 (행 패딩 제거 → 셀 패딩으로 통일) + 셀 수직중앙정렬.
   description 등 내용이 많은 행은 눌리지 않고 늘어나도록 min-height 사용
   ( > 직계행만 대상: 중첩 sub-item은 제외 ) */
.template-modal .template-attr-simplebar .form-items > .form-item {
    min-height: 60px;
    box-sizing: border-box;
    border-radius: 0 !important;
    padding: 0 !important;
    align-items: center;
}
/* 헤더 행은 40 유지 (Figma) */
.template-modal .template-attr-simplebar .form-items > .form-item.item-title {
    height: 40px;
}
/* 모든 데이터 행에 하단 구분선 (첫 행·섹션 경계에서도 누락 없이 — +sibling 방식 대체) */
.template-modal .template-attr-simplebar .form-items > .form-item:not(.item-title) {
    border-bottom: 1px solid #e5e7eb;
}
/* 셀 내부 패딩: 좌우 10 / 위아래 8 (border-box) — 60행에 40입력+패딩 여유 */
.template-modal .template-attr-simplebar .form-items .form-item > .form-item-check,
.template-modal .template-attr-simplebar .form-items .form-item > .w-180p,
.template-modal .template-attr-simplebar .form-items .form-item > .form-item-input {
    box-sizing: border-box;
    padding: 8px 10px;
}
/* 값 셀: 줄바꿈 허용 → description(flex:100%)이 입력 아래로 내려감(입력이 찌그러지지 않게).
   OA04는 JSX에 flex-wrap이 있지만, OA05(TemplateAttrForm)엔 없어서 CSS로 공통 보장 */
.template-modal .template-attr-simplebar .form-item-input {
    flex-wrap: wrap;
}
/* description(supporting text) — Figma 4529-31607: 입력 아래 자기 줄, 12/neutral500, 자간 -0.6, 앞 마커 없음 */
.template-modal .template-attr-simplebar .form-item-input > .col-auto,
.template-modal .template-attr-simplebar .form-item-input > .w-100 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 4px 0 0 !important; /* 위 여백만(ms-2 등 덮음) */
    padding: 0 0 0 10px; /* 좌측 들여쓰기만, 상하 패딩 없음(아래 여백 제거) */
    border-left: 0 !important; /* 앞 border 마커 제거(인라인 style 덮음) */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: #6b7280; /* neutral 500 */
    white-space: normal !important; /* text-nowrap 무력화 → 아래에서 줄바꿈 */
    text-align: left;
}
/* (6) '상세설명참조 일괄적용' 버튼 145×40, 폰트 14 / neutral500 (OA04·OA05 공통)
   .func-reset-btn(function 필드 '초기화')은 제외 → 상품상세와 동일하게 btn-sm 크기 유지 */
.template-modal .template-attr-simplebar .form-item-input .btn.btn-outline-secondary:not(.func-reset-btn) {
    flex: 0 0 auto;
    width: 145px;
    height: 40px;
    margin: 0 0 0 10px !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6b7280; /* neutral 500 */
    border-color: #d1d5db;
    background: #fff;
    white-space: nowrap;
}
.template-modal .template-attr-simplebar .form-item-input .btn.btn-outline-secondary:not(.func-reset-btn):hover {
    background: #f9fafb;
    color: #6b7280;
    border-color: #d1d5db;
}
/* 입력/셀렉트 450 × 40 고정 (textarea·max 제외) */
.template-modal .template-attr-simplebar .form-item-input .form-control:not(textarea):not(.max),
.template-modal .template-attr-simplebar .form-item-input .form-select:not(.max) {
    width: 450px !important;
    min-width: 0;
    height: 40px !important;
}
.template-modal .template-attr-simplebar .form-item-input .csel:not(.max):not(.category) {
    width: 450px !important;
}
/* 수량별 배송비 티어(qty_tier): 위 450px 강제를 무력화하고 셀별 콤팩트 폭 적용 */
.template-modal .template-attr-simplebar .form-item-input.qty-tier .form-control:not(.max) {
    width: auto !important;
    min-width: 0;
}
.template-modal .template-attr-simplebar .form-item-input.qty-tier .form-control.tier-lower {
    width: 100px !important;
    flex: 0 0 100px;
}
.template-modal .template-attr-simplebar .form-item-input.qty-tier .form-control.w-100p {
    width: 100px !important;
}
.template-modal .template-attr-simplebar .form-item-input.qty-tier .form-control.w-150p {
    width: 130px !important;
}
/* 날짜(calendar): 조회조건과 동일한 커스텀 룩 (아이콘 좌측 + pill) — 폭 210 · 높이 40 */
.template-modal .template-attr-simplebar .form-item-input .calendar {
    height: 40px;
}
.template-modal .template-attr-simplebar .form-item-input .calendar .calendar-icon {
    left: 10px;
    right: auto;
    width: 14px;
    height: 14px;
    color: #9ca3af;
}
.template-modal .template-attr-simplebar .form-item-input .calendar .form-control:not(.max) {
    width: 210px !important;
    height: 40px !important;
    line-height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
    padding: 0 10px 0 30px;
    color: #6b7280;
    font-size: 14px;
}
.template-modal .template-attr-simplebar .form-item-input .csel-trigger {
    height: 40px !important;
    min-height: 40px !important;
}

.template-modal .template-simplebar{
    height: calc(100dvh - 400px);
    min-height: 160px;
    margin-right:-5px;
}
/* 좌측 폼 스크롤바: 우측 속성표(.template-simplebar)와 동일 룩 (회색 라운드 슬라이더, 상시 노출) */
.template-modal .template-attr-simplebar .simplebar-track.simplebar-vertical {
    width: 10px;
    right: 1px;
    background: transparent;
}
.template-modal .template-attr-simplebar .simplebar-scrollbar::before {
    left: 2px;
    right: 2px;
    background: #d1d5db;
    border-radius: 10px;
    opacity: 1;
}

.template-modal .tab-items-simplebar .simplebar-track.simplebar-vertical {
    display: none;
}
.template-modal .tab-items-simplebar .simplebar-content-wrapper:focus {
    outline: none;
}
.template-modal .tab-items-simplebar .simplebar-track.simplebar-horizontal {
    opacity: 0;
    transition: opacity 0.2s;
}
.template-modal .tab-items-simplebar:hover .simplebar-track.simplebar-horizontal {
    opacity: 1;
}

/* ── 좌측 탭 (전용, Figma 4529:30192) ── */
.template-modal .tmpl-tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.template-modal .tmpl-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* 위 숫자 / 아래 글자, 하단 정렬 */
    gap: 6px;
    width: 94px;
    height: 65px;
    padding: 12px 16px 10px;
    border-bottom: 4px solid transparent;
    color: #1f2937; /* 활성(선택가능) 탭: neutral 800 */
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.template-modal .tmpl-tab.active {
    color: #6a61f5; /* 선택된(포커스) 탭: primary */
    border-bottom-color: #6a61f5;
}
.template-modal .tmpl-tab.active .tmpl-tab-txt {
    font-weight: 700; /* 선택 탭 글자 진하게 (Figma: Pretendard Bold) */
}
.template-modal .tmpl-tab.disabled {
    color: #9ca3af; /* 비활성 탭: neutral 400 */
    pointer-events: none;
}
/* 수정 개수 배지: 있을 때만 보라 원, 없으면 숨김(글자는 하단 고정) */
.template-modal .tmpl-tab-num {
    display: none;
}
.template-modal .tmpl-tab-num.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6a61f5;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.template-modal .tmpl-tab-txt {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

/* ── 체크박스 포커스/체크 색상 (우측패널 한정) ── */
.ch-vendor-panel .form-check-input:checked {
    background-color: #6B5AFA !important;
    border-color:     #6B5AFA !important;
}
.ch-vendor-panel .form-check-input[type=checkbox]:indeterminate {
    background-color: #6B5AFA !important;
    border-color:     #6B5AFA !important;
}

.template-modal + .modal-backdrop{
    z-index: 1055;
}

.template-modal + .modal-backdrop + .template-modal{
    z-index: 1056;
}

.template-modal + .modal-backdrop + .template-modal + .modal-backdrop{
    z-index: 1057;
}

.template-modal + .modal-backdrop + .template-modal + .modal-backdrop + .template-modal{
    z-index: 1058;
}

/* ── 복구: ImportJobModal · QuickSearchModal (git be7413c 에서 복원, 다크 제외) ── */
/* ── 가져오기 작업 모달 ── */
.import-job-modal .modal-dialog {
    max-width: 710px;
}
.import-job-modal .modal-content {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}
.import-job-modal__header {
    border-bottom: 1px solid #f1f5f9;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* 타이틀: 아이콘 제거 + 앱 모달 타이틀과 폰트 통일(18/700) */
.import-job-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.import-job-modal__body {
    padding: 20px 24px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 410px;
}
.import-job-modal__notice {
    background: #f0fafa;
    border: 1px solid #b2e8e8;
    border-radius: 8px;
    padding: 8px 14px 8px 28px;
    font-size: 0.82rem;
    color: #3d8f8f;
    margin-bottom: 20px;
    margin-top: 0;
    list-style: disc;
    line-height: 1.8;
}
.import-job-modal__footer {
    border-top: 1px solid #f1f5f9;
    padding: 14px 24px;
    flex-shrink: 0;
}
/* 폼 */
.import-job-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.import-job-form__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.import-job-form__label {
    width: 70px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    padding-top: 8px;
}
/* 폼 입력 폰트·높이 통일 (textarea 제외 높이 34) */
.import-job-form .form-control,
.import-job-form .form-select { font-size: 14px; }
.import-job-form input.form-control,
.import-job-form .form-select { height: 34px; }
/* CustomSelect(csel-sm)도 폼 기준 높이 34·폰트 14·굵기 400으로 통일
   (네이티브 input/select가 400이라, 500이던 csel/qr를 맞춰 '진하기' 차이 제거) */
.import-job-form .csel-trigger.csel-sm { height: 34px; min-height: 34px; font-size: 14px; font-weight: 400; }
.import-job-form .qr-trigger { font-weight: 400; }
.import-job-form__label.required::after {
    content: ' *';
    color: #ef4444;
}
.import-job-form__field {
    flex: 1;
}
/* 채널/계정 셀렉트는 CustomSelect로 대체 → .import-vendor-select* 제거 */
/* 작업 목록 */
.import-job-list__count {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 10px;
}
.import-job-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.import-job-list__border {
    height: 320px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.import-job-list__scroll {
    height: 100%;
}
.import-job-list__items {
    display: flex;
    flex-direction: column;
}
/* ── 작업목록 모달 (OA01) — Figma 4871-22584 ── */
.job-list-modal { max-width: 940px; }
.job-list-modal .modal-content {
    width: 940px;
    height: 700px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    border: none;
}
/* size="sm" — LO01 작업이력 작업목록 (기간필터 미노출) — Figma 4871-32617 (650×700) */
.job-list-modal--sm { max-width: 650px; }
.job-list-modal--sm .modal-content { width: 650px; }

/* 헤더 */
.jlm-header {
    height: 64px;
    flex-shrink: 0;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.jlm-title { font-size: 20px; font-weight: 700; color: #1f2937; letter-spacing: -0.5px; line-height: 1; }
/* 헤더 작업구분 드롭다운 (150×40 / 16px / neutral-800) — width 는 CustomSelect width prop(150) */
.jlm-header .csel-trigger.csel-sm { height: 40px; font-size: 16px; }
.jlm-header .csel-trigger.csel-sm .csel-label { font-size: 16px; color: #1f2937; }

/* 필터바 (기간 행 + 채널·상태·작업명·조회 행) */
.jlm-filter { flex-shrink: 0; padding: 20px 30px; border-bottom: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.jlm-filter__row { display: flex; align-items: center; gap: 10px; }
/* CustomSelect 트리거 높이 40 + 라벨 16px (Figma 드롭다운 40px / 16px) — 폰트패밀리는 전역 Pretendard 상속 */
.jlm-filter .csel-trigger.csel-sm { height: 40px; font-size: 16px; }
.jlm-filter .csel-trigger.csel-sm .csel-label { font-size: 16px; color: #6b7280; }
.jlm-filter .jlm-keyword {
    height: 40px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 10px;
    font-size: 16px; color: #1f2937; flex: 1 0 0; min-width: 0;
}
.jlm-filter .jlm-keyword::placeholder { color: #9ca3af; }
.jlm-search-btn {
    height: 40px; min-width: 74px; padding: 0 16px; border: none; border-radius: 10px;
    background: #6a61f5; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.jlm-search-btn:hover { background: #574fd6; }

/* 리스트 (헤더·필터 제외한 나머지 높이 채움) */
/* 스크롤바 10px 고정 + gutter 항상 예약 → 카드 우측(패딩20)+스크롤바(10)=30 으로 헤더/필터와 콘텐츠 우측 정렬 (Figma 4871-32617) */
.jlm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.jlm-list::-webkit-scrollbar { width: 10px; }
.jlm-list::-webkit-scrollbar-thumb {
    background: #d7dde3; border-radius: 8px;
    border: 1px solid transparent; background-clip: padding-box;
}
.jlm-card {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 10px 20px 30px; border-bottom: 1px solid #e5e7eb; background: #fff; cursor: pointer;
    transition: background 0.12s;
}
.jlm-card:hover, .jlm-card--selected { background: #f6f5ff; }
.jlm-card__main { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.jlm-card__row { display: flex; align-items: center; gap: 10px; }
.jlm-tag {
    background: #f3f4f6; color: #00b3b3; font-size: 10px; font-weight: 600;
    padding: 4px 6px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}
/* 상품전송(sync) 태그 — 배경은 동일 회색(neutral/100) + 텍스트만 퍼플(primary/default) */
.jlm-tag--sync { color: #6a61f5; }
.jlm-card__time { font-size: 12px; color: #9ca3af; line-height: 16px; }
.jlm-card__name { font-size: 16px; font-weight: 700; color: #1f2937; line-height: 17.5px; }
.jlm-card--selected .jlm-card__name,
.jlm-card:hover .jlm-card__name { color: #6a61f5; }
.jlm-vendor { display: flex; align-items: center; gap: 4px; }
.jlm-vendor img { width: 20px; height: 20px; border: 1px solid #e5e7eb; border-radius: 4px; object-fit: cover; }
.jlm-vendor span { font-size: 14px; color: #1f2937; letter-spacing: -0.7px; }
/* 우측 그룹(카운트+칩): 칩은 고정폭 슬롯 안에서 중앙정렬 →
   카운트는 자연폭이지만 칩 슬롯이 고정폭이라 오른쪽 끝 위치가 자동 정렬됨 — Figma 4871-32617 */
.jlm-count { white-space: nowrap; flex-shrink: 0; }
.jlm-count strong { font-size: 18px; font-weight: 700; }
.jlm-count span { font-size: 16px; color: #6b7280; }
.jlm-chip-wrap { flex-shrink: 0; min-width: 80px; display: flex; align-items: center; justify-content: center; }
.jlm-chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 12px; border-radius: 30px;
    font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
/* 페이저 (모달 하단 고정) */
.jlm-pager {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 12px 30px; border-top: 1px solid #e5e7eb; background: #fff;
}
.jlm-pager__info { font-size: 14px; color: #1f2937; min-width: 48px; text-align: center; }
.jlm-pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #6b7280; cursor: pointer;
}
.jlm-pager__btn:hover:not(:disabled) { background: #f6f5ff; border-color: #6a61f5; color: #6a61f5; }
.jlm-pager__btn:disabled { opacity: .4; cursor: not-allowed; }

.import-job-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    transition: background 0.12s;
}
.import-job-card:last-child { border-bottom: none; }
.import-job-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.import-job-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.import-job-card__time {
    font-size: 0.75rem;
    color: #94a3b8;
}
.import-job-card__name {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.import-job-card__meta {
    font-size: 0.78rem;
    color: #64748b;
}
.import-job-card__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.import-job-card__count {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.import-job-card__count strong {
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}
.import-job-card__running {
    font-size: 0.82rem;
    color: var(--oligo-point);
    font-weight: 500;
}
.import-job-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--oligo-primary, #6a61f5);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, transform 0.15s;
}
.import-job-card__btn:hover {
    color: #fff;
    background: var(--oligo-primary, #6a61f5);
    border-radius: 50%;
    transform: translateX(2px);
}
.import-job-card__status {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
.import-job-card__status--registered { background: #f1f5f9; color: #64748b; }
.import-job-card__status--running    { background: #e0f7f7; color: #007a7a; }
.import-job-card__status--canceled   { background: #fee2e2; color: #dc2626; }
.import-job-modal-backdrop,
.import-job-modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.35) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Quick Search Panel ── */
.qs-panel {
    position: fixed;
    z-index: 9999;
    width: 500px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e5e8eb);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 14px 14px 10px;
    animation: qs-fadein 0.15s ease;
}

@keyframes qs-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qs-search-area {
    display: flex;
    align-items: center;
    gap: 6px;
}
.qs-search-btn { flex-shrink: 0; }

/* 검색박스 하단 테두리 + 토글 탭 부착 (OA03 방식) */
.qs-search-box {
    position: relative;
    border-bottom: 1px solid var(--border-color, #e5e8eb);
    padding-bottom: 10px;
    margin-bottom: 24px;
}
.qs-filter-toggle {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translate(-50%, 50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 22px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--border-color, #e5e8eb);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    color: #9ca3af;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.04);
}
.qs-filter-toggle::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
}
.qs-filter-toggle:hover { color: var(--oligo-primary); }
.qs-filter-toggle svg { transition: transform 0.15s ease; }
.qs-filter-toggle .flip { transform: rotate(180deg); }

.qs-select {
    border: 1px solid var(--border-color, #e5e8eb);
    background: var(--bg-surface, #fff);
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-heading);
    width: 90px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 5px 6px;
    height: 32px;
}

.qs-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.qs-input-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    pointer-events: none;
}

.qs-input {
    width: 100%;
    border: 1px solid var(--border-color, #e5e8eb);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-heading);
    padding: 5px 8px 5px 28px;
    height: 32px;
    transition: border-color 0.15s;
}

.qs-input:focus {
    border-color: var(--oligo-primary);
}

.qs-input::placeholder {
    color: var(--text-placeholder);
}

.qs-filter-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    /*padding: 10px 0 2px;*/
    /*border-top: 1px solid var(--border-color, #e5e8eb);*/
}

.qs-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qs-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #8b95a1);
    flex-shrink: 0;
    width: 45px;
}

.qs-date-shortcuts {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.qs-shortcut-btn {
    border: 1px solid var(--border-color, #e5e8eb);
    background: transparent;
    font-size: 11px;
    color: var(--text-muted, #8b95a1);
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}

.qs-shortcut-btn:hover {
    background: var(--bg-input, #f4f5f7);
    color: var(--text-heading);
}

.qs-shortcut-btn.active {
    background: var(--oligo-primary);
    border-color: var(--oligo-primary);
    color: #fff;
}

.qs-basis-btns {
    display: flex;
    gap: 4px;
}

.qs-exact-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-heading);
    cursor: pointer;
    user-select: none;
}

.qs-exact-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border-color, #d0d5dd);
    border-radius: 4px;
    background: var(--bg-surface, #fff);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.qs-exact-checkbox:checked {
    background: var(--oligo-primary);
    border-color: var(--oligo-primary);
}

.qs-exact-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.qs-date-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.qs-filter-sep {
    font-size: 12px;
    color: var(--text-muted, #8b95a1);
    flex-shrink: 0;
}

/* 기간 달력: 공통 크롬은 page.css(.oligo-oa01-search · .qs-date-inputs 공용)로 이관.
   여기선 빠른검색 전용 차이(가로 꽉참·폰트 13)만 */
.qs-date-inputs .calendar { flex: 1; min-width: 0; }
.qs-date-inputs .calendar .form-control { width: 100%; font-size: 13px; }
.qs-date-inputs > span:not(.calendar) {
    flex: 0 0 auto;
    padding: 0 4px;
    color: #9ca3af;
    font-size: 13px;
}

.qs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 6px;
}

.qs-footer-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.qs-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color, #e5e8eb);
    background: transparent;
    font-size: 11px;
    color: var(--text-muted, #8b95a1);
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}

.qs-filter-btn:hover {
    background: var(--bg-input, #f4f5f7);
    color: var(--text-heading);
}

.qs-filter-btn.active {
    background: var(--oligo-primary);
    border-color: var(--oligo-primary);
    color: #fff;
}

.qs-close-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--text-muted, #8b95a1);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
    transition: background 0.15s;
}

.qs-close-btn:hover {
    background: var(--bg-input, #f4f5f7);
    color: var(--text-heading);
}

/* ── Quick Search History ── */
.qs-history {
    margin-top: 10px;
    /*border-top: 1px solid var(--border-color, #e5e8eb);*/
    /*padding-top: 8px;*/
}

.qs-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 0 2px;
}

.qs-history-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #8b95a1);
    letter-spacing: 0.3px;
}

.qs-history-clear {
    border: 1px solid var(--oligo-danger-border);
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: var(--oligo-danger);
    cursor: pointer;
    padding: 0.5em 0.4em;
    border-radius: 8px;
    transition: background 0.12s;
}

.qs-history-clear:hover {
    background: var(--oligo-danger-bg);
}

.qs-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 150px;
    max-height: 150px;
    overflow-y: auto;
    flex-direction: column;
    gap: 1px;
}

.qs-history-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}

.qs-history-item:hover {
    background: var(--bg-input, #f4f5f7);
}

.qs-history-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    font-size: 12px;
    color: var(--text-placeholder);
}

.qs-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: var(--bg-input, #f4f5f7);
    border: 1px solid var(--border-color, #e5e8eb);
    font-size: 12px;
    color: var(--text-muted, #8b95a1);
    flex-shrink: 0;
    white-space: nowrap;
}

.qs-history-word {
    flex: 1;
    font-size: 13px;
    color: var(--text-heading);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.qs-history-time {
    font-size: 11px;
    color: var(--text-placeholder);
    flex-shrink: 0;
    white-space: nowrap;
}

.qs-history-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-placeholder);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s;
    flex-shrink: 0;
}

.qs-history-item:hover .qs-history-remove {
    opacity: 1;
}

.qs-history-remove:hover {
    background: rgba(229, 62, 62, 0.1);
    color: #e53e3e;
}

/* ============================================================
   src/components/*.css 통합 (co-located → component.css)
   ============================================================ */
/* ── ChSyncPanel ── */
/* ============================================================
   ChSyncPanel.css — OA03 우측 "상품전송" 패널 (Figma 4015-15929)
   - 컨테이너 폭/위치는 style.css의 .ch-vendor-panel(--oa03) 재사용
   - 내부 요소만 .csp 스코프로 오버라이드 (다른 .ch-vendor-panel 무영향)
   ============================================================ */
.csp {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    /* border-left 는 .ch-vendor-panel 공통(1px #e2e8f0) 사용 — 전 패널 통일 */
}

/* 헤더 (전역 공통 — 모든 우측 패널 헤더가 공유: csp/orp/ch-vendor-panel 등) */
.csp-head {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid #e5e7eb;
}
.csp-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}
.csp-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.csp-close:hover {
    background: #f3f4f6;
    color: #6b7280;
}

/* 섹션 */
.csp .csp-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 30px;
}
/* 채널/계정별 선택: 남은 높이 채우기(목록 스크롤) → 하단 고정 */
.csp .csp-section--grow {
    flex: 1 1 auto;
    min-height: 0;
}
.csp .csp-label {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
}

/* 목록 박스 */
.csp .csp-section--grow .csp-box {
    flex: 0 1 auto;
    min-height: 0;
}
.csp .csp-box {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow-y: auto;
}
.csp .csp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 56px;
    cursor: pointer;
}
.csp .csp-row--head {
    min-height: 50px;
    background: #f9fafb;
    cursor: default;
}
/* 선택된(값>0) 행: 연보라 배경 + 카운트 퍼플 */
.csp .csp-row.active:not(.csp-row--head) {
    background: #f6f5ff;
}
.csp .csp-row.active .csp-count b {
    color: #6a61f5;
}
.csp .csp-check {
    flex: 0 0 auto;
    align-self: center;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}
.csp .csp-logo {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}
.csp .csp-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.csp .csp-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csp .csp-row--head .csp-name {
    flex: 1 1 0;
    min-width: 0;
}
.csp .csp-sub {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csp .csp-count {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
}
.csp .csp-count b {
    font-weight: 500;
    color: #6a61f5;
}
.csp .csp-empty {
    padding: 24px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* 하단 (안내 + 통계 + 버튼) */
.csp .csp-bottom {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}
.csp .csp-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: #f6f5ff;
    border-radius: 8px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}
.csp .csp-notice svg {
    flex: 0 0 auto;
    margin-top: 1px;
}
.csp .csp-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.csp .csp-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.csp .csp-stat-label {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}
.csp .csp-stat-val {
    font-size: 15px;
    font-weight: 700;
    color: #6a61f5;
}
.csp .csp-eta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.csp .csp-eta svg { flex: 0 0 auto; color: #9ca3af; }
.csp .csp-eta b {
    color: #6a61f5;
    font-weight: 700;
}

/* 상품전송 버튼 (퍼플 채움, 비활성 회색) */
.csp .csp-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: #6a61f5;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.csp .csp-btn:hover:not(:disabled) {
    background: #554ce9;
}
.csp .csp-btn:disabled {
    background: #f3f4f6;
    color: #d1d5db;
    cursor: not-allowed;
}

/* ── ChRegisterPanel ── */
/* ============================================================
   ChRegisterPanel.css — OA02/UP111 우측 "채널상품등록" 패널
   - ChSyncPanel(csp) 디자인 언어로 통일 (퍼플 #6a61f5 액센트)
   - 메인 패널은 .csp 클래스를 재사용(ChSyncPanel.css) + 여기서 crp-* 추가
   - 컨테이너 폭/위치는 style.css의 .ch-vendor-panel(--oa02) 재사용
   ============================================================ */

/* 메인 패널 하단 요약 라인 (ITEMS/CH/VD) */
.csp .crp-summary {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.csp .crp-summary b {
    color: #6a61f5;
    font-weight: 700;
}
.csp .crp-summary .crp-div {
    margin: 0 6px;
    color: #d1d5db;
    font-weight: 400;
}

/* 메인 버튼 아이콘 간격 */
.csp .csp-btn svg {
    margin-right: 8px;
}

/* ── 간단등록 설정 서브 패널 ── */
/* 두 패널 사이 구분선은 메인 패널의 border-left(공통 #e2e8f0)가 담당 → 별도 border-right 불필요(이중선 방지) */
.crp-simple .csp-head .csp-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crp-simple .csp-head .csp-title svg {
    color: #6a61f5;
    font-size: 18px;
}

/* 카드 목록 (남은 높이 스크롤) */
.crp-cards {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

/* 벤더 카드 */
.crp-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
/* 헤더 (로고 + 계정명 + 제외 X) — 회색 스트립 */
.crp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0;
}
.crp-card-head .csp-logo {
    width: 20px;
    height: 20px;
}
/* 본문 (카테고리 / 템플릿 섹션) */
.crp-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}
.crp-card-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.7px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 카드 제외 X (우측) — 클릭 시 선택 해제(카드 제거 + 메인 패널 연동) */
.crp-card-x {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.crp-card-x:hover { background: #f3f4f6; color: #6b7280; }

/* 카드 내부 섹션 (카테고리 / 템플릿) */
.crp-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crp-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.crp-sec-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
/* 필수 표시 * (카테고리 등) */
.crp-req {
    margin-left: 2px;
    color: #ff3149;
    font-weight: 700;
}
/* 큰 입력형 트리거 (카테고리 추가 / 템플릿 선택) — orp-cate-input 스타일: teal 테두리 + 돋보기 */
.crp-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #6a61f5;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.crp-input:hover { background: #f6f5ff; }
/* '+ 카테고리' 추가 트리거 — 아이콘+텍스트 중앙정렬 (돋보기 없음) */
.crp-input--add { justify-content: center; gap: 8px; }
/* 돋보기(직계 svg)만 purple — X 버튼 안 svg까지 물들지 않게 '>' 로 한정 */
.crp-input > svg { flex: 0 0 auto; font-size: 20px; color: #6a61f5; }
.crp-input-ph { font-size: 16px; font-weight: 500; color: #6a61f5; }
.crp-input-val {
    font-size: 16px; font-weight: 500; color: #1f2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 값 선택됨(템플릿 단건): 칩과 같은 크기감 + 회색 테두리 */
/* 선택 완료 상태: 크기는 동일, 보더만 회색(빈 트리거=보라 보더와 구분) */
.crp-input--filled {
    border-color: #e5e7eb;
}
.crp-input--filled:hover { background: #f9fafb; }
/* 템플릿 인풋 안내 툴팁 (첫 채널만) — 패널 열릴 때 자동 노출(.crp-input--tip-on), 아래쪽 중앙 + 위 방향 세모 */
.crp-input--tip { position: relative; }
.crp-input--tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    transform: translateX(-50%);
    background: #191f28;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 20;
}
.crp-input--tip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 1px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid #191f28;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 21;
}
/* 안내 툴팁은 hover 가 아니라 패널 열릴 때 자동 노출 (JS 가 --tip-on 부여, 첫 카드만) */
.crp-input--tip-on::after,
.crp-input--tip-on::before {
    opacity: 1;
}

/* 선택된 항목 박스 (카테고리 칩 / 템플릿) */
.crp-selected,
.crp-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: background 0.15s;
}
/* Input(칩) 자체에 hover 적용 — 내부 X 아이콘엔 미적용 */
.crp-chip:hover {
    background: #f9fafb;
}
.crp-chip-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #1f2937;
    word-break: break-word;
}
.crp-selected-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.crp-selected-label {
    font-size: 11px;
    color: #9ca3af;
}
.crp-selected-val {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Input 내부 삭제 아이콘 — 아이콘 자체엔 hover 미적용 (Input에만 hover) */
/* ===== 공용 닫기/삭제 X 아이콘 (CloseIcon, Figma 4702-23603) =====
   .icon-x-24 : 모달/패널/카드 닫기 (24×24 박스 + 아이콘 20px)
   .icon-x-16 : 칩/태그/인라인 삭제 (20×20 박스 + 아이콘 16px)
   공통: hover 회색박스 #f3f4f6, 색 #9ca3af→#6b7280 */
.icon-x-24,
.icon-x-16 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.icon-x-24 {
    width: 24px;
    height: 24px;
    font-size: 20px;
}
.icon-x-16 {
    width: 20px;
    height: 20px;
    font-size: 16px;
}
.icon-x-24:hover,
.icon-x-16:hover {
    background: #f3f4f6;
    color: #6b7280;
}

/* 삭제 X (작은/16 tier) — CloseIcon 20 variant: 20×20 박스 + hover 회색박스 */
.crp-chip-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.crp-chip-x:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.crp-placeholder {
    padding: 12px 10px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

/* ── OligoRegPanel ── */
/* ============================================================
   OligoRegPanel.css — 우측 "올리고 상품등록" 패널 (Figma 4125-17558)
   - 컨테이너 폭/위치는 style.css의 .ch-vendor-panel(--oa01) 재사용
   - 내부 요소만 .orp 스코프로 Figma에 맞춰 오버라이드 (OA02/OA03 패널 무영향)
   ============================================================ */
/* 전체 높이 채우고 세로 배치: 헤더 고정 → 카테고리 목록 확장 → 하단 섹션 바닥 고정 */
/* HelpManualPanel(help-side-panel) 사이드 패널 룩 통일: 좌측 경계선 + 그림자 */
.orp {
    display: flex; flex-direction: column; height: 100%; overflow: hidden; font-size: 14px;
    /* border-left 는 .ch-vendor-panel 공통(1px #e2e8f0) 사용, 그림자 없음 — 전 패널 통일 */
}

/* 헤더는 전역 .csp-head / .csp-title / .csp-close 공통 규칙 사용 (위 참고) */

/* 섹션 (구분선은 하단 섹션의 border-top 으로 처리 → 빈 공간에 안 뜸) */
.orp .orp-section {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 20px;
    padding: 20px 30px;
}
/* 카테고리별 선택: 남은 높이 채우기 (목록 스크롤) → 하단 섹션은 바닥으로 */
.orp .orp-section--grow { flex: 1 1 auto; min-height: 0; }
/* 하단 고정 섹션(카테고리 지정·선택 상품 수): 높이 190 + 위쪽 경계선 */
.orp .orp-section:not(.orp-section--grow) { min-height: 190px; border-top: 1px solid #e5e7eb; }
.orp .orp-label { font-size: 16px; font-weight: 700; color: #1f2937; }
.orp .orp-label--muted { font-weight: 500; color: #6b7280; }

/* 카테고리별 선택 박스: 내용만큼 커지고(그로우X), 남는 공간 초과 시 스크롤 */
.orp .orp-section--grow .orp-catbox { flex: 0 1 auto; min-height: 0; }
.orp .orp-catbox {
    border: 1px solid #e5e7eb; border-radius: 10px;
    overflow-y: auto;
}
.orp .orp-catrow {
    display: flex; align-items: center;
    padding: 10px 11px 10px 18px;
    min-height: 48px
}
.orp .orp-catrow--head { background: #f9fafb; min-height: 50px; padding: 11px 11px 11px 18px; }
/* 선택된(값>0) 카테고리 행: 연보라 배경 + 카운트 퍼플 (Figma 4002-9685) */
.orp .orp-catrow.active:not(.orp-catrow--head) { background: #f6f5ff; }
.orp .orp-catrow.active .orp-catcount b { color: #6a61f5; }
.orp .orp-catrow .orp-cattext {
    flex: 1 1 0; min-width: 0; margin: 0;
    padding-left:10px;
    font-size: 14px; font-weight: 500; color: #1f2937; line-height: 1.4; cursor: pointer;
}
.orp .orp-catrow--head .orp-cattext { font-weight: 700; }
.orp .orp-catcount { padding-right:10px; flex: 0 0 auto; margin-left: 10px; font-size: 14px; font-weight: 500; color: #9ca3af; white-space: nowrap; }
.orp .orp-catcount b { color: #1f2937; font-weight: 500; }
/* 체크박스 24px (Figma) + 라벨과 10px 간격 + 세로 중앙정렬 (bootstrap margin-top 제거) */
.orp .orp-check-input {
    flex: 0 0 auto; align-self: center;
    width: 24px; height: 24px; margin: 0 10px 0 0; cursor: pointer;
    vertical-align: middle;
}

/* 카테고리 지정 입력 (teal 테두리 + 돋보기) */
.orp .orp-cate-input {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 10px 16px;
    border: 1px solid #00b3b3; border-radius: 8px; background: #fff; cursor: pointer;
}
.orp .orp-cate-input svg { color: #00b3b3; flex: 0 0 auto; }
.orp .orp-cate-ph { font-size: 15px; font-weight: 500; color: #00b3b3; }
.orp .orp-cate-val { font-size: 15px; font-weight: 500; color: #1f2937; word-break: break-all; }
/* 카테고리 선택됨: 회색 테두리 + 회색 아이콘 (Figma 4002-9206) — 선택한 카테고리명은 진한 글자 */
.orp .orp-cate-input.has-value { border-color: #e5e7eb; }
.orp .orp-cate-input.has-value svg { color: #9ca3af; }

/* 버튼 */
.orp .orp-btn {
    width: 100%; height: 50px; border-radius: 10px; border: 1px solid transparent;
    font-size: 16px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* 카테고리 지정(보조): 활성 = 연민트 채움 + teal 외곽선/글자 (Figma Text Button) */
.orp .orp-btn:not(.orp-btn--primary) { background: #e1f3f4; border-color: #00b3b3; color: #00b3b3; }
.orp .orp-btn:not(.orp-btn--primary):hover:not(:disabled) { background: #bbe5e8; }
/* 올리고 상품등록(주요): 활성 = teal 채움 */
.orp .orp-btn--primary { background: #00b3b3; color: #fff; }
.orp .orp-btn--primary:hover:not(:disabled) { background: #009a9a; }
/* 공통 비활성(회색) */
.orp .orp-btn:disabled { background: #f3f4f6; border-color: #e5e7eb; color: #d1d5db; cursor: not-allowed; }

/* 선택 상품 수 */
.orp .orp-countrow { display: flex; align-items: center; justify-content: space-between; }
.orp .orp-count-label { font-size: 16px; font-weight: 700; color: #1f2937; }
.orp .orp-count-val { font-size: 16px; font-weight: 700; color: #6a61f5; }
.orp .orp-dupchk {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 14px; font-weight: 500; color: #1f2937; cursor: pointer;
}
/* 채널상품 동시생성 옵션 */
.orp .orp-chopt { display: flex; flex-direction: column; gap: 8px; }
.orp .orp-radio {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 14px; font-weight: 500; color: #1f2937; cursor: pointer;
}
.orp .orp-radio:has(input:disabled) { color: #9ca3af; cursor: not-allowed; }
.orp .orp-chopt-note { margin: 0; font-size: 12px; font-weight: 500; color: #9ca3af; }

/* ── CustomSelect ── */
/* ============================================================
   CustomSelect — 공용 커스텀 셀렉트 (네이티브 <select> 대체)
   qr-trigger 기반: 흰 배경 + 좌측정렬. 목록은 흰 카드.
   색상은 style.css 의 --oligo-* 토큰 사용(폴백값 포함).
   ============================================================ */
.csel {
    position: relative;
    display: inline-block;
    /* 기본 고정 너비: 부모가 내용너비(shrink-wrap flex)일 때 선택 글자에 따라
       너비가 늘었다 줄었다 하는 것을 방지. width prop(인라인 style)으로 개별 override,
       부모폭을 채우려면 width="100%" 전달. */
    width: 150px;
}

/* 트리거 (닫힘) */
.csel-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    color: var(--oligo-neutral-800, #1f2937);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border: 1px solid var(--oligo-neutral-200, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.csel-trigger.csel-sm {
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
}
.csel-trigger:hover:not(:disabled) {
    border-color: var(--oligo-neutral-300, #d1d5db);
}
.csel-trigger.open {
    border-color: var(--oligo-primary, #6a61f5);
    box-shadow: 0 0 0 3px rgba(106, 97, 245, 0.12);
}
.csel-trigger:disabled {
    background: var(--oligo-neutral-50, #f9fafb);
    color: var(--oligo-neutral-400, #9ca3af);
    cursor: not-allowed;
}
.csel-trigger.is-placeholder .csel-label {
    color: var(--oligo-neutral-400, #9ca3af);
}

.csel-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csel-caret {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--oligo-neutral-400, #9ca3af);
    transition: transform 0.15s ease;
}
.csel-trigger.open .csel-caret {
    transform: rotate(180deg);
}

/* 목록 (열림) */
.csel-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--oligo-neutral-200, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}
.csel-menu li {
    margin: 0;
}
.csel-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--oligo-neutral-800, #1f2937);
    white-space: nowrap;
}
.csel-option:hover,
.csel-option.active {
    background: var(--oligo-primary-soft, #f6f5ff);
}
.csel-option.selected {
    color: var(--oligo-primary, #6a61f5);
    font-weight: 700;
}
.csel-option:disabled {
    color: var(--oligo-neutral-300, #d1d5db);
    cursor: not-allowed;
    background: none;
}
/* searchable: 목록 상단 검색입력(스크롤해도 상단 고정) */
.csel-search {
    position: sticky;
    top: -6px;
    z-index: 1;
    margin: -6px -6px 4px;
    padding: 6px;
    background: #fff;
    border-bottom: 1px solid var(--oligo-neutral-200, #e5e7eb);
}
.csel-search__input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--oligo-neutral-200, #e5e7eb);
    border-radius: 6px;
    font-size: 14px;
    color: var(--oligo-neutral-800, #1f2937);
    outline: none;
}
.csel-search__input:focus {
    border-color: var(--oligo-primary, #6a61f5);
}
.csel-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--oligo-neutral-400, #9ca3af);
    text-align: center;
}

/* ── QuickRangeDropdown ── */
/* ============================================================
   QuickRangeDropdown — 기간 빠른선택 커스텀 드롭다운
   닫힘: 보라 pill (Figma) / 열림: 흰 카드 목록 (좌측정렬·hover·선택 강조)
   ============================================================ */
.qr-dropdown { position: relative; display: inline-block; }

/* 트리거 (닫힌 pill) */
.qr-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    box-sizing: border-box;
    height: 30px; width: 84px; padding: 0 8px;
    background: #f6f5ff; color: #6a61f5; font-size: 14px; font-weight: 500;
    border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.qr-trigger:hover:not(:disabled) { background: #efedff; }
.qr-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.qr-caret { flex: 0 0 auto; transition: transform .15s ease; }
.qr-trigger.open .qr-caret { transform: rotate(180deg); }

/* 열린 목록 */
.qr-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200;
    margin: 0; padding: 6px; list-style: none;
    min-width: 120px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
}
.qr-menu li { margin: 0; }

.qr-option {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer;
    font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap;
}
.qr-option:hover { background: #f6f5ff; }
.qr-option.selected { background: #f6f5ff; color: #6a61f5; font-weight: 700; }

/* ── ChPresetModal (채널별 상품 템플릿 조회) — Figma 4661-26612 ── */
.preset-modal .modal-dialog {
    max-width: 650px;
}
.preset-modal .modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    min-height: 700px;
}
.preset-modal .modal-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.preset-modal .modal-header {
    height: 64px;
    padding: 20px 30px;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

/* Tabler .modal-header 는 Bootstrap 기본의 justify-content:space-between 이 빠져 있어
   (닫기버튼을 .btn-close 절대위치로 두는 전제), ms-auto 없는 커스텀 닫기버튼(icon-x-24)이
   제목 바로 옆(좌측)에 붙는다. → 제목-닫기버튼 양끝 정렬 복원 (X 우측 고정) */
.modal .modal-header { justify-content: space-between; }

/* 이미지 선택 / 옵션 이미지 선택 — 헤더·푸터 여백을 앱 모달 관행(세로 16·14 / 좌우 24)에 맞춘다.
   Tabler 가 `.modal-header{padding:0 3.5rem 0 1.5rem}` 로 오른쪽 56px 를 '절대배치 닫기 버튼' 자리로
   비워 두는데, 우리는 flex(space-between)+.icon-x-24 라 그 56px 가 그냥 빈 여백이 된다 →
   제목은 왼쪽 24, X 는 오른쪽 56 으로 눈에 띄게 어긋났다. 다른 모달들은 전용 규칙으로 이미 덮어쓰고 있다.
   (JSX 의 .py-2 도 함께 제거했다 — 부트스트랩 유틸이라 !important 여서 CSS 로는 못 이긴다.) */
.oligo-image-picker .modal-header,
.toss-option-image .modal-header {
    min-height: 0;
    padding: 16px 24px;
}
.oligo-image-picker .modal-footer,
.toss-option-image .modal-footer {
    padding: 14px 24px;
    gap: 8px;
}
/* 토스 안내문('N / 10장 · 첫 장이 대표 이미지'). 데스크톱 모달(720px)에서도
   [업로드][URL 380][추가][안내문] 이 한 줄에 안 들어가 안내문만 '대표 이미/지' 로 끊겼다.
   짧은 고정 문구이므로 줄바꿈을 막고, 대신 폭이 유동적인 URL 칸이 줄어들게 한다. */
.toss-option-image .modal-body > .d-flex.align-items-center > span {
    white-space: nowrap;
    flex-shrink: 0;
}

/* 선택된 타일의 라벨. 부트스트랩/Tabler `.text-primary` 는 #066fd1(파랑)이라
   테두리에 쓰는 올리고 보라(#6a61f5)와 색이 어긋났다 → 같은 보라로 맞춘다. */
.oligo-image-picker .picker-label--on {
    color: var(--oligo-primary, #6a61f5);
}

/* 부트스트랩이 푸터 자식마다 margin 을 넣어 버튼이 본문 기준선보다 6px 밀린다 → gap 으로 대체 */
.oligo-image-picker .modal-footer > *,
.toss-option-image .modal-footer > * {
    margin: 0;
}
.preset-modal__heading {
    display: flex;
    align-items: center;
    gap: 10px;
}
.preset-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #1f2937;
}
.preset-modal__subtitle {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #6a61f5;
}
.preset-modal .btn-close {
    opacity: 0.55;
}
.preset-modal__search {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 80px;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
}
.preset-modal__search-label {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.preset-modal__search-input {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
    outline: none;
}
.preset-modal__search-input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}
.preset-modal__search-input:focus {
    border-color: #6a61f5;
}
.preset-modal__search-btn {
    flex: 0 0 auto;
    min-width: 74px;
    height: 40px;
    padding: 0 10px;
    background: #6a61f5;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.preset-modal__search-btn:hover {
    background: #574fd6;
}
.preset-modal__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}
.preset-modal__empty {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 40px 0;
}
.preset-modal__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.1s;
}
.preset-modal__item:hover {
    background: #f6f5ff;
}
.preset-modal__item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
.preset-modal__item-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 17.5px;
    color: #1f2937;
    transition: color 0.1s;
}
.preset-modal__item:hover .preset-modal__item-name {
    color: #6a61f5;
}
.preset-modal__item-date {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #9ca3af;
}
/* 주속성(고시정보) 칩 태그 */
.preset-modal__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 50px;
}
.preset-modal__badge svg {
    font-size: 12px;
    color: #6a61f5;
}
.preset-modal__badge-text {
    font-size: 10px;
    font-weight: 600;
    color: #6a61f5;
    white-space: nowrap;
}
/* 새 템플릿 추가 */
.preset-modal__add {
    display: flex;
    justify-content: center;
    padding: 20px 30px;
}
.preset-modal__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s;
}
.preset-modal__add-btn:hover {
    background: #f9fafb;
}
.preset-modal__add-btn svg {
    font-size: 16px;
    color: #9ca3af;
}

/* ── ChGoodsBulkEditModal (채널상품 대량수정: 상품명/판매가) ── */
.chbulk-modal .modal-dialog {
    max-width: 820px;
}
.chbulk-modal .modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}
.chbulk-modal .modal-header {
    padding: 20px 30px;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}
.chbulk-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1f2937;
}
.chbulk-modal__heading {
    display: flex;
    align-items: center; /* baseline 이면 20px 제목과 14px 부제가 위아래로 어긋나 보였다 */
    gap: 12px;
}
.chbulk-modal__heading .modal-title {
    margin: 0;
    line-height: 1.3;
}
.chbulk-modal__subtitle {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}
.chbulk-modal__dot {
    margin: 0 8px;
    color: #cbd5e1;
}
/* subtitle 숫자 강조: 선택 수는 진한 회색, 변경 수는 값이 있을 때 primary 강조 */
.chbulk-count {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0 1px;
}
.chbulk-count--changed {
    color: var(--oligo-primary, #6a61f5);
}
.chbulk-count--success {
    color: #16a34a;
}
.chbulk-count--fail {
    color: #ef4444;
}
.chbulk-modal .modal-body {
    padding: 20px 30px;
}
.chbulk-modal__hint {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}
.chbulk-modal__table-wrap {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.chbulk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.chbulk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.chbulk-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f1f3;
    vertical-align: middle;
}
.chbulk-table tbody tr.is-changed {
    background: rgba(106, 97, 245, 0.1);
}
/* 저장 성공 행: 초록 틴트 + 잠금(입력 비활성) */
.chbulk-table tbody tr.is-success {
    background: rgba(22, 163, 74, 0.08);
}
.chbulk-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
.chbulk-table__empty {
    text-align: center;
    color: #9ca3af;
    padding: 30px 0;
}
.chbulk-input {
    width: 100%;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
}
.chbulk-input:focus {
    outline: none;
    border-color: var(--oligo-primary, #6366f1);
}
.chbulk-input.is-invalid {
    border-color: #ef4444;
}
.chbulk-input.text-end {
    text-align: right;
}
.chbulk-fail {
    cursor: help;
}
.chbulk-warn {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: #ef4444;
}
.chbulk-modal__conflict {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.chbulk-modal__comment {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.chbulk-modal__comment-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.chbulk-modal .modal-footer {
    padding: 14px 30px;
    border-top: 1px solid #e5e7eb;
}

/* ── ChGoodsReapplyModal (채널상품 원본으로 덮어쓰기) — chbulk-modal 기반 ── */
.chreapply-modal .modal-dialog {
    max-width: 620px;
}
.chreapply-sections {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.chreapply-sections li {
    border-bottom: 1px solid #f0f1f3;
}
.chreapply-sections li:last-child {
    border-bottom: none;
}
.chreapply-sections label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    cursor: pointer;
}
.chreapply-sections .form-check-input {
    flex-shrink: 0;
    align-self: center;
}
.chreapply-sections__all {
    background: #f9fafb;
}
.chreapply-sections__label {
    flex: 0 0 84px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.chreapply-sections__desc {
    font-size: 12px;
    color: #6b7280;
}
.chreapply-modal__warn,
.chreapply-modal__notice {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.chreapply-modal__notice {
    margin: 0 0 12px;
}
.chreapply-modal__warn {
    padding: 12px 14px;
}
.chreapply-modal__warn-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.chreapply-modal__warn ul {
    margin: 0;
    padding-left: 18px;
}
.chreapply-modal__warn li.is-strong {
    color: #dc2626;
    font-weight: 700;
}
.chreapply-modal__err {
    color: #ef4444;
    word-break: break-all;
}
@media (max-width: 575.98px) {
    .chreapply-sections label {
        flex-wrap: wrap;
    }
    .chreapply-sections__desc {
        flex-basis: 100%;
        padding-left: 26px;
    }
}

/* ── ImageEditModal (상품 이미지 자르기·회전·반전) — chbulk-modal 기반 ── */
.img-edit-modal .modal-dialog {
    max-width: 760px;
}
.img-edit-modal__stage {
    height: min(480px, 56vh);
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
}
.img-edit-modal__stage > img {
    display: block;
    max-width: 100%; /* cropperjs 권장: 생성 전 원본 크기로 튀지 않게 */
}
.img-edit-modal__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 24px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    white-space: pre-line; /* 기본 문구 + 서버 사유 두 줄 */
}
/* cropper 선택 영역·손잡이를 앱 보라로 */
.img-edit-modal .cropper-view-box {
    outline-color: rgba(106, 97, 245, 0.85);
}
.img-edit-modal .cropper-line,
.img-edit-modal .cropper-point {
    background-color: #6a61f5;
}
.img-edit-modal__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.img-edit-modal__ratios {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    background: #f3f4f6;
}
.img-edit-modal__ratio {
    min-width: 52px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.img-edit-modal__ratio.is-active {
    background: #fff;
    color: #6a61f5;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}
.img-edit-modal__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.img-edit-modal__actions > button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.img-edit-modal__actions > button:hover:not(:disabled) {
    border-color: #6a61f5;
    background: #f6f5ff;
    color: #6a61f5;
}
.img-edit-modal__ratio:disabled,
.img-edit-modal__actions > button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.img-edit-modal__sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #e5e7eb;
}
.img-edit-modal__hint {
    font-size: 12px;
    color: #9ca3af;
}

/* ── ChGoodsRawDetailModal (가져오기 상품 상세) — style.css에서 이관, 액센트 보라 ── */
.ch-raw-detail-modal .modal-dialog { max-width: 900px; }
.ch-raw-detail-modal .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
/* toggle(사용여부) 스위치: goods-form과 동일한 크기로 노출 (읽기전용) */
.ch-raw-detail-modal .form-switch .form-check-input { width: 60px; }
.ch-raw-detail-modal__header {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid #e9edf2;
    background: #fff;
}
.ch-raw-detail-modal__tabs {
    padding: 0 20px;
    border-bottom: 1px solid #e9edf2;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}
.ch-raw-detail-modal__tabs .tab-items {
    margin-bottom: 0;
    height: 44px;
    align-items: stretch;
}
.ch-raw-detail-modal__tabs .tab-items > .tab-item {
    justify-content: center;
    height: 44px;
    border-bottom: 3px solid transparent;
    padding: 0 6px;
    transition: border-color 0.15s, color 0.15s;
}
.ch-raw-detail-modal__tabs .tab-items > .tab-item .title {
    line-height: 41px;
    font-size: 16px;
}
.ch-raw-detail-modal__tabs .tab-items > li.active {
    color: var(--oligo-primary);
    border-bottom-color: var(--oligo-primary);
}
.ch-raw-detail-modal__body {
    padding: 20px;
    height: 65vh;
    overflow-y: auto;
    background: #f4f6f9;
}
.ch-raw-detail-modal__body .items-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--oligo-primary);
    letter-spacing: 0.2px;
    padding-left: 10px;
    border-left: 3px solid var(--oligo-primary);
    margin-bottom: 10px;
}
.ch-raw-detail-modal__body .items-label.mt-3 { margin-top: 22px !important; }
.ch-raw-detail-modal__body .card {
    border: 1px solid #e9edf2;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ch-raw-detail-modal__body .card-body { padding: 6px 20px; }
.ch-raw-detail-modal__body .form-items { margin: 0; padding: 0; list-style: none; }
.ch-raw-detail-modal__body .form-item {
    padding: 12px 4px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0 !important;
    gap: 16px;
}
.ch-raw-detail-modal__body .form-item:last-child { border-bottom: none; }
.ch-raw-detail-modal__body .col-form-label {
    width: 160px !important;
    min-width: 160px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
}
.ch-raw-detail-modal__body .flex-grow-1 { font-size: 14px; color: #1e293b; }
.ch-raw-detail-modal__body .form-control,
.ch-raw-detail-modal__body .form-select { font-size: 14px; }
.ch-raw-detail-modal__body .w-10.col-form-label {
    width: 150px !important;
    min-width: 150px;
}
.ch-raw-detail-modal__body .w-10.flex-shrink-0 {
    width: 160px !important;
    min-width: 160px;
    font-size: 12px;
    color: #94a3b8;
}
.ch-raw-detail__img-main { max-height: 200px; max-width: 200px; border-radius: 8px; border: 1px solid #e9edf2; object-fit: contain; }
.ch-raw-detail__img-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-raw-detail__img-sub { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; border: 1px solid #e9edf2; }
.ch-raw-detail__html { font-size: 13px; line-height: 1.7; max-height: 400px; overflow-y: auto; }

/* body 이미지: 클릭 시 라이트박스 */
.ch-raw-detail-modal__body img { cursor: zoom-in; transition: opacity 0.12s; }
.ch-raw-detail-modal__body img:hover { opacity: 0.82; }

/* 이미지 라이트박스 (모달 위, 중첩 모달 아님) */
.ch-raw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: rgba(0, 0, 0, 0.78);
    cursor: zoom-out;
}
.ch-raw-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.ch-raw-lightbox__close {
    position: fixed;
    top: 20px;
    right: 28px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s;
}
.ch-raw-lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }

/* ========== 정보비교 모달 (revision-compare) ========== */
.revision-compare-dialog { max-width: min(960px, 96vw); }
.revision-compare-dialog .modal-content {
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.revision-compare-modal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.revision-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.revision-compare-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--oligo-point-bg);
    border: 1px solid var(--oligo-point-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oligo-point);
    flex-shrink: 0;
}
.revision-compare-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.revision-info-box {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    background: #f8fafc;
}
.revision-info-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 3px;
}
.revision-info-value {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.revision-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oligo-primary);
    display: inline-block;
    flex-shrink: 0;
}
.revision-diff-area {
    flex: 1;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow-y: auto;
}
.revision-empty {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.revision-compare-footer {
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

/* 섹션/화살표 diff 뷰 */
.rev-diff-list { display: flex; flex-direction: column; gap: 16px; padding: 0 14px 12px; }
.rev-sec { display: flex; flex-direction: column; }
.rev-sec__title {
    position: sticky; top: 0; z-index: 1;
    background: #fff;
    padding: 10px 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef2f6;
}
.rev-sec__title span {
    display: inline-block;
    font-size: 12px; font-weight: 700; color: var(--oligo-primary); letter-spacing: .02em;
    padding: 4px 12px;
    background: var(--oligo-primary-soft);
    border: 1px solid var(--oligo-primary-border);
    border-radius: 20px;
}
.rev-line {
    display: grid;
    grid-template-columns: 190px minmax(0,1fr) auto;
    align-items: start; gap: 12px;
    padding: 11px 10px; border-radius: 8px; font-size: 13px;
}
.rev-line + .rev-line { border-top: 1px solid #f5f7f9; }
.rev-line:hover { background: #f8fafc; }
.rev-line__field {
    font-weight: 600; color: #334155; line-height: 1.5;
    white-space: normal; word-break: break-word; padding-top: 3px;
}
.rev-vals { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; }
.rev-chip {
    max-width: 100%;
    padding: 5px 11px; border-radius: 7px; border: 1px solid transparent;
    font-size: 13px; line-height: 1.55; word-break: break-word;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.rev-chip--old { background: #f1f5f9; color: #64748b; justify-self: end; text-align: right; }
.rev-chip--new { background: #fff; border-color: #e2e8f0; color: #0f172a; font-weight: 600; justify-self: start; }
.rev-line--add .rev-chip--old,
.rev-line--delete .rev-chip--new { opacity: .55; }
.rev-arrow { flex: 0 0 auto; color: #94a3b8; }
.rev-thumb { width: 44px; height: 44px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 6px; display: block; }
.rev-chip:has(.rev-thumb),
.rev-chip:has(.rev-thumb-gone) { padding: 0; background: none; border: none; }
/* 못 불러온(지워진) 예전 이미지 — 썸네일 자리에 점선 칸 + 원본 링크 */
.rev-thumb-gone { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; border: 1px dashed #cbd5e1; border-radius: 6px; color: #94a3b8; font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.rev-thumb-gone:hover { color: #64748b; border-color: #94a3b8; }
.rev-tag {
    justify-self: end; align-self: center; font-size: 12px; font-weight: 600;
    padding: 3px 11px; border-radius: 20px; white-space: nowrap; letter-spacing: .01em;
}
.rev-tag--add    { background: var(--oligo-success-bg); color: var(--oligo-success); }
.rev-tag--modify { background: var(--oligo-primary-soft); color: var(--oligo-primary); }
.rev-tag--delete { background: var(--oligo-danger-bg); color: var(--oligo-danger); }

/* 펼침 상세 비교(StructuredDiff) — RevisionCompareModal 인라인 스타일에서 이관.
   데스크톱 값은 그대로다. */
.rev-struct {
    border: 1px solid #eef2f7; border-radius: 6px;
    margin: 2px 0 6px; overflow: hidden; font-size: 12px;
}
.rev-struct__head { display: grid; grid-template-columns: 1fr 1fr; }
.rev-struct__body { display: grid; grid-template-columns: 1fr 1fr; max-height: 240px; overflow-y: auto; }
.rev-struct__label { font-weight: 700; padding: 6px 10px; }
.rev-struct__label--old { color: #dc2626; background: #fde4e4; }
.rev-struct__label--new { color: #16a34a; background: #d9f5e3; }
.rev-struct__col { padding: 10px; min-width: 0; word-break: break-word; }
.rev-struct__col--old { background: #fef2f2; border-right: 1px solid #f1f5f9; }
.rev-struct__col--new { background: #f0fdf4; }
/* 상세설명 원본 미리보기 — 본문 스크롤 대신 칸마다 iframe 이 스크롤 */
.rev-struct--html .rev-struct__body { max-height: none; overflow: visible; }
.rev-html-frame { display: block; width: 100%; height: 360px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }

/* ========== 상품 이미지 모달 (goods-img-modal) — style.css에서 이관 ========== */
.goods-img-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}
.goods-img-modal {
    background: #fff;
    border-radius: 16px;
    width: 860px;
    height: 680px;
    max-width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.goods-img-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    gap: 10px;
}
.goods-img-modal__close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
.goods-img-modal__close:hover { color: #334155; }
.goods-img-modal__body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 20px;
    gap: 14px;
}
.goods-img-modal__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
}
.goods-img-modal__main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.goods-img-modal__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    width: 76px;
    flex-shrink: 0;
}
.goods-img-modal__thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.goods-img-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.goods-img-modal__thumb.active {
    border-color: var(--img-accent, var(--oligo-primary));
}
.goods-img-modal__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px 16px;
    position: relative;
}
.goods-img-modal__nav-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
}
.goods-img-modal__nav-btn:disabled { opacity: 0.35; cursor: default; }
.goods-img-modal__nav-btn:not(:disabled):hover { background: #e2e8f0; }
.goods-img-modal__counter {
    font-size: 13px;
    color: #64748b;
    min-width: 44px;
    text-align: center;
}
.goods-img-modal__fullscreen {
    position: absolute;
    right: 20px;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
}
.goods-img-modal__fullscreen:hover { background: #e2e8f0; }

/* ========== 카테고리 선택 모달 (category-* · oligo/channel-category-modal) — style.css에서 이관 ========== */
.category-list{
    display:flex;
}
.category-list dl{
    display:block;
    width:100%;
    min-width:0;
    margin-bottom:0;
    background-color:#fafafa;
    border: 1px solid var(--tblr-border-color-translucent);
}

.category-list dl + dl{
    border-left: none;
}
.category-list .category-title{
    font-weight:500;
    text-align:center;
    color:#7f7f7f;
    padding: 10px;
}
.category-list dl dd{
    height:250px;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
}
.category-list dl dd::-webkit-scrollbar{
    width: 18px;
    min-height: 18px;
}
.category-list dl dd::-webkit-scrollbar-corner{
    border-top: 1px solid #bdbdbd;
    border-bottom: 1px solid #bdbdbd;
    background: #fafafa;
}
.category-list dl dd::-webkit-scrollbar-thumb{
    border: 5px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
    background: #9e9e9e;
    background-clip: padding-box;
}
.category-list .category-items{
    list-style:none;
    padding-left:0;
    margin-bottom:0;
}
.category-list .category-items li{
    font-size:0.85rem;
    padding:5px 7px;
    cursor:pointer;
    user-select:none;
    display:flex;
    justify-content:space-between;
}
.category-list .category-items li:hover{
    background-color:rgba(var(--tblr-secondary-rgb), 0.1);
}
.category-list .category-items li.active{
    background-color:rgba(var(--tblr-secondary-rgb), 0.05);
    font-weight:500;
}
/* OA01 올리고 카테고리 모달 전용 */
.oligo-category-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}
.oligo-category-modal .modal-title,
.channel-category-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}
.oligo-category-modal .category-list .category-items, .channel-category-modal .category-list .category-items {
    background-color: #fff;
    display: block;
    flex-wrap: unset;
    gap: unset;
}
.oligo-category-modal .category-list .category-items li, .channel-category-modal .category-list .category-items li{
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    padding: 7px 9px;
    font-size: 14px;
    transition: none;
}
.oligo-category-modal .category-list .category-items li:hover, .channel-category-modal .category-list .category-items li:hover {
    background-color: #f0fafa;
    color: #334155;
}
.oligo-category-modal .category-list .category-items li.active, .channel-category-modal .category-list .category-items li.active {
    background-color: #e0f7f7;
    color: #007a7a;
    font-weight: 500;
}
.oligo-category-modal .category-list .category-items li .cate-chevron, .channel-category-modal .category-list .category-items li .cate-chevron {
    color: #cbd5e1;
    flex-shrink: 0;
}
.oligo-category-modal .category-list .category-items li.active .cate-chevron, .channel-category-modal .category-items li.active .cate-chevron {
    color: #00B3B3;
}

/* 카테고리 목록 */
.category-list dl { margin-bottom: 12px; }
.category-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.category-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.channel-category-modal .category-items {
    flex-direction: column;
}

.category-items li {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s;
}
.category-items li:hover { border-color: #00B3B3; color: #00B3B3; background: #f0fdfa; }
.category-items li.text-info { border-color: #00B3B3; color: #00B3B3; background: #f0fdfa; }












.channel-category-modal .modal-dialog{
    max-width:1000px;
}
.channel-category-modal .vendor-info{
    font-size:1.0rem;
    color:#7f7f7f;
}
.channel-category-modal .vendor-select-category{
    color:#7f7f7f;
    display:inline-block;
    margin-left:10px;
}

.oligo-cate-path-badge {
    display: inline-block;
    background: #e0f7f7;
    color: #007a7a;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 추천 카테고리 섹션 (channel 카테고리 모달) */
.cat-rec {
    border: 1px solid #e6ebf0;
    background: #fff;
    border-radius: 10px;
    padding: 11px 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cat-rec-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
.cat-rec-spark {
    color: #00b3b3;
    flex-shrink: 0;
}
.cat-rec-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    flex-shrink: 0;
}
.cat-rec-count {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
}
.cat-rec-golden {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #007a7a;
    background: #e0f7f7;
    border-radius: 20px;
    padding: 2px 9px;
    flex-shrink: 0;
}
/* 추천 기준이 된 올리고 카테고리 경로 — 헤더 우측 끝 뱃지, 길면 말줄임(전체는 title 툴팁) */
.cat-rec-src {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 9px;
}
.cat-rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 124px; /* 3행(38*3+gap5*2) 딱 맞게 후 스크롤 */
    overflow-y: auto;
}
.cat-rec-list::-webkit-scrollbar {
    width: 8px;
}
.cat-rec-list::-webkit-scrollbar-thumb {
    background: #d7dde3;
    border-radius: 8px;
}
.cat-rec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px; /* 추천·즐겨찾기 행 높이 통일 (내용 무관) */
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #eef2f5;
    background: #fbfcfd;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: #334155;
    transition: all 0.13s;
}
.cat-rec-item:hover {
    border-color: #99e0e0;
    background: #f0fafa;
}
.cat-rec-item.active {
    border-color: #00b3b3;
    background: #e0f7f7;
    color: #007a7a;
    font-weight: 600;
}
.cat-rec-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-rec-score {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1px 8px;
}
.cat-rec-item.active .cat-rec-score {
    color: #007a7a;
    border-color: #99e0e0;
}
.cat-rec-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.5;
}
.cat-rec-warn {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 0;
    margin-bottom: 8px;
}
.cat-rec-msg {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 즐겨찾기 섹션 (channel 카테고리 모달) — 추천 섹션과 동일 카드 구조 */
.cat-fav {
    border: 1px solid #e6ebf0;
    background: #fff;
    border-radius: 10px;
    padding: 11px 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cat-fav-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}
.cat-fav-star {
    flex-shrink: 0;
    font-size: 14px;
    color: #f59e0b;
}
.cat-fav-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.cat-fav-count {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
}
.cat-fav-chev {
    margin-left: auto;
    font-size: 13px;
    color: #9ca3af;
    transition: transform 0.15s;
}
.cat-fav-chev.open {
    transform: rotate(180deg);
}
.cat-fav-list {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 124px; /* 3행(38*3+gap5*2) 딱 맞게 후 스크롤 */
    overflow-y: auto;
}
.cat-fav-list::-webkit-scrollbar {
    width: 8px;
}
.cat-fav-list::-webkit-scrollbar-thumb {
    background: #d7dde3;
    border-radius: 8px;
}
.cat-fav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px; /* 추천 행과 동일 높이 */
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #eef2f5;
    background: #fbfcfd;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: #334155;
    transition: all 0.13s;
}
.cat-fav-item:hover {
    border-color: #99e0e0;
    background: #f0fafa;
}
.cat-fav-item.active {
    border-color: #00b3b3;
    background: #e0f7f7;
    color: #007a7a;
    font-weight: 600;
}
.cat-fav-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-fav-x {
    flex-shrink: 0;
    font-size: 13px;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.12s;
}
.cat-fav-x:hover {
    color: #ef4444;
}
.cat-fav-item.active .cat-fav-x {
    color: #66c7c7;
}
.cat-fav-empty {
    margin-top: 9px;
    padding: 14px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #eef2f5;
    border-radius: 8px;
}

/* 채널 카테고리 모달: 추천/즐겨찾기 카드가 상단을 차지 → 전체 높이 절감 + 초과 시 모달 내부 스크롤(페이지 스크롤 방지) */
.channel-category-modal .modal-body {
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
}
.channel-category-modal .category-list dl dd {
    height: 200px;
}
.channel-category-modal .category-list dl {
    margin-bottom: 0;
}

/* 올리고 카테고리 검색결과 행 hover */
.oligo-search-row {
    transition: background 0.12s;
}
.oligo-search-row:hover {
    background: var(--oligo-primary-soft, #f6f5ff);
}

/* ========== 속성템플릿 리스트/탭 strip (template-attr · tab-items-simplebar) — style.css에서 이관 ========== */
.template-attr-simplebar .form-items{
    /*margin-right:13px;*/
}
.template-attr-items{
    list-style:none;
    padding-left:4px;
    font-size:0.75rem;
    /*gap: 0.4rem;*/
    display: flex;
    flex-direction: column;
    margin-right:13px;
}

.template-attr-items li {
    display:flex;
    align-items:center;
    gap:0.4rem;
}

/* 속성템플릿 컬럼 헤더 행 */
.template-attr-head {
    margin-bottom: 4px;
}
.template-attr-head li {
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 5px;
}

.tab-items-simplebar .simplebar-content{
    display:flex;
}

.tab-items-simplebar .tab-items{
    margin: 0;
}

/* ============================================================
   Notification Panel (알림 드롭다운) — style.css에서 이관
   포인트 색은 보라(--oligo-primary, #6a61f5) 기준으로 통일
   (앱의 카운트/활성 상태 색 컨벤션과 일치)
   ============================================================ */
.notif-panel {
    position: fixed;
    z-index: 9999;
    width: 320px;
    height: 500px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e5e8eb);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    display: flex;
    flex-direction: column;
    animation: qs-fadein 0.15s ease;
    overflow: hidden;
}
/* 작업알림 전용 리디자인 (Figma 4871-28591) — 384×550, 3줄 항목 */
.notif-panel.notif-panel--job {
    width: 384px;
    height: 550px;
    border: none;
    border-radius: 30px;
    box-shadow: 0 0 5px rgba(17, 24, 39, 0.2);
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-color, #e5e8eb);
}

.notif-header-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
}

.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-confirm-all {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--oligo-primary, #6a61f5);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: opacity 0.15s;
}

.notif-confirm-all:hover { opacity: 0.7; }

.notif-bell-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--oligo-primary, #6a61f5);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    border: 2px solid var(--bg-surface, #fff);
    line-height: 1;
    box-shadow: 0 1px 4px rgba(106,97,245,0.30);
}

.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--oligo-primary, #6a61f5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    flex: 1;
    overflow-y: auto;
}

.notif-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 13px;
    color: var(--text-placeholder);
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: default;
    transition: background 0.12s;
    position: relative;
}

.notif-item:hover { background: var(--bg-input, #f4f5f7); }

.notif-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 40px;
}

.notif-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
}

.notif-icon-wrap.type-notice  { background: #fee2e2; color: #ef4444; }
.notif-icon-wrap.type-info    { background: #f1f5f9; color: #64748b; }
.notif-icon-wrap.type-job     { background: #e0f7f7; color: #009090; }
.notif-icon-wrap.type-job_status { background: #eff6ff; color: #3b82f6; }
.notif-icon-wrap.type-warning { background: #fff7ed; color: #f97316; }
.notif-icon-wrap.type-error   { background: #fee2e2; color: #ef4444; }

.notif-type-label {
    font-size: 10px;
    color: #94a3b8;
}

.notif-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-message {
    font-size: 13px;
    color: var(--text-heading);
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-item.unread .notif-message { font-weight: 600; }

.notif-time {
    font-size: 11px;
    color: var(--text-placeholder, #94a3b8);
}

.notif-right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: 34px;
}

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oligo-primary, #6a61f5);
    flex-shrink: 0;
    margin-top: 4px;
}

.notif-footer {
    border-top: 1px solid var(--border-color, #e5e8eb);
    padding: 10px 16px;
    display: flex;
    justify-content: center;
}

.notif-manage-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--text-muted, #8b95a1);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.notif-manage-btn:hover {
    background: var(--bg-input, #f4f5f7);
    color: var(--text-heading);
}

/* ── 작업알림 아이템 (Figma 4776-33446) ── */
/* 헤더/리스트 좌우 패딩 30, 우측은 스크롤바(10) 포함해 30 (JobListModal 과 동일 규칙) */
.notif-panel--job .notif-header { height: 64px; flex-shrink: 0; padding: 20px 30px; }
.notif-panel--job .notif-header-title { font-size: 20px; font-weight: 700; color: #1f2937; letter-spacing: -0.5px; }
.notif-panel--job .notif-header-actions { gap: 10px; }
.notif-panel--job .notif-confirm-all { font-size: 16px; font-weight: 500; color: #6a61f5; }
.notif-panel--job .notif-badge {
    min-width: 0; height: auto; padding: 2px 10px; border-radius: 50px;
    font-size: 14px; font-weight: 700;
}
.notif-panel--job .notif-list { padding: 0; scrollbar-gutter: stable; }
.notif-panel--job .notif-list::-webkit-scrollbar { width: 10px; }
.notif-panel--job .notif-list::-webkit-scrollbar-thumb {
    background: #d7dde3; border-radius: 8px;
    border: 1px solid transparent; background-clip: padding-box;
}
.notif-job-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 20px 30px; /* 좌30 / 우20+스크롤바10=30 (Figma px-30 py-20) */
    border-bottom: 1px solid #e5e7eb; /* 항목 구분선 */
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
}
.notif-job-item:hover { background: #f6f5ff; }
.notif-job-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.notif-job-row1 { display: flex; align-items: center; gap: 10px; width: 100%; }
.notif-job-chip {
    flex-shrink: 0;
    background: #f3f4f6; color: #00b3b3;
    font-size: 10px; font-weight: 600;
    padding: 4px 6px; border-radius: 10px; white-space: nowrap;
}
.notif-job-time { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: #9ca3af; white-space: nowrap; }
/* ② 배치명/작업명 */
.notif-job-name {
    max-width: 100%;
    font-size: 16px; font-weight: 700; line-height: 17.5px; color: #1f2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ③ 채널 로고 + 계정명 */
.notif-job-vendor { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.notif-job-vendor__logo { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #e5e7eb; border-radius: 4px; object-fit: cover; }
.notif-job-vendor__name {
    font-size: 14px; font-weight: 500; color: #1f2937; letter-spacing: -0.7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-job-count { flex-shrink: 0; font-size: 16px; font-weight: 500; color: #6b7280; white-space: nowrap; }
.notif-job-count strong { font-size: 18px; font-weight: 700; }
.notif-job-status {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 45px; height: 30px; padding: 0 10px; border-radius: 30px;
    font-size: 14px; font-weight: 500; white-space: nowrap;
}
.notif-job-status.ok   { background: #dbf3ea; color: #00a96c; }
.notif-job-status.fail { background: #ffebed; color: #ff3149; }
.notif-job-dot {
    position: absolute; top: 38px; right: 20px; /* Figma: 콘텐츠 우측끝, 카운트/상태칩 위 */
    width: 6px; height: 6px; border-radius: 50%;
    background: #6a61f5;
}

/* 더보기 */
.notif-more { display: flex; justify-content: center; padding: 8px 0; }
.notif-more-btn {
    border: none; background: transparent;
    font-size: 13px; color: #6a61f5; cursor: pointer; padding: 6px 12px;
    font-family: inherit; border-radius: 6px; transition: background 0.12s;
}
.notif-more-btn:hover:not(:disabled) { background: #f6f5ff; }
.notif-more-btn:disabled { color: #9ca3af; cursor: default; }

/* 더보기 (페이징) */
.notif-more {
    display: flex;
    justify-content: center;
    padding: 8px 16px 4px;
}
.notif-more-btn {
    width: 100%;
    border: 1px solid var(--border-color, #e5e8eb);
    background: transparent;
    border-radius: 8px;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #8b95a1);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.notif-more-btn:hover:not(:disabled) {
    background: var(--bg-input, #f4f5f7);
    color: var(--oligo-primary, #6a61f5);
}
.notif-more-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   ImageUpload (antd Upload picture-card 커스터마이즈) — style.css에서 이관
   .image-upload 스코프에 한정 (다른 antd Upload에는 영향 없음)
   ============================================================ */
/* 추가(빈) 카드: 점선 테두리 + 라운드 + 연회색 배경, hover 시 teal */
.image-upload .ant-upload.ant-upload-select {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    transition: border-color 0.15s, background 0.15s;
}
.image-upload .ant-upload.ant-upload-select:hover {
    border-color: var(--oligo-primary, #6a61f5) !important;
    background: #f3f4f6;
}
/* + 아이콘 (기존 .file-plus 이관: 색 + 크기) */
.image-upload .file-plus {
    color: #c7cdd6;
    font-size: 32px;
}
/* 업로드된 썸네일 카드도 동일 라운드 */
/* 썸네일 hover 의 편집 아이콘(FontAwesome) — antd 는 자기 아이콘(.anticon)만 흰색으로 칠해서
   편집 아이콘만 검게 나와 어두운 사진에서 안 보였다 → 미리보기·삭제와 같은 흰색·크기로 */
.image-upload .ant-upload-list-item-actions .svg-inline--fa {
    color: #fff;
    font-size: 16px;
}
.image-upload .ant-upload-list-item,
.image-upload .ant-upload-list-item-container {
    border-radius: 10px;
}

/* 카테고리 로딩 오버레이 (ChannelCategory · SsgDisplayCategoryModal 공용) — style.css에서 이관 */
.loading-spin {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center !important;
    background-color: rgba(220, 220, 220, 0.6);
}

/* ============================================================
   계단식 카테고리 셀렉트 (ChannelCategory select 모드, ImportJobModal)
   depth별 form-select 사이에 › 구분자 + 셀렉트 룩 통일
   ============================================================ */
.cate-cascade { align-items: center; }
/* 각 depth 래퍼(.position-relative) 폭을 셀렉트와 '동일하게 고정' →
   로딩 오버레이(.loading-spin: absolute inset:0)가 딱 셀렉트 크기(130)만 덮음.
   (내용폭 auto가 아니라 고정폭이라, 무슨 일이 있어도 130px 초과 안 함) */
/* 개수(4~5개, 채널별)에 상관없이 항상 한 줄: 남는 폭을 균등 분배(flex).
   min-width:0 로 필요 시 셀렉트가 줄어들어 줄바꿈 없이 꽉 채움. */
.cate-cascade > .position-relative {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}
.cate-cascade .csel { width: 100%; }
/* 두 번째 이후 앞에 › 구분자 — 절대배치라 폭엔 영향 없음(로딩 범위=셀렉트폭 유지) */
.cate-cascade > .position-relative + .position-relative { margin-left: 10px; }
.cate-cascade > .position-relative + .position-relative::before {
    content: '›';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1;
}
/* 로딩 오버레이도 셀렉트에 맞춰 라운드 */
.cate-cascade .loading-spin { border-radius: 8px; }

/* ── 템플릿 상단 탭 (OA04/OA05) ── */
.tmpl-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb; /* Figma: 구분선 neutral/200 2px */
    /* 헤더와 30 간격 (page-body 상단 패딩 16 + 14) */
    margin-top: 14px;
    margin-bottom: 16px;
}
.tmpl-tab {
    position: relative;
    width: 220px;
    text-align: center;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
}
.tmpl-tab:hover {
    color: #6b7280;
}
.tmpl-tab.active {
    color: #6a61f5;
    font-weight: 700;
}
.tmpl-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px; /* tmpl-tabs 하단 구분선(2px) 위로 겹쳐 정렬 */
    height: 4px; /* Figma: 활성 탭 밑줄 border-b-4 = 4px */
    background: #6a61f5;
}
/* 그리드 아이콘 버튼(복사 등): 테두리 없는 회색 아이콘 */
.grid-icon-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
}
.grid-icon-btn:hover {
    color: #6a61f5;
}
/* CustomSelect 옵션/트리거 내 채널 mini 로고 */
.csel-ch-mini {
    height: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
}
/* ── 템플릿 모달(OA04): 채널 선택/빈상태/토글/저장 ── */
.template-modal .tmpl-ch-label {
    min-width: 40px;
    font-size: 14px;
    color: #6b7280;
}
.template-modal .tmpl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 400px;
    color: #9ca3af;
    font-size: 14px;
}
/* 사용여부 토글: OB01 것 그대로(FA fa-toggle-large) + 라벨 좌 / 토글 맨 오른쪽 */
.template-modal .form-item.tmpl-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.template-modal .ob01-toggle {
    font-size: 40px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    margin: -6px 0;
}
.template-modal .ob01-toggle.on {
    color: #6a61f5;
}
.template-modal .ob01-toggle:not(.on) {
    transform: scaleX(-1);
}
.template-modal .tmpl-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 18px;
    font-size: 18px;
    font-weight: 700;
    background: #6a61f5;
    border: none;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.template-modal .tmpl-save-btn:hover:not(:disabled) {
    background: #574fd6;
}
.template-modal .tmpl-save-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ═══ 템플릿 정보(우측 tmpt-set) 폰트/사이즈 — Figma 4529:30226 ═══ */
/* 헤더: 제목 20 Bold, X 21 */
.template-modal .tmpt-set .tmpl-header h1.tmpl-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.5px;
}
.template-modal .tmpt-set .tmpl-header svg {
    font-size: 21px !important;
    color: #9ca3af;
}
/* 입력 라벨(템플릿명/메모/사용여부): 16 / #6b7280 */
.template-modal .tmpt-set .form-items .form-item .col-form-label {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
}
/* 입력칸: h40, 테두리, 라운드8, 16 */
.template-modal .tmpt-set .form-item .form-control {
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
}
/* '속성 템플릿 불러오기' 타이틀: 16 / #6b7280 */
.template-modal .tmpt-set div.tmpl-attr-title {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
}
/* 표 헤더 셀: 12 / #6b7280 (속성이름/정보리스트/적용/주속성 4개 셀 div에 직접 적용) */
.template-modal .tmpt-set .template-attr-head li,
.template-modal .tmpt-set .template-attr-head li > div {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}
/* 표 행 속성이름: 14 / #1f2937 (헤더는 제외 — 헤더 ul이 template-attr-items 클래스도 가짐) */
.template-modal .tmpt-set .template-attr-items:not(.template-attr-head) li .w-80p {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
/* 정보리스트 select: h30, 라운드8 */
.template-modal .tmpt-set .template-attr-items .form-select-sm {
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
}
/* ── 우측 패널 섹션 레이아웃 (Figma: 헤더/입력/속성/푸터, 사이 full-width border) ── */
.template-modal .tmpt-set > .tmpl-header {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 30px !important;
    border-bottom: 1px solid #e5e7eb;
}
.template-modal .tmpt-set > .tmpl-header > .d-flex {
    width: 100%;
}
/* 본문: 좌우 패딩 없음 + flex-column(속성섹션이 남은 높이 채우고 표가 내부 스크롤) */
.template-modal .tmpt-set > .tmpl-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 20px 0 0;
    overflow: hidden;
}
/* ── 입력 섹션 (템플릿명/메모/사용여부) ── */
.template-modal .tmpt-set .tmpl-sec--input {
    flex: 0 0 auto;
    padding: 0 0 10px;
    border-bottom: 1px solid #e5e7eb;
}
.template-modal .tmpt-set .tmpl-sec--input .form-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* ── 속성 섹션: 남은 높이 채우고 표 내부 스크롤 ── */
.template-modal .tmpt-set .tmpl-sec--attr {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
}
.template-modal .tmpt-set .tmpl-sec--attr > .tmpl-attr-title {
    flex: 0 0 auto;
    padding: 0 30px;
    margin: 0 0 10px 0;
}
.template-modal .tmpt-set > .tmpl-footer {
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}
/* 입력 3행(템플릿명/메모/사용여부): 좌우 30, OB01식 label+입력 (간격은 form-items gap) */
.template-modal .tmpt-set .form-items .form-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 30px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.template-modal .tmpt-set .form-items .form-item > .col-form-label {
    flex: 0 0 auto;
    margin: 0;
}
.template-modal .tmpt-set .form-items .form-item > .form-item-input {
    flex: 1;
    min-width: 0;
}
.template-modal .tmpt-set .form-items .form-item > .form-item-input .form-control {
    width: 100%;
}
/* 속성 표: 좌우 30 / 아래 20 인셋, 남은 높이 채움 */
.template-modal .tmpt-set .tmpl-attr-table {
    margin: 0 30px 20px;
}
/* ── 속성 표: wrapper 박스 + 컬럼/행 구분선 (Figma 4529:31689) ── */
.template-modal .tmpt-set .tmpl-attr-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.template-modal .tmpt-set .tmpl-attr-table .template-attr-head,
.template-modal .tmpt-set .tmpl-attr-table .template-attr-items {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
/* 헤더 ul: 고정(스크롤 X) + 전체 하단선 */
.template-modal .tmpt-set .tmpl-attr-table > .template-attr-head {
    flex: 0 0 auto;
    border-bottom: 1px solid #e5e7eb;
}
.template-modal .tmpt-set .template-simplebar {
    margin: 0;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}
/* 속성 표 스크롤바: Figma 룩 (우측 회색 라운드 슬라이더, 상시 노출) */
.template-modal .tmpt-set .template-simplebar .simplebar-track.simplebar-vertical {
    width: 10px;
    right: 1px;
    background: transparent;
}
.template-modal .tmpt-set .template-simplebar .simplebar-scrollbar::before {
    left: 2px;
    right: 2px;
    background: #d1d5db;
    border-radius: 10px;
    opacity: 1;
}
.template-modal .tmpt-set .tmpl-attr-table li {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0;
    align-items: stretch;
    border: 0;
}
/* 셀: 컬럼 구분선(오른쪽). border-box로 padding이 폭에 포함 → 초과/잘림 방지 */
.template-modal .tmpt-set .tmpl-attr-table li > div {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 6px;
    border-right: 1px solid #e5e7eb;
    background: #fff;
}
.template-modal .tmpt-set .tmpl-attr-table li > div:last-child {
    border-right: 0;
}
/* 헤더 행: 회색 bg + 하단선 */
.template-modal .tmpt-set .template-attr-head li > div {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
/* 데이터 행: 하단 구분선 */
.template-modal .tmpt-set .template-attr-items > li > div {
    border-bottom: 1px solid #e5e7eb;
}
.template-modal .tmpt-set .template-attr-items > li:last-child > div {
    border-bottom: 0;
}
/* 적용(체크)된 행: 연보라 강조 */
.template-modal .tmpt-set .template-attr-items > li:has(.form-check-input:checked) > div {
    background: #f6f5ff;
}
/* 체크박스 보라 */
.template-modal .tmpt-set .tmpl-attr-table .form-check-input:checked {
    background-color: #6a61f5;
    border-color: #6a61f5;
}
/* 주속성 별표 버튼: 30×30 라운드8. 비메인 = 회색바탕/회색별, 메인 = 연보라바탕/보라별 */
.template-modal .tmpt-set .template-attr-items .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
}
.template-modal .tmpt-set .template-attr-items .btn-icon.text-muted {
    color: #9ca3af !important;
}
/* 주속성 별표: 메인 = 연보라 바탕 + 보라 테두리 + 보라 채움 별 */
.template-modal .tmpt-set .template-attr-items .btn-icon.text-warning {
    background: #f6f5ff;
    border-color: #dfddff;
    color: #6a61f5 !important;
}
/* 컬럼폭 (속성이름90 / 정보리스트140 / 적용·주속성74) */
.template-modal .tmpt-set .tmpl-attr-table li > .w-80p {
    flex: 1 1 auto;
    min-width: 84px;
}
.template-modal .tmpt-set .tmpl-attr-table li > .flex-grow-1 {
    flex: 0 0 140px;
    width: 140px;
    min-width: 0;
}
.template-modal .tmpt-set .tmpl-attr-table li > .w-50p {
    flex: 0 0 74px;
    width: 74px;
}
.template-modal .tmpt-set .tmpl-attr-table li > .w-50p:last-child {
    flex: 0 0 76px;
    width: 76px;
}
.template-modal .tmpt-set .tmpl-attr-table li > .pe-1 {
    flex: 0 0 40px;
    width: 40px;
    padding-right: 6px !important;
}
/* 정보리스트 select: h30, 라운드8, #e5e7eb, 12/#6b7280 (비활성 회색) */
.template-modal .tmpt-set .tmpl-attr-table .form-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    background-color: #fff;
    width: 100%;
    min-width: 0;
}
.template-modal .tmpt-set .tmpl-attr-table .form-select:disabled {
    background-color: #e5e7eb;
    border-color: #e5e7eb;
    color: #9ca3af;
}
/* 정보리스트 CustomSelect: 행 높이 30, 폰트 12, 라운드8 */
.template-modal .tmpt-set .tmpl-attr-table .tmpl-attr-csel .csel-trigger {
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border-color: #e5e7eb;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937; /* 선택된 값: neutral 800 (진하게) */
}
.template-modal .tmpt-set .tmpl-attr-table .tmpl-attr-csel .csel-label {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937; /* neutral 800 */
}
/* placeholder(선택 전)만 옅은 회색 */
.template-modal .tmpt-set .tmpl-attr-table .tmpl-attr-csel .csel-trigger.is-placeholder {
    color: #6b7280;
}
.template-modal .tmpt-set .tmpl-attr-table .tmpl-attr-csel .csel-trigger:disabled {
    background-color: #e5e7eb; /* neutral 200 */
    border-color: #e5e7eb;
    color: #9ca3af; /* neutral 400 */
}
/* 비활성 시 라벨 글자도 neutral 400 (라벨 자체 색이 이기지 않도록 덮음) */
.template-modal .tmpt-set .tmpl-attr-table .tmpl-attr-csel .csel-trigger:disabled .csel-label {
    color: #9ca3af;
}
/* 정보리스트 드롭다운 목록(body로 포탈됨): 트리거(120)보다 넉넉하게 */
.csel-menu--portal.tmpl-attr-csel {
    min-width: 180px;
    width: max-content;
    max-width: 320px;
    font-size: 13px;
}
.csel-menu--portal.tmpl-attr-csel .csel-option {
    padding: 8px 12px;
    font-size: 13px;
}
/* 적용 버튼: 45×30, 흰바탕 #d1d5db 테두리, 14/#6b7280 (비활성 bg #d1d5db) */
.template-modal .tmpt-set .tmpl-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 30px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.template-modal .tmpt-set .tmpl-apply-btn:hover:not(:disabled) {
    background: #f3f4f6;
}
.template-modal .tmpt-set .tmpl-apply-btn:disabled {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #6b7280;
}
/* 탭 아래 "수정된 정보: N건" */
/* ── 속성 템플릿 적용 안내 모달 (Figma 4529-31135) ── */
.tmpl-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.4);
}
/* 확인/알림(MyAlert)·sweetalert 은 공지 배너(11000)·공지 모달(12000)보다 위로 */
.my-alert-overlay {
    z-index: 13000 !important;
}
.swal2-container {
    z-index: 13000 !important;
}
.tmpl-guide-pop {
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(17, 24, 39, 0.2);
    text-align: center;
}
/* 저장 확인 팝업만 하단 패딩 제거 (닫기 버튼 69가 맨 아래에 붙음, Figma 4632-18505) */
.tmpl-guide-pop--save {
    padding-bottom: 0;
}

/* 되돌리기 어려운 동작의 확인 버튼. 기본(primary)과 같은 색이면
   누르기 전에 한 번 더 생각하게 만드는 신호가 사라진다.
   ⚠️ 이 블록이 `.tmpl-guide-btn`(아래 정의)보다 앞에 있어, 단일 클래스끼리는 특이도가 같아
   뒤에 오는 기본 배경이 이겨 버렸다(= 삭제 버튼이 빨강이 아니라 보라로 보였다).
   선언 순서에 기대지 않도록 클래스를 겹쳐 특이도를 올린다. */
.tmpl-guide-btn.tmpl-guide-btn--danger {
    background: var(--oligo-danger, #ff3149);
}
.tmpl-guide-btn.tmpl-guide-btn--danger:hover {
    background: #e0243c;
}
.tmpl-guide-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tmpl-guide-icon {
    /* 45 → 28. 아이콘이 제목보다 두 배 이상 크면 시선이 아이콘에 먼저 붙어
       정작 읽어야 할 제목과 본문이 뒤로 밀린다. */
    font-size: 28px;
    color: #e5e7eb; /* neutral 200 */
}
.tmpl-guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937; /* neutral 800 */
}
.tmpl-guide-body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #6b7280; /* neutral 500 */
}
.tmpl-guide-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 50px;
    background: #6a61f5; /* primary */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.tmpl-guide-btn:hover {
    background: #574fd6;
}
/* 저장 확인 팝업: 저장하기 + 닫기 (Figma 4632-18505) */
.tmpl-guide-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tmpl-guide-actions .tmpl-guide-btn {
    width: 100%;
}
.tmpl-guide-close {
    width: 100%;
    height: 69px; /* Figma 4632-18505: 닫기 버튼 높이 69 */
    padding: 0;
    border: 0;
    background: transparent;
    color: #9ca3af; /* neutral 400 */
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}
.tmpl-guide-close:hover {
    color: #6b7280;
}

.template-modal .tmpl-modif-summary {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 13px;
    color: #6b7280;
}
.template-modal .tmpl-modif-summary .tmpl-modif-count {
    margin: 0 2px;
    color: #6a61f5; /* 숫자 강조: primary */
    font-weight: 700;
}

/* ── 상품 속성 템플릿 모달(OA05) 전용 ── */
/* 요약바: 수정된정보(좌) + 필수만 보기(우) */
.template-modal .tmpl-attr-summary {
    justify-content: space-between;
}
.template-modal .tmpl-req-only {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    color: #6b7280;
    cursor: pointer;
    font-weight: 400;
}
.template-modal .tmpl-req-only .form-check-input {
    margin: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
}
.template-modal .tmpl-req-only .form-check-input:checked {
    background-color: #6a61f5;
    border-color: #6a61f5;
}
/* 우측 입력섹션: 뒤에 표가 없으므로 하단 구분선 제거 */
.template-attr-modal .tmpt-set .tmpl-sec--input {
    border-bottom: 0;
}
/* (1) attr 모달 전용: tmpt-content 상단 패딩 제거(헤더가 위에 딱 붙게 — OA04와 분리) */
.template-attr-modal .template .tmpt-content {
    padding-top: 0;
}
/* 좌측 헤더 높이를 우측 '템플릿 정보'(64)와 통일 */
.template-attr-modal .tmpt-content > .tmpl-header {
    min-height: 64px;
    height: 64px;
    padding: 0 30px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}
/* (3) 표 헤더행(item-title) 높이 40 확실히 — OA04/OA05 공통(.template-modal) */
.template-modal .template-attr-simplebar .form-items > .form-item.item-title {
    height: 40px;
    min-height: 40px;
}
/* (2) 속성유형 select 높이를 우측 입력필드(40)와 통일 */
.template-attr-modal .tmpt-set .tmpl-sec--input .form-control,
.template-attr-modal .tmpt-set .tmpl-sec--input .csel-trigger {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px;
}

/* ============================================================
   스마트스토어 마켓 미연결 진입 안내 페이지 (/connect-guide)
   - 로그인 없이 접근하는 독립 화면 (App.jsx 인증 가드 앞에서 렌더)
   ============================================================ */
.connect-guide {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #eceef5 100%);
}
.connect-guide__card {
    width: 100%;
    max-width: 680px;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    padding: 44px 48px;
}
.connect-guide__logo {
    height: 26px;
    width: auto;
    margin-bottom: 22px;
}
.connect-guide__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.connect-guide__head-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    /*background: #eef2ff;*/
    color: #6366f1;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.connect-guide__title {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.01em;
}
.connect-guide__step {
    display: flex;
    gap: 12px;
    padding: 22px 20px;
    border: 1px solid #edf0f4;
    border-radius: 14px;
    background: #fcfcfd;
    margin-bottom: 14px;
}
.connect-guide__step:last-child {
    margin-bottom: 0;
}
.connect-guide__step-no {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.connect-guide__step-body {
    flex: 1;
    min-width: 0;
}
.connect-guide__step-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.4;
}
.connect-guide__step-text {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 12px;
}
/* 입력 필드 */
.connect-guide__field {
    margin-top: 14px;
}
.connect-guide__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.connect-guide .form-control {
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    padding: 0 12px;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.connect-guide .form-control::placeholder {
    color: #9ca3af;
}
.connect-guide .form-control:hover {
    border-color: #d1d5db;
}
.connect-guide .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}
/* 읽기전용 스토어명 — 편집 불가, 클릭해도 강조/포커스 없음 */
.connect-guide__readonly-input,
.connect-guide__readonly-input:hover,
.connect-guide__readonly-input:focus {
    background: #f4f6f8;
    color: #6b7280;
    border-color: #e5e7eb;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}
/* 에러 */
.connect-guide__error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    padding: 11px 13px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 13px;
    color: #b91c1c;
    line-height: 1.5;
}
/* 제출 버튼 */
.connect-guide__submit {
    width: 100%;
    margin-top: 18px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    background: #6366f1;
    border-color: #6366f1;
    transition: background-color 0.15s, transform 0.05s;
}
.connect-guide__submit:hover {
    background: #4f46e5;
    border-color: #4f46e5;
}
.connect-guide__submit:active {
    transform: translateY(1px);
}
.connect-guide__submit:disabled {
    background: #a5b4fc;
    border-color: #a5b4fc;
    opacity: 1;
}
/* 안내 문구 */
.connect-guide__note {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}
.connect-guide__note b {
    color: #4b5563;
}
/* 문의(전화) */
.connect-guide__contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    padding: 8px 14px;
    background: #eef2ff;
    border-radius: 8px;
}
.connect-guide__contact:hover {
    background: #e0e7ff;
    text-decoration: none;
}

/* connect-guide → /OB01 스마트스토어 연결 안내 배너 (네이버 마켓 미연결 진입 자동채움 힌트) */
.ob01-ss-hint {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 10px;
}
.ob01-ss-hint__title {
    font-size: 14px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 6px;
}
.ob01-ss-hint__row {
    font-size: 13px;
    color: #334155;
    line-height: 1.7;
}
.ob01-ss-hint__row b {
    color: #111827;
}
.ob01-ss-hint__desc {
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}

/* ============================================================
   템플릿 모달(OA04 상품 템플릿 · OA05 속성 템플릿) — 모달이 1710 보다 좁은 구간
   좌 폼 1222 + 우 설정 488 을 고정폭으로 나란히 놓아서, 모달이 그보다 좁으면
   (화면 < 1750) 오른쪽 패널이 모달 밖으로 잘렸다. 실측 1600 에서 121px,
   1366 에서 355px, 1100 에서는 패널 전체가 사라졌다 — 그 패널에 닫기(X)와
   '템플릿 저장하기'가 있고 모달은 keyboard={false} 라 ESC 로도 못 닫는다.
   오른쪽 설정 패널은 그대로 두고 왼쪽 폼이 남는 폭만 쓴다.
   ≤992 는 아래 세로 스택 블록이 따로 받는다.
   ============================================================ */
@media (max-width: 1749px) {
    .template-modal .template .tmpt-content {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }
    /* 제목 옆 '*(필수) 안내' 문구가 인라인 flexShrink:0 이라 폼이 좁아지면 오른쪽으로 새어 나간다 */
    .template-modal .tmpt-content > .tmpl-header > .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .template-modal .tmpt-content > .tmpl-header > .d-flex.justify-content-between > span {
        flex-shrink: 1 !important;
    }
    /* 입력·셀렉트 450 고정 — 폼이 좁아지면(1100 에서 값 칸 434) 16px 씩 넘친다. 자리가 있으면 450 그대로 */
    .template-modal .template-attr-simplebar .form-item-input .form-control:not(textarea):not(.max),
    .template-modal .template-attr-simplebar .form-item-input .form-select:not(.max),
    .template-modal .template-attr-simplebar .form-item-input .csel:not(.max):not(.category) {
        max-width: 100%;
    }
    /* [입력 450][원] · [달력 210][~][달력 210] 이 값 칸(1100 에서 434)보다 길어 flex-wrap 으로
       단위·두 번째 날짜가 다음 줄로 떨어졌다. basis 0 + 원래 폭 상한으로 바꿔 줄바꿈 없이 같이 줄게 한다
       (자리가 넉넉하면 450·210 그대로). */
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .form-control:not(textarea):not(.max) {
        flex: 1 1 0;
        max-width: 450px;
        min-width: 0 !important;
    }
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .ms-1,
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .mx-1,
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .btn {
        flex: 0 0 auto;
    }
    .template-modal .template-attr-simplebar .form-item-input > .calendar {
        flex: 1 1 0;
        max-width: 210px;
        min-width: 0;
    }
    .template-modal .template-attr-simplebar .form-item-input > .calendar .form-control:not(.max) {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* 셀렉트 두 개를 한 줄에 두는 행(지그재그 사이즈 카테고리 depth1+depth2 = 450+8+450) —
       값 칸이 908 보다 좁으면 두 번째가 474px 까지 폼 밖으로 나갔다. 둘이 나눠 줄어든다. */
    .template-modal .template-attr-simplebar .form-item-input > .d-flex:not(.flex-column) {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    .template-modal .template-attr-simplebar .form-item-input > .d-flex:not(.flex-column) > .csel:not(.max):not(.category) {
        flex: 1 1 0;
        min-width: 0;
        max-width: 450px;
    }
    /* w-*p 유틸은 min-width 까지 !important 로 건다 — 그것부터 풀어야 max-width 가 먹는다 */
    .template-modal .template-attr-simplebar .form-item-input .w-300p,
    .template-modal .template-attr-simplebar .form-item-input .w-400p,
    .template-modal .template-attr-simplebar .form-item-input .w-450p,
    .template-modal .template-attr-simplebar .form-item-input .w-500p {
        min-width: 0 !important;
        max-width: 100%;
    }
}
@media (min-width: 993px) and (max-width: 1439px) {
    /* 폼 몫을 늘린다 — 설정 패널 488→400, 속성 라벨 칸 250→180 */
    .template-modal .template .tmpt-set { width: 400px; }
    .template-modal .template-attr-simplebar .form-items .form-item .w-180p,
    .template-modal .template-attr-simplebar .form-items .form-item .w-180p.col-form-label {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}
/* 설정 패널이 400(노트북)이나 화면폭(모바일 ~340)일 때 */
@media (max-width: 1439px) {
    /* 속성 표 컬럼(체크40/이름84+/목록140/적용74/주속성76 = 414)이 400 패널 안쪽(338)을 넘어
       '주 속성' 칸이 가로 스크롤 뒤로 숨었다 → 이름·적용·주속성은 줄이고 목록이 남는 폭을 쓴다 */
    .template-modal .tmpt-set .tmpl-attr-table li > .w-80p {
        flex: 0 0 88px;
        padding-left: 2px;
        padding-right: 2px;
        white-space: nowrap; /* '기본상품정/보' 로 쪼개지지 않게 */
        letter-spacing: -0.3px;
    }
    .template-modal .tmpt-set .tmpl-attr-table li > .flex-grow-1 { flex: 1 1 0; width: auto; }
    .template-modal .tmpt-set .tmpl-attr-table li > .w-50p,
    .template-modal .tmpt-set .tmpl-attr-table li > .w-50p:last-child {
        flex: 0 0 58px;
        width: 58px !important;
        min-width: 0 !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    .template-modal .tmpt-set .tmpl-attr-csel {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   반응형(≤992) — 모달
   모달은 #layout-wrapper 밖(body 포탈)이라 셸 규칙이 닿지 않는다.
   부트스트랩 .modal 자체가 세로 스크롤을 처리하므로 여기선 '가로로
   화면을 넘기는' 고정폭만 푼다.
   ============================================================ */
@media (max-width: 992px) {
    /* 공통 상한 — max-width 가 화면보다 큰 모달 전부 커버 */
    .modal-dialog {
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto;
    }

    /* 고정 width 로 상한을 무시하던 3곳 */
    /* 1) 작업목록(sm): .modal-content 에 width:650px */
    .job-list-modal--sm .modal-content { width: 100%; }
    /* 2) 템플릿 모달: dialog width:1710 + 내부 tmpt-content width:1222 */
    .template-modal .modal-dialog { width: auto; max-height: calc(100dvh - 24px); }
    .template-modal .modal-dialog .modal-content { max-height: calc(100dvh - 24px); }
    .template-modal .template { flex-direction: column; }
    .template-modal .template .tmpt-content { width: 100%; flex: 1 1 auto; }
    .template-modal .modal-dialog .goods-form-simplebar { height: auto; max-height: calc(100dvh - 240px); }

    /* 좌측 설정 패널이 width:488px 고정이라 340px 모달에서 제목이 40px 로 눌려
       '채/널/별/상/품' 처럼 한 자씩 쪼개졌다. 폭을 풀고 헤더를 세로로 쌓는다. */
    .template-modal .template .tmpt-set { width: 100%; }
    .template-modal .tmpt-content > .tmpl-header { padding: 0 16px 16px; }
    .template-modal .tmpl-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .template-modal .tmpl-header h1.tmpl-title {
        flex: 0 0 100%;
        word-break: keep-all;
        font-size: 18px;
    }

    /* 탭: 94px 고정 × 6~7개가 한 줄에 들어갈 수 없다 → 가로 스크롤 */
    .template-modal .tmpl-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
    .template-modal .tmpl-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 속성템플릿 모달은 입력·라벨 폭을 엘리먼트 단위로 !important 고정한다
       (셀렉트·달력 450px, 라벨 250px). 유틸(w-*p) 해제와 별개라 따로 풀어야 한다. */
    .template-modal .template-attr-simplebar .form-item-input .form-select:not(.max),
    .template-modal .template-attr-simplebar .form-item-input .csel:not(.max):not(.category),
    .template-modal .template-attr-simplebar .form-item-input .calendar .form-control:not(.max) {
        width: 100% !important;
        min-width: 0 !important;
    }
    .template-modal .template-attr-simplebar .form-items .form-item .w-180p.col-form-label,
    .template-modal .template-attr-simplebar .form-items .form-item .col-form-label {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* ── 템플릿 모달: 스크롤을 모달 하나로 ──
       세로로 쌓으면 좌 폼(높이 100dvh-60 고정)이 모달 높이를 다 먹고, 모달은 overflow:hidden 이라
       아래 설정 패널(템플릿명·닫기·'템플릿 저장하기')에 스크롤로도 닿을 수 없었다.
       패널 높이 고정과 내부 스크롤(SimpleBar)을 풀고 .modal-content 가 통째로 스크롤한다.
       탭 줄은 sticky 로 남겨 폼을 내려도 탭을 바꿀 수 있게 한다. */
    .template-modal .modal-dialog .modal-content {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .template-modal .template { position: relative; }
    .template-modal .template .tmpt-content,
    .template-modal .template .tmpt-set {
        height: auto;
        overflow: visible;
    }
    .template-modal .template .tmpt-content .tmpl-body,
    .template-modal .template .tmpt-set .tmpl-body,
    .template-modal .tmpt-set .tmpl-sec--attr,
    .template-modal .tmpt-set .tmpl-attr-table {
        flex: 0 0 auto;
        min-height: 0;
    }
    .template-modal .template .tmpt-content .tmpl-body,
    .template-modal .template .tmpt-set .tmpl-body,
    .template-modal .tmpt-content .tmpl-content-body {
        overflow: visible;
    }
    .template-modal .tmpt-content .tmpl-content-body { min-height: 0; }
    .template-modal .tmpt-content .tmpl-empty { flex: 0 0 auto; padding: 48px 0; }
    /* 폼·속성표의 SimpleBar 는 높이 근거를 잃으면 0 으로 무너진다 → 내용 높이 그대로 펼친다.
       탭 줄(.tab-items-simplebar)은 가로 스크롤이 필요해 건드리지 않는다. */
    .template-modal .template-attr-simplebar,
    .template-modal .template-simplebar,
    .template-modal .template-attr-simplebar .simplebar-wrapper,
    .template-modal .template-simplebar .simplebar-wrapper,
    .template-modal .template-attr-simplebar .simplebar-mask,
    .template-modal .template-simplebar .simplebar-mask,
    .template-modal .template-attr-simplebar .simplebar-offset,
    .template-modal .template-simplebar .simplebar-offset,
    .template-modal .template-attr-simplebar .simplebar-content-wrapper,
    .template-modal .template-simplebar .simplebar-content-wrapper {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        position: static !important;
        overflow: visible !important;
    }
    /* 원래 flex:1 1 0 (남은 높이 채움) — 부모 높이가 auto 가 되면 basis 0 그대로 0 으로 접힌다 */
    .template-modal .template-attr-simplebar,
    .template-modal .template-simplebar {
        flex: 0 0 auto !important;
    }
    .template-modal .template-attr-simplebar .simplebar-placeholder,
    .template-modal .template-simplebar .simplebar-placeholder,
    .template-modal .template-attr-simplebar .simplebar-track,
    .template-modal .template-simplebar .simplebar-track {
        display: none !important;
    }
    .template-modal .tmpt-content .tab-items-simplebar {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
    }
    /* 표 머리글(세부속성/값)의 sticky 는 탭 줄 밑으로 파고든다 — 흐름에 둔다 */
    .template-modal .form-items .form-item.item-title { position: static; }

    /* 닫기(X)는 설정 패널 머리에 있어 세로 스택이면 모달 맨 아래로 내려간다 → 모달 우상단에 둔다 */
    .template-modal .tmpt-set > .tmpl-header .icon-x-24 {
        position: absolute;
        top: 16px;
        right: 12px;
        z-index: 4;
    }
    .template-modal .tmpt-content > .tmpl-header { padding-right: 44px; }
    .template-modal .tmpt-content > .tmpl-header > .d-flex.justify-content-between > span {
        text-align: left !important;
    }
    /* 설정 패널은 폼 아래 별도 구역 — 회색 띠로 끊는다(UP111 과 같은 처리) */
    .template-modal .template .tmpt-set {
        border-left: 0;
        border-top: 8px solid #eef0f4;
        border-radius: 0;
    }
    .template-modal .tmpt-set > .tmpl-header { padding: 0 16px !important; }
    .template-modal .tmpt-set .form-items .form-item { padding: 0 16px !important; }
    .template-modal .tmpt-set .tmpl-sec--attr > .tmpl-attr-title { padding: 0 16px; }
    .template-modal .tmpt-set .tmpl-attr-table { margin: 0 16px 20px; }
    .template-modal .tmpt-set > .tmpl-footer,
    .template-modal .tmpt-content .tmpl-content-footer { padding: 16px; height: auto; }

    /* 폼 행: [체크][라벨][입력] 이 공통 ≤992 규칙(라벨·입력 각각 한 줄)에 걸려 체크박스까지
       혼자 한 줄을 차지했다. 체크+라벨은 한 줄, 입력은 그 아래 라벨 위치에 맞춰 들여 쓴다. */
    .template-modal .template-attr-simplebar .form-items > .form-item > .form-item-check {
        flex: 0 0 44px;
    }
    .template-modal .template-attr-simplebar .form-items > .form-item > .col-form-label:not(.form-item-check) {
        flex: 1 1 0;
    }
    .template-modal .template-attr-simplebar .form-items > .form-item:not(.item-title) > .form-item-input {
        padding: 0 10px 10px 54px;
    }
    /* '수정된 정보 0건 | 필수만 보기 | 필수만 체크' 가 44px 한 줄 고정이라 '필수만 보/기' 처럼 쪼개졌다 */
    .template-modal .tmpl-modif-summary {
        flex-wrap: wrap;
        height: auto;
        row-gap: 6px;
        column-gap: 16px;
        padding: 10px 16px;
    }
    .template-modal .tmpl-modif-summary > * { white-space: nowrap; }
    .template-modal .tmpl-modif-summary > .d-flex { gap: 16px !important; }
    .template-modal .tmpl-req-only { font-size: 14px; gap: 6px; }
    .template-modal .tmpt-content > .tmpl-header > .d-flex.justify-content-between > span {
        word-break: keep-all;
    }

    /* 값 칸의 [입력][단위 '원'] · [입력][조회] — 입력이 폭을 다 먹어 옆 요소가 다음 줄로 떨어졌다
       (UP111 ⑦ 과 같은 문제). 입력은 남는 폭만, 옆 요소는 제 폭으로 같은 줄에 둔다.
       수량별 배송비(qty-tier)는 자체 칸 배치가 있어 제외. */
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .form-control:not(textarea):not(.max) {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none; /* 모바일은 450 상한 없이 줄 끝까지 */
    }
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .ms-1,
    .template-modal .template-attr-simplebar .form-item-input:not(.qty-tier) > .btn {
        flex: 0 0 auto;
        align-self: center;
    }
    /* 셀렉트 두 개 한 줄(사이즈 카테고리) — 모바일에선 각 130px 로 눌리므로 위아래로 쌓는다 */
    .template-modal .template-attr-simplebar .form-item-input > .d-flex:not(.flex-column) {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .template-modal .template-attr-simplebar .form-item-input > .d-flex:not(.flex-column) > .csel:not(.max):not(.category) {
        flex: 1 1 100%;
        max-width: none;
    }
    /* 폼 안 버튼(조회 등)이 28px 로 입력(40)보다 작아 누르기 어려웠다 */
    .template-modal .template-attr-simplebar .form-item-input .btn-sm {
        min-height: 40px;
        font-size: 13px;
        padding: 4px 12px;
    }

    /* 속성 표: 패널 안쪽이 306(360 화면)까지 줄면 위 ≤1439 폭으로도 '목록' 셀렉트가 46px 로 눌려
       '선'만 보였다 → 나머지 칸을 한 번 더 줄인다(목록 ≈ 94) */
    .template-modal .tmpt-set .tmpl-attr-table li > .pe-1 { flex: 0 0 36px; width: 36px; }
    .template-modal .tmpt-set .tmpl-attr-table li > .w-80p { flex: 0 0 80px; font-size: 13px; }
    .template-modal .tmpt-set .tmpl-attr-table li > .w-50p,
    .template-modal .tmpt-set .tmpl-attr-table li > .w-50p:last-child {
        flex: 0 0 48px;
        width: 48px !important;
        padding-left: 2px;
        padding-right: 2px;
    }
    .template-modal .tmpt-set .tmpl-apply-btn { padding-left: 6px; padding-right: 6px; }

    /* 머리글의 '값' 칸은 입력이 라벨 아래로 내려가면 짝이 없다 */
    .template-modal .template-attr-simplebar .form-items > .form-item.item-title > .form-item-input {
        display: none;
    }
    .template-modal .template-attr-simplebar .form-items > .form-item.item-title > .w-180p {
        justify-content: flex-start;
        padding-left: 10px;
    }

    /* 빠른검색 패널 500px 고정 */
    /* 패널은 앵커(사이드바 검색칸)의 left 를 인라인 style 로 받는다(=30px). 거기에 폭 상한을
       100vw-20 으로 주면 30+340 이 화면(360)을 3px 넘겨 오른쪽 조회 버튼이 가장자리에 잘린다.
       좁은 화면에선 앵커를 따라가지 말고 좌우 10px 씩 물려 대칭으로 띄운다(인라인 left 를 덮어야 함).
       max-width 는 원래 폭 500 으로 묶는다 — 안 그러면 992 구간에서 패널이 979px 로 늘어난다. */
    .qs-panel { left: 10px !important; right: 10px; width: auto; max-width: 500px; }
    /* 이미지 선택(피커): 타일 목록이 인라인 style 로 max-height:380 이라 본문이 468px 로 굳는다.
       모달 전체가 584px 가 되어 짧은 화면(360x520)에서 푸터(취소/적용)가 73px 밖으로 밀렸다.
       → 목록의 자체 스크롤을 풀고 모달 본문이 화면에 맞춰 스크롤하게 넘긴다. */
    .oligo-image-picker .modal-content { max-height: calc(100dvh - 20px); }
    .oligo-image-picker .modal-body { overflow-y: auto; }
    .oligo-image-picker .modal-body > .d-flex.flex-wrap { max-height: none !important; }

    /* 타일/입력행의 가로 재배치는 ≤768 블록에 있다 — 992 는 모달 폭이 972px 나 되어
       2열·3단으로 쪼개면 오히려 이상하다(992 실측: URL 칸 874px, 안내문 922px). */

    /* 3) 상품 이미지 모달: width:860 / height:680 고정 */
    .goods-img-modal { width: 100%; height: auto; max-height: 88dvh; }

    /* 오프캔버스 패널도 폭이 px 로 박혀 있다(.lg-width 650, .inquiry-offcanvas 670).
       모달과 같은 이유로 화면을 넘지 않게 상한만 건다. */
    .offcanvas.offcanvas-end,
    .offcanvas.offcanvas-start { max-width: 100vw; }

    /* 카테고리 선택 모달: 대/중/소/세분류 4단이 flex 로 폭을 4등분한다(dl{width:100%}).
       390px 에서 한 칸이 70px 밖에 안 돼 '가/구/인/테/리/어' 처럼 한 글자씩 쪼개졌다.
       가로 스크롤도 방법이지만 한 번에 두 칸밖에 안 보이고 고를 때마다 옆으로 밀어야 한다.
       세로로 쌓고, '아직 고르지 않아 비어 있는 단계'는 감춘다 → 고른 만큼만 아래로
       펼쳐지는 드릴다운이 된다. 위에서 아래로 읽는 흐름이라 스크롤 방향도 자연스럽다. */
    .category-list {
        flex-direction: column;
        gap: 10px;
    }
    .category-list dl {
        width: 100%;
        min-width: 0;
    }
    .category-list dl + dl { border-left: 1px solid var(--tblr-border-color-translucent); }
    .category-list dl:has(> dd > ul:empty) { display: none; }
    /* dd 가 height:250px 고정이라 목록이 짧으면 목록(흰색) 아래로 dl 배경(#fafafa)이
       그대로 남는다. 4단을 가로로 놓을 땐 '칸 높이 맞추기'라 자연스러웠지만,
       세로로 쌓으면 중분류 밑에 회색 빈 덩어리가 150px 씩 끼어 보인다.
       내용만큼만 높이를 주고 길면 스크롤한다. */
    .category-list dl dd {
        height: auto;
        max-height: 30dvh;
        min-height: 44px;
    }
    /* 제목줄만 회색 머리로 남기고 목록은 흰 바탕 — 단계 구분이 선명해진다 */
    .category-list .category-title {
        text-align: left;
        padding: 8px 10px;
        font-size: 13px;
        border-bottom: 1px solid var(--tblr-border-color-translucent);
    }
    .category-list .category-items { background-color: #fff; }
    /* 푸터가 [선택 카테고리 …] ↔ [취소][선택 완료] 를 justify-content:between 으로 벌린다.
       좁은 화면에선 버튼 묶음이 둘째 줄로 접히는데, 한 줄에 혼자 남으면 between 이
       할 일이 없어 왼쪽에 붙어 버린다. 정보는 한 줄 다 쓰고 버튼은 오른쪽으로 민다. */
    .oligo-category-modal .modal-footer,
    .channel-category-modal .modal-footer { row-gap: 8px; }
    .oligo-category-modal .modal-footer > *:first-child,
    .channel-category-modal .modal-footer > *:first-child { flex: 1 1 100%; }
    .oligo-category-modal .modal-footer > *:last-child,
    .channel-category-modal .modal-footer > *:last-child { margin-left: auto; }

    /* 정보비교 모달: 상단 정보 박스가 [수정전 ↔ 수정후][저장시간] 을 한 줄에 넣고
       그 아래 [구분][수정자][변경사유] 를 또 한 줄에 넣는다. 290px 본문에서는
       라벨과 값이 서로 붙고 '총 N개의 항목이 변경되었/습니다' 처럼 문장이 쪼개졌다.
       각 묶음을 접히게 하고, 값이 잘리지 않게 폭을 준다. */
    .revision-info-box { padding: 14px; }
    .revision-info-box > .d-flex {
        flex-wrap: wrap;
        row-gap: 12px;
        column-gap: 16px;
    }
    /* 저장시간은 우측 정렬 대신 한 줄 차지 — 좁은 폭에서 라벨이 값 위로 겹쳐 보였다 */
    .revision-info-box .text-end {
        text-align: left !important;
        flex: 0 0 100%;
    }
    /* 변경 요약: 문장과 추가/수정/삭제 카운트를 같은 줄에 두면 문장이 어절 중간에서
       끊긴다. 카운트를 아랫줄로 내리고 문장은 어절 단위로만 줄바꿈. */
    .revision-info-box > .d-flex.justify-content-between:last-child { row-gap: 8px; }
    .revision-info-box .font-size-13 { word-break: keep-all; }
    .revision-info-box .d-flex.gap10.font-size-12 { flex: 0 0 100%; }

    /* 변경 항목 한 줄: [필드 190px][수정전 → 수정후][태그] 3단 그리드에, 값 칸이
       또 [1fr][화살표][1fr] 이다. 290px 본문에서는 칩 하나에 35px 밖에 안 가서
       글자가 한 자씩 쪼개졌다. 필드명과 태그만 한 줄에 두고, 값 비교는
       아랫줄에서 위(수정 전) → 아래(수정 후) 로 내려 읽게 한다. */
    .rev-diff-list { padding: 0 10px 12px; gap: 12px; }
    .rev-line {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 8px;
        padding: 12px 8px;
    }
    .rev-line__field { padding-top: 0; }
    .rev-tag { align-self: start; }
    .rev-vals {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 3px;
    }
    .rev-chip { -webkit-line-clamp: 4; }
    .rev-chip--old,
    .rev-chip--new { justify-self: stretch; text-align: left; }
    /* 오른쪽 화살표는 위→아래 흐름에 안 맞는다. 눕혀서 아래를 가리키게. */
    .rev-arrow { transform: rotate(90deg); justify-self: start; margin-left: 10px; }

    /* 펼친 상세 비교도 2단 고정이라 같이 깨진다. [수정 전 머리+내용] →
       [수정 후 머리+내용] 순서로 쌓는다. head/body 래퍼를 display:contents 로
       녹여 4개를 한 그리드에 올린 뒤 order 로 짝을 맞춘다. */
    .rev-struct { display: grid; grid-template-columns: 1fr; }
    .rev-struct__head,
    .rev-struct__body { display: contents; }
    .rev-struct__label--old { order: 1; }
    .rev-struct__col--old { order: 2; border-right: 0; }
    .rev-struct__label--new { order: 3; }
    .rev-struct__col--new { order: 4; }
    /* body 래퍼가 녹으면서 max-height 스크롤도 같이 사라지므로 칸마다 다시 건다 */
    .rev-struct__col { max-height: 200px; overflow-y: auto; }

    /* 채널 원본상세 '추가상품목록' 은 8컬럼 테이블(min-width:700px)이라 좁은 화면에선
       표를 쪼개지 않고 가로로 민다(그리드와 같은 방침). 스크롤 자체는 부모의
       overflow-x:auto 로 이미 되는데, 모바일은 오버레이 스크롤바라 평소 아무 표시가
       없어서 '밀 수 있다'는 걸 알 방법이 없다 — 그리드에서 쓴 처방을 그대로 쓴다.
       -webkit-appearance:none 을 주면 iOS Safari 도 스크롤바를 상시 표시한다. */
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> table) {
        scrollbar-width: thin;
        /* 세로는 모달 본문이, 가로는 이 표가 맡게 축을 나눈다 */
        touch-action: pan-x pan-y;
    }
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> table)::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
    }
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> table)::-webkit-scrollbar-thumb {
        background: rgba(17, 24, 39, 0.32);
        border-radius: 4px;
    }
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> table)::-webkit-scrollbar-track { background: transparent; }

    /* 옵션목록·추가상품목록은 <table> 이 아니라 CSS Grid 로 짠 표다(4곳).
         option_data    : 32px 1fr 100px 70px 60px 90px  → 고정 352px + 옵션 1fr
         goods_add_data : 32px 1fr 1fr 100px 80px 90px   → 고정 302px + 1fr 2개
         goods_add_data : 32px 1fr 1fr auto auto auto
       래퍼 폭이 243px(390px 화면)이면 1fr 이 0 에 수렴해 글자가 한 자씩 쪼개지는데,
       테두리 상자에 inline overflow:hidden 이 걸려 있어 잘려 나갈 뿐 옆으로 밀리지도
       않았다. 표와 같은 방침으로 가로 스크롤을 살린다.
       600px 근거: 위 셋 중 가장 넓은 goods_add_data 가 고정 302px + 1fr 2개(각 ~150)
       = 약 600px 이어야 칸이 안 뭉개진다. */

    /* (가) 그리드 박스가 곧 테두리 상자인 경우 — 자기 자신이 스크롤러가 될 수 없으니
       값 칸(.flex-grow-1)을 스크롤러로 쓴다 */
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> [style*='grid-template-columns']) {
        overflow-x: auto;
        scrollbar-width: thin;
        touch-action: pan-x pan-y;
    }
    .ch-raw-detail-modal .form-item > .flex-grow-1 > [style*='grid-template-columns'] { min-width: 600px; }

    /* (나) .w-100 래퍼 + 행 divs 구조 — 래퍼의 inline overflow:hidden 을 덮어야 해서
       !important 가 불가피하다(인라인 스타일과의 싸움) */
    .ch-raw-detail-modal .form-item .w-100:has(> [style*='grid-template-columns']) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        touch-action: pan-x pan-y;
    }
    .ch-raw-detail-modal .form-item .w-100 > [style*='grid-template-columns'] { min-width: 600px; }

    /* 위 두 스크롤러도 표와 같은 스크롤바 표시를 받는다 */
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> [style*='grid-template-columns'])::-webkit-scrollbar,
    .ch-raw-detail-modal .form-item .w-100:has(> [style*='grid-template-columns'])::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
    }
    .ch-raw-detail-modal .form-item > .flex-grow-1:has(> [style*='grid-template-columns'])::-webkit-scrollbar-thumb,
    .ch-raw-detail-modal .form-item .w-100:has(> [style*='grid-template-columns'])::-webkit-scrollbar-thumb {
        background: rgba(17, 24, 39, 0.32);
        border-radius: 4px;
    }

    /* 채널 원본상세 모달 탭: 8개라 한 줄에 못 담는다. 공통 규칙이 줄바꿈으로
       접어 주는데, 여기선 .tab-items 와 .tab-item 에 height:44px 가 박혀 있어
       (더 구체적이라 공통 규칙을 이긴다) 2·3번째 줄이 컨테이너를 넘어 본문을 덮었다. */
    .ch-raw-detail-modal__tabs .tab-items { height: auto; }
    .ch-raw-detail-modal__tabs .tab-items > .tab-item { height: 36px; }

    /* 알림 등록 모달: 본문이 [좌 380px 고정][우 flex] 2단이라 335px 모달에서
       좌측만으로 폭을 넘겨 내용이 오른쪽으로 잘렸다(문서 오버플로 86px).
       세로로 쌓는다. */
    .notif-reg-modal__body { flex-direction: column; }
    .notif-reg-modal__left { flex: 0 0 auto; width: 100%; }
    .notif-reg-modal__right { flex: 0 0 auto; width: 100%; }

    /* 모달 안 기간 필터: 달력 입력이 135px 고정이라 좁은 폭에서 삐져나온다.
       (검색바 쪽은 page.css 에서 .oligo-oa01-search 스코프로 이미 처리) */
    .jlm-filter { padding: 16px; }
    .jlm-filter__row { flex-wrap: wrap; row-gap: 8px; }
    .jlm-filter .calendar,
    .import-job-form .calendar { flex: 1 1 0; min-width: 0; }
    .jlm-filter .calendar .form-control,
    .import-job-form .calendar .form-control { width: 100%; }
    .jlm-filter .qr-dropdown,
    .jlm-filter .csel { flex: 1 1 100%; }
    .jlm-filter .qr-trigger { width: 100%; justify-content: space-between; }

    /* 가져오기 모달: 라벨 70px 를 빼고 나면 입력에 220px 밖에 안 남는데
       채널/계정 셀렉트가 260px, 기준일이 135+135px 이라 오른쪽으로 잘려 나갔다.
       라벨을 입력 위로 올려 폭을 돌려주고, 인라인/유틸 고정폭을 푼다. */
    .import-job-form__row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .import-job-form__label {
        width: auto;
        padding-top: 0;
    }
    /* CustomSelect 는 인라인 width, .w-*p 는 width+min-width 를 !important 로 건다 */
    .import-job-form .csel,
    .import-job-form .w-135p,
    .import-job-form .w-130p {
        width: 100% !important;
        min-width: 0 !important;
    }
    .import-job-form .qr-dropdown,
    .import-job-form .qr-trigger { width: 100%; }
    /* 카테고리 셀렉트는 데스크톱에선 4~5단을 한 줄에 균등 분배(.position-relative{flex:1 1 0})
       하는데, 좁은 화면에선 한 칸이 40px 도 안 돼 읽을 수 없다 → 두 개씩 접는다. */
    .import-job-form .cate-cascade > .position-relative {
        flex: 0 0 calc(50% - 16px);
        min-width: 0;
    }
    /* 본문이 height:410px 고정 + overflow:visible 이다. 데스크톱은 라벨이 입력 옆이라
       410 에 맞았지만, 위에서 라벨을 입력 위로 올리는 순간 폼이 세로로 길어져
       목록(320px)까지 합치면 410 을 크게 넘는다. 잘리는 대신 푸터 위로 흘러나왔다.
       → 높이를 풀고 본문 자체를 스크롤 컨테이너로 돌린다(헤더60+푸터62+여백). */
    .import-job-modal__body {
        height: auto;
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
    }
    /* 목록도 320px 고정이라 짧은 화면에서 본문 스크롤을 한 번 더 타게 만든다.
       화면 비례로 바꾸되, 너무 납작해지지 않게 하한을 둔다. */
    .import-job-list__border {
        height: 38dvh;
        min-height: 180px;
    }
}

/* ============================================================
   좁은 화면(≤768) — 추가상품목록 표의 '더 있음' 신호
   위 스크롤바 스타일은 보이는 스크롤바를 쓰는 브라우저에만 통한다. 실제 모바일은
   오버레이 스크롤바라 두께가 0 이고 되살아나지 않는 경우가 있어, 스크롤바에
   기대지 않는 신호를 하나 더 둔다 — 우측 페이드.
   992 가 아니라 768 인 이유: 992 에서는 모달 본문이 700px(표 최소폭)보다 넓어
   표가 넘치지 않는데, 그때도 페이드를 그리면 없는 스크롤을 있다고 하는 셈이다.
   ============================================================ */
@media (max-width: 768px) {
    /* ── 이미지 선택(피커) / 옵션 이미지 선택(토스) 의 가로 재배치 ──
       992 가 아니라 768 인 이유: 992 는 모달이 972px 라 한 줄에 다 들어간다(그 폭에서 쪼개면
       URL 칸 874px·안내문 922px 처럼 우스워진다). 진짜 좁아지는 구간에서만 접는다. */

    /* 타일이 96px 고정이라 2열까지만 들어가고 오른쪽에 100px 가까운 빈 폭이 그냥 남는다 →
       유동 폭 2열로 고르게 채운다(정사각 유지).
       grow 는 0 — 1 로 두면 이미지가 1장뿐인 상품에서 타일 하나가 290px 로 거대해진다(실앱 확인). */
    .oligo-image-picker .modal-body > .d-flex.flex-wrap > div { flex: 0 1 calc(50% - 8px); min-width: 0; }
    .oligo-image-picker .modal-body > .d-flex.flex-wrap > div > div:first-child {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    .oligo-image-picker .modal-body > .d-flex.flex-wrap > div > div:last-child { width: 100% !important; }

    /* 파일업로드·URL입력·추가(·토스는 안내문까지) 가 한 줄에 눌려 URL 칸이 글자 폭만 남는다.
       (토스 360 실측: URL 칸 101px, 안내문은 47px 폭에 갇혀 여러 줄로 쪼개지며 행 높이 74px)
       → [파일 업로드] 윗줄, 짝인 [URL 입력][추가] 아랫줄, 안내문은 그 아래 한 줄 전체. */
    .oligo-image-picker .modal-body > .d-flex.align-items-center,
    .toss-option-image .modal-body > .d-flex.align-items-center { flex-wrap: wrap; }
    .oligo-image-picker .modal-body > .d-flex.align-items-center > button:first-of-type,
    .toss-option-image .modal-body > .d-flex.align-items-center > button:first-of-type { flex: 1 1 100%; }
    .oligo-image-picker .modal-body > .d-flex.align-items-center > input[type='text'],
    .toss-option-image .modal-body > .d-flex.align-items-center > input[type='text'] {
        max-width: none !important;
        flex: 1 1 0; /* basis:auto 면 input 기본폭 때문에 [추가] 가 또 줄바꿈된다 */
        min-width: 0;
    }
    /* 토스의 'N/10장 · 첫 장이 대표 이미지' 안내 — ms-auto(!important) 를 풀고 아랫줄 전체로 */
    .toss-option-image .modal-body > .d-flex.align-items-center > span {
        flex: 1 1 100%;
        margin-left: 0 !important;
    }

    .ch-raw-detail-modal .form-item:has(> .flex-grow-1 > table),
    .ch-raw-detail-modal .form-item:has([style*='grid-template-columns']) { position: relative; }
    .ch-raw-detail-modal .form-item:has(> .flex-grow-1 > table)::after,
    .ch-raw-detail-modal .form-item:has([style*='grid-template-columns'])::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
    }
}

/* GSSHOP QA·심의 서류 위젯(GsQaDocsInput): 폼 공통 입력 450px 고정(.goods-detail / 템플릿 모달 !important)을
   위젯 안에서만 풀어 칸 폭을 따라 줄어들게 한다. 칸(.gs-qa-field)은 라벨 위·입력 아래, 최대 420. */
.gs-qa-docs {
    width: 100%;
    max-width: 720px;
    min-width: 0;
}
.gs-qa-docs .gs-qa-field {
    width: 100%;
    max-width: 420px;
    min-width: 0;
}
.goods-detail .form-item .gs-qa-docs .form-control,
.goods-detail .form-item .gs-qa-docs .csel,
.template-modal .template-attr-simplebar .form-item-input .gs-qa-docs .form-control:not(textarea):not(.max),
.template-modal .template-attr-simplebar .form-item-input .gs-qa-docs .csel:not(.max):not(.category) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}