/* ============================================================
   page.css — 페이지 전용 스타일 (style.css에서 분리)
   ============================================================ */

/* 상품상세 우측 패널 - 템플릿 버튼 타일 */
.up111-tmpl-btns { display: flex; flex-direction: column; gap: 8px; }
.up111-tmpl-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.up111-tmpl-btn:hover { border-color: #6a61f5; background: #f6f5ff; }
.up111-tmpl-btn > svg { flex-shrink: 0; color: #9ca3af; transition: color .15s; }
.up111-tmpl-btn:hover > svg { color: #6a61f5; }
.up111-tmpl-btn__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.up111-tmpl-btn__label { font-size: 13px; font-weight: 600; color: #374151; transition: color .15s; }
.up111-tmpl-btn:hover .up111-tmpl-btn__label { color: #6a61f5; }
.up111-tmpl-btn__desc { font-size: 11px; color: #9ca3af; }
/* 상품상세 우측 패널 - 템플릿 버튼 타일 */
.up111-tmpl-btns { display: flex; flex-direction: column; gap: 8px; }
.up111-tmpl-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.up111-tmpl-btn:hover { border-color: #6a61f5; background: #f6f5ff; }
.up111-tmpl-btn > svg { flex-shrink: 0; color: #9ca3af; transition: color .15s; }
.up111-tmpl-btn:hover > svg { color: #6a61f5; }
.up111-tmpl-btn__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.up111-tmpl-btn__label { font-size: 13px; font-weight: 600; color: #374151; transition: color .15s; }
.up111-tmpl-btn:hover .up111-tmpl-btn__label { color: #6a61f5; }
.up111-tmpl-btn__desc { font-size: 11px; color: #9ca3af; }
/* OB01 채널별 연동 안내 (danger 톤, 아이콘 좌측) */
.ob01-guide {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #ffebed;
    border-radius: 10px;
    padding: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}
.ob01-guide__icon { flex-shrink: 0; margin-top: 1px; font-size: 16px; color: #ff3149; }
.ob01-guide__body { flex: 1; min-width: 0; color: #6b7280; }
.ob01-guide__head { font-weight: 600; color: #ff3149; margin-bottom: 6px; }
.ob01-guide__label { display: list-item; list-style: disc; margin-left: 18px; font-weight: 600; margin-top: 6px; }
.ob01-guide__list { list-style: none; margin: 2px 0 0; padding-left: 0; }
.ob01-guide__list li { margin-bottom: 2px; }
/* 주의사항: 매뉴얼 ▶ 주의사항 문단 */
.ob01-guide__list--note { padding-left: 18px; color: #b3272f; }
/* 연동 설정 절차: 자동번호 대신 매뉴얼 원본 번호(2-1 등) 사용 */
.ob01-guide__steps { list-style: none; padding-left: 18px; }
.ob01-guide__steps li { display: flex; gap: 4px; }
.ob01-guide__no { font-weight: 600; flex-shrink: 0; }


/* ══════════════════════════════════════════════════
   UP111 3컬럼 레이아웃
   ══════════════════════════════════════════════════ */
/* UP111 page-body */
.up111-page-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    /* 헤더~본문 간격: 리스트(.oligo-imp-searchbar margin-top:14 + page-body 16 = 30)와 동일하게 상단 14px */
    margin-top: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* UP111은 OA02/OA03 안에 <Content menu="UP111"/>로 임베드됨(.container-xxl>.row>.col-xl-12 구조).
   → 바깥 menu(OA02/OA03)의 grid-fill + 제네릭 `.row > .col-xl-12:last-child` 규칙이 flex 체인을 잡아줌(매직넘버 불필요) */

/* UP111 3컬럼 래퍼 */
.up111-body-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* 높이는 grid-fill flex 체인이 결정(매직넘버 max-height 제거) → 조회화면과 하단 끝점 일치 */
    /* 콘텐츠 카드 라운드 (좌측 채널패널 + 우측 폼 감싼 바깥) — 앱 카드와 동일 10px */
    border-radius: 10px;
}

/* 상단 '상품명 …' — 길면 한 줄 말줄임.
   예전엔 left:12em(시각적 이동)으로 밀었는데 자리를 차지하지 않아 옆이 비켜 주지 않았다 —
   긴 이름이 여러 줄로 접히며 헤더 아이콘([매뉴얼][새 탭]·알림) 위로 겹치고 '상품정보' 제목이 눌렸다.
   같은 위치를 margin 으로 잡아 자리를 차지하게 하고, 남는 폭만큼만 보이게 줄인다. */
.up111-title-item-name-wrap {
    margin-left: 12em;
    min-width: 0;
    flex: 1 1 auto;
}
.up111-title-item-name-wrap > .gap10 {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.up111-title-item-name-wrap .item-name-label {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--oligo-neutral-500);
    font-weight: 500;
    margin-right: 0.5em;
}

.up111-title-item-name-wrap .item-name-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--oligo-neutral-800);
    font-weight: 800;
}

/* 폼 입력 고정폭(w-200p~w-500p)이 값 칸보다 넓으면 칸 안으로 줄인다.
   데스크톱에서 우측 패널을 붙이면(1440~1700 구간) 폼이 580 까지 좁아지는데, 값 칸 398 에
   w-450p(min-width 450 !important)가 들어가지 못해 입력 13개가 51px 씩 잘리고 폼에 가로
   스크롤이 생겼다. 자리가 넉넉하면 원래 폭 그대로다(max-width 만 걸고 width 는 둔다). */
.up111-center-panel .form-item-input .w-200p,
.up111-center-panel .form-item-input .w-210p,
.up111-center-panel .form-item-input .w-220p,
.up111-center-panel .form-item-input .w-250p,
.up111-center-panel .form-item-input .w-300p,
.up111-center-panel .form-item-input .w-400p,
.up111-center-panel .form-item-input .w-450p,
.up111-center-panel .form-item-input .w-500p {
    min-width: 0 !important;
    max-width: 100%;
}
/* 입력을 한 겹 더 감싼 .d-flex(단위 '원' 등과 묶음)가 min-width:auto 로 450 을 버텼다 */
.up111-center-panel .form-item-input > .d-flex {
    min-width: 0;
    max-width: 100%;
}
/* 그 묶음은 flex-wrap 이라 [입력][원] 이 칸보다 길면 줄어들기 전에 '원'이 줄바꿈된다 →
   basis 0 + 원래 폭 상한으로 바꿔 같이 줄게 한다(자리가 있으면 원래 폭 그대로) */
.up111-center-panel .form-item-input > .d-flex > .w-200p { flex: 1 1 0; max-width: 200px; }
.up111-center-panel .form-item-input > .d-flex > .w-300p { flex: 1 1 0; max-width: 300px; }
.up111-center-panel .form-item-input > .d-flex > .w-400p { flex: 1 1 0; max-width: 400px; }
.up111-center-panel .form-item-input > .d-flex > .w-450p { flex: 1 1 0; max-width: 450px; }
.up111-center-panel .form-item-input > .d-flex > .w-500p { flex: 1 1 0; max-width: 500px; }
/* 판매일시 [달력150][~][달력150] — 1440 에서 우측 패널을 붙이면 폼 420·값 칸 238 이라
   두 번째 달력이 잘렸다. 둘이 같이 줄게 한다. ≤1279 는 좁은 폼 규칙(up111-narrow)이 따로 받는다. */
@media (min-width: 1280px) {
    .up111-center-panel .form-item-input > .calendar {
        flex: 1 1 0;
        min-width: 0;
        max-width: 150px;
    }
    .up111-center-panel .form-item-input > .calendar .form-control {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* 좌측 채널 패널 */
.up111-left-panel {
    width: 330px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tblr-border-color-translucent);
    background: #fff;
    overflow: hidden;
}
/* 채널 목록 접기 토글 — 좁은 화면(≤992)에서만 쓴다. 넓은 화면은 항상 펼친 상태. */
.up111-left-toggle {
    display: none;
}

/* 선택된 상품정보 */
.up111-selected-item {
    padding: 1em;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    width: 100%;
    user-select: none;
    transition: all 0.15s;
}


.up111-selected-item .title {
    font-size: 16px;
    font-weight: 500;
    color: #6B7280;
    padding: 0.5em 1em;
}

.up111-selected-item .data-wrap {
    font-size: 14px;
    font-weight: 500;
    color: var(--oligo-neutral-500);
    display: flex;
    align-items: center;
    padding: 0.4em 1em;
}

.up111-selected-item .data-wrap .data-name {
    width: 5em;
}
.up111-selected-item .data-wrap .data-value input {
    color: var(--oligo-neutral-800);
    font-size: 14px;
    font-weight: 500;
}

.up111-item-subtitle {
    background: var(--oligo-neutral-50);
    padding: 0.6em 1.2em;
    font-size: 14px;
    font-weight: 700;
    color: var(--oligo-neutral-800);
}


/* ID(마스터) 탭 */
.up111-master-item-wrap {
    position: relative;
    cursor: pointer;
    padding: 1em 2em;
    border-top: 1px solid var(--oligo-neutral-200);
    border-bottom: 1px solid var(--oligo-neutral-200);
}

.up111-master-item-wrap.active {
    background: var(--oligo-success-bg) !important;
}

.up111-master-item-wrap:hover {
    background-color: rgba(var(--tblr-secondary-rgb), 0.08);
}

.up111-master-item-wrap .master-info {
    display: flex;
    align-items:center;
}

.up111-master-item {
    margin-right: 0.5em;
    /*padding: 1em;
    border-bottom: 1px solid #f1f5f9;
    border-left: 4px solid transparent;
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    width: 100%;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;*/
}

.up111-master-item.active {
    background-color: rgba(var(--tblr-secondary-rgb), 0.08);
    border-left: none;
}

.up111-master-name {
    font-size: 13px;
    font-weight: 700;
    color: #1F2937;
}

.up111-master-code {
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
}

.up111-master-tag {
    position:absolute;
    right: 2em;
    /*margin-right: 1em;*/
}



/*.up111-master-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--oligo-point);
}*/


.up111-id-badge {
    display: inline-block;
    background: var(--oligo-neutral-100);
    color: var(--oligo-point);
    border-radius: 1em;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
}
.up111-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--oligo-primary);
    display: inline-block;
    flex-shrink: 0;
}

/* 채널추가 버튼 */
/*.up111-add-ch-wrap {
    position: relative;
    height: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.up111-add-ch-btn {
    position: absolute !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 14px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}

.up111-add-ch-btn:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
    border-color: rgba(0,179,179,0.35) !important;
    color: #00B3B3 !important;
}*/

.btn-up111-add-ch-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.btn-up111-add-ch {
    position: relative;
    width: 100%;
    margin: 1em 1.6em;
    padding: 0.5em;
    font-size: 16px;
    color: #6A61F5;
    font-weight: 500;
    border: 1px solid #6A61F5;
    border-radius: 0.5em;
    text-align: center;
    cursor:pointer;
}


/* 채널 아이템 행 */
.vendor-list-simplebar .vendor-list {
    border-top: 1px solid var(--oligo-neutral-200);
}
/* SimpleBar 스크롤바 라이트그레이 (TemplateModal template-attr-simplebar 와 동일 톤) */
.vendor-list-simplebar .simplebar-scrollbar::before {
    left: 2px;
    right: 2px;
    background: #d1d5db;
}

.up111-vendor-item-wrap {
    position: relative;
    cursor: pointer;
    padding: 1em 2em;
}

.up111-vendor-item-wrap:last-child {
    border-bottom: 1px solid var(--oligo-neutral-200) !important;
}

.up111-vendor-item {
    margin-right: 0.5em;
}

.up111-vendor-item-wrap.active {
    background-color: #F6F5FF; /* primary/soft */
    border-left: none;
}

.up111-vendor-item-wrap .vendor_info {
    display: flex;
    align-items:center;
}

.up111-vendor-tag {
    position:absolute;
    right: 2em;
    /*margin-right: 1em;*/
}

.up111-vendor-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--oligo-neutral-800);
}

.up111-vendor-code {
    font-size: 12px;
    font-weight: 500;
    color: var(--oligo-neutral-400);
}




.up111-vendor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.up111-vendor-row img {
    width: 60px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.up111-vendor-count {
    display: inline-block;
    background: var(--oligo-neutral-100);
    color: var(--oligo-primary);
    border-radius: 1em;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
}

.up111-gray-badge {
    display: inline-block;
    background: #f1f3f5;
    color: #6c757d;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* 중앙 패널 */
.up111-center-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%; /* body-wrap 높이에 명시적으로 맞춤 → 좌측 패널(stretch)과 단차 제거 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.up111-center-panel .goods-detail {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* 스크롤은 내부 SimpleBar(오버레이 회색). 스크롤 필요없으면 스크롤바 안 생김, 공간예약 X */
    position: relative;
    padding-bottom: 0; /* 20px 제거 — 단차 유발 (UP111만) */
    margin-bottom: 0; /* 공용 .goods-detail margin-bottom:20px 무효화 (UP111만, TemplateAttrModal 등 다른 화면 영향 없음) */
    background: #FFFFFF;
}

.up111-center-panel .up111-goods-detail-label {
    background: var(--oligo-neutral-50);
    padding: 0.6em 1.1em;
    font-size: 14px;
    font-weight: 700;
    color: var(--oligo-neutral-800);
    border-top: 1px solid var(--oligo-neutral-200);
    border-bottom: 1px solid var(--oligo-neutral-200);
}
/* 첫 섹션 라벨은 상단 border 제거 (맨 위라 불필요) */
.up111-center-panel .up111-goods-detail-info:first-child > .up111-goods-detail-label:first-child {
    border-top: none;
}

.up111-goods-detail-contents {
    /* border 제거 (label 로 이동) */
}

/* goods 폼 SimpleBar: 매직 뷰포트 높이(100vh-270) 대신 goods-detail 높이를 채움 →
   내용 넘치면 SimpleBar 커스텀 스크롤이 동작(native 스크롤 X). UP111 스코프라 다른 화면 영향 없음 */
.up111-center-panel .goods-form-simplebar {
    height: 100%;
}
/* 내용 넘칠 때만 뜨는 회색(neutral/300) 오버레이 스크롤바 — vendor-list-simplebar와 동일 */
.up111-center-panel .goods-form-simplebar .simplebar-scrollbar::before {
    left: 2px;
    right: 2px;
    background: #d1d5db;
}

.up111-goods-detail-info .item-modified {
    background: var(--oligo-primary-soft) !important;
}

.up111-goods-detail-info .csel {
    /*width: 400px;
    min-width: 400px;*/
}

/*.up111-goods-detail-info:last-child .up111-goods-detail-contents {
    border-bottom: none;
}*/

.up111-center-panel .tab-items {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e9eef3;
    padding: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: stretch;
    /* 탭 8개 최소 폭 합(≈592)보다 폼이 좁으면 가로 스크롤.
       ≤1199 에만 걸려 있어서, 우측 패널이 본문을 밀어내는 1440~1600 에서 폼이 420~580 으로
       줄어도 스크롤 없이 뒤쪽 탭이 잘렸다. 자리가 넉넉하면 flex:1 로 꽉 채우는 건 그대로다.
       - 높이는 탭(65)이 정한다(height:auto) — 65 로 고정하면 스크롤바가 탭 아래(선택 밑줄)를 덮는다.
       - 스크롤바 색: tabler 전역이 글자색 20% 로 깔아 흰 바탕에서 거의 안 보였다 → 진하게. */
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 24, 39, 0.35) transparent;
}
.up111-center-panel .tab-items > .tab-item {
    flex: 1;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    box-sizing: border-box; /* height 65에 padding·border 포함 (Figma 프레임 기준) */
    gap: 4px; /* 아이콘(배지) ↔ 라벨 간격 (Figma) */
    padding: 14px 10px; /* 위/아래 14, 좌우 10 (Figma) */
    height: 65px;
    border-bottom: 4px solid transparent; /* Figma border-bottom-width 4px */
    position: relative;
    color: #1f2937; /* 비활성 탭 라벨 neutral/800 (active는 li.active에서 primary로 override) */
}
.up111-center-panel .tab-items > .tab-item .modif-count {
    /* in-flow: 배지가 라벨 위, gap 4 (Figma). 원형 16×16 (Figma), 눌림 방지 */
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
}
.up111-center-panel .tab-items > .tab-item .modif-count:not(.active) {
    display: none;
}
.up111-center-panel .tab-items > .tab-item .title {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
    /* 어떤 규칙이 시스템폰트로 덮는 경우 대비 — Pretendard 명시 */
    font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
        'Segoe UI', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
.up111-center-panel .tab-items > li.active {
    color: var(--oligo-primary);
    border-bottom: 4px solid var(--oligo-primary);
}

.up111-center-panel .goods-detail-update-status {
    background: #FFFFFF;
    padding: 0.5em 1em;
    font-size: 16px;
    font-weight:500;
    color: var(--oligo-neutral-500);
    position:relative;
    border-bottom: 1px solid var(--oligo-neutral-200);
}

.up111-center-panel .goods-detail-update-status .update-count .emp {
    font-weight: bold;
    color: var(--oligo-primary);
}

.up111-center-panel .goods-detail-update-status .display-option {
    display: flex;
    align-items:center;
    gap: 10px;
    position: absolute;
    right: 1em;
}
/* '필수만 보기' 체크박스+라벨 — .template-modal .tmpl-req-only 와 동일 (18px / 16px·#6b7280·400) */
.up111-center-panel .goods-detail-update-status .display-option .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
.up111-center-panel .goods-detail-update-status .display-option .form-check-input:checked {
    background-color: #6a61f5;
    border-color: #6a61f5;
}
.up111-center-panel .goods-detail-update-status .display-option label {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
}

/* 우측 패널 */
.up111-right-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
}
/* 속성편집상황: 남는 공간 채우되(grow), 공간 부족 시 먼저 줄고(shrink) → 템플릿 273 항상 확보.
   라벨/서브타이틀은 고정, 변경목록(.pt-1)만 스크롤 */
.up111-right-section--grow {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* 속성 편집 상황 섹션만 라벨↔pt-1 간격 10 (다른 섹션 gap 20 유지) — specificity ↑로 base gap:20 오버라이드 */
.up111-right-section.up111-right-section--grow {
    gap: 10px;
}
/* 수정이력: csel↔정보비교 버튼 간격만 10 (label↔csel 20 유지). 섹션 gap 20 - margin-top 10 = 10 */
.up111-right-section--rev .btn {
    margin-top: -10px;
}
.up111-right-section--grow .pt-1 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* 템플릿 섹션은 최소 273 확보 (절대 안 줄어듦) + 라벨↔내용 gap 20, padding 20/30 (Figma) */
.up111-right-section--tmpl {
    flex-shrink: 0;
    min-height: 273px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 30px;
}

.up111-right-section {
    position: relative; /* 절대배치 자식(btn-toggle-isuse-wrap 등)이 섹션 기준으로 배치 → 토글 위치 깨짐 방지 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 라벨↔내용 20 (Figma) */
    padding: 20px 30px; /* Figma */
    border-bottom: 1px solid var(--oligo-neutral-200);
    color: var(--oligo-neutral-500);
    font-weight: 500;
}
/* 버튼영역 바로 위 '마지막 콘텐츠 섹션'은 하단 구분선 제거
   → 올리고=속성편집상황(맨 아래), 채널=템플릿(맨 아래). 그 외는 유지 */
.up111-right-section:has(+ .up111-right-section-btn-container) {
    border-bottom: none;
}

.up111-right-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-700);
    padding-left: 10px;
    border-left: 3px solid var(--color-slate-200);
    margin-bottom: 12px;
}

.up111-right-section .col-form-label.title {
    font-size: 16px;
    padding: 0.3em 0;
}

.up111-right-section .col-form-label.subtitle {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 400;
    line-height: 1;
}

.up111-right-section .btn-toggle-isuse-wrap {
    position: absolute;
    right: 1.5em;
}

/* 사용여부 토글 — OB01(.ob01-toggle)과 동일: 단일 아이콘 + off는 좌우반전, 회색/퍼플 */
.up111-right-section .btn-toggle-isuse-wrap .ob01-toggle {
    font-size: 40px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
}
.up111-right-section .btn-toggle-isuse-wrap .ob01-toggle.on {
    color: #6a61f5;
}
.up111-right-section .btn-toggle-isuse-wrap .ob01-toggle:not(.on) {
    transform: scaleX(-1); /* off = 노브 왼쪽 */
}

.up111-right-section .tab-update-status {
    position: relative; /* 내부 absolute modif-count가 이 행 기준으로 위치 → 스크롤 시 함께 이동 */
    font-size: 16px;
    color: var(--oligo-neutral-500);
    font-weight: 500;
}

.up111-right-section .tab-update-status .modif-count {
    position: absolute !important;
    right: 0em !important;
}

.up111-right-section .tab-update-status .emp-update-count {
    font-weight: bold;
    color: var(--oligo-primary);
}

.up111-right-section-btn-container {
    flex-shrink: 0; /* flow 배치(하단) — 템플릿과 겹침 방지 (기존 absolute 제거) */
    width: 100%;
    z-index: 20;
    background: #FFFFFF;
}

.up111-right-section-btn-wrap {
    display: flex;
    align-items:center;
}

.up111-right-section-btn-container .btn-apply-all {
    position: relative;
    width: 100%;
    margin: 1em 1.6em;
    padding: 0.5em;
    font-size: 16px;
    color: #6A61F5;
    font-weight: 500;
    border: 1px solid #6A61F5;
    border-radius: 0.5em;
    text-align: center;
    cursor:pointer;
}
/* 상품 작업 메뉴 — 패널 맨 아래라 위로 펼친다. 트리거·항목 모두 템플릿 타일 톤(흰 바탕·회색 보더·hover 보라) */
.up111-actions {
    position: relative;
    width: 100%;
    margin: 12px 30px;
}
.up111-actions__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.up111-actions__trigger > svg {
    flex-shrink: 0;
    color: #9ca3af;
    transition: color .15s, transform .15s;
}
.up111-actions__trigger-label {
    flex: 1;
}
.up111-actions__trigger:hover,
.up111-actions__trigger[aria-expanded='true'] {
    border-color: #6a61f5;
    background: #f6f5ff;
    color: #6a61f5;
}
.up111-actions__trigger:hover > svg,
.up111-actions__trigger[aria-expanded='true'] > svg {
    color: #6a61f5;
}
.up111-actions__trigger[aria-expanded='true'] .up111-actions__chevron {
    transform: rotate(180deg);
}
.up111-actions__menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .08);
}
.up111-actions__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.up111-actions__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 15px;
    transition: background .15s, color .15s;
}
.up111-actions__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.up111-actions__label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.up111-actions__desc {
    font-size: 11px;
    color: #9ca3af;
}
.up111-actions__item:hover:not(:disabled) {
    background: #f6f5ff;
}
.up111-actions__item:hover:not(:disabled) .up111-actions__icon {
    background: #6a61f5;
    color: #fff;
}
.up111-actions__item:hover:not(:disabled) .up111-actions__label {
    color: #6a61f5;
}
.up111-actions__item:disabled {
    cursor: not-allowed;
}
.up111-actions__item:disabled .up111-actions__label,
.up111-actions__item:disabled .up111-actions__icon {
    color: #c0c4cc;
}

.up111-modal-apply-all .modal-btn-apply-all{
    position: absolute;
    right: 1em;
}


.up111-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}
.up111-stat-inner-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}
.up111-stat-label {
    font-size: 11px;
    font-weight: 500;
}
.up111-stat-sub {
    font-size: 11px;
    color: #cbd5e1;
}

.up111-edit-stat {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    padding: 18px 16px 14px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.up111-edit-stat__count {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #cbd5e1;
    letter-spacing: -1px;
    transition: color 0.2s;
    margin-bottom: 6px;
}
.up111-edit-stat__label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
    transition: color 0.2s;
}
.up111-edit-stat__sub {
    font-size: 11px;
    color: #cbd5e1;
}

.up111-edit-stat--active {
    border-color: #00b3b3;
    background: #f0fafa;
    box-shadow: 0 0 0 3px rgba(0,179,179,0.1);
}
.up111-edit-stat--active .up111-edit-stat__count { color: #00b3b3; }
.up111-edit-stat--active .up111-edit-stat__label { color: #009999; }
.up111-audit-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 14px;
}
.up111-audit-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #0284c7;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.up111-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #334155;
    margin-bottom: 6px;
}

/* 전체/필수 토글 버튼 */
.up111-toggle-wrap {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}
.up111-toggle-btn {
    border-radius: 20px !important;
    padding: 3px 14px !important;
    font-size: 13px !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    transition: background 0.15s, color 0.15s;
}
.up111-toggle-btn.active {
    background: #00B3B3 !important;
    color: #fff !important;
}











/* UP111 푸터 - 하단 고정 floating */
.up111-footer {
    position: fixed;
    bottom: 16px;
    left: var(--sidebar-width);
    right: 370px;
    z-index: 99;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.up111-footer-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    padding: 10px 20px;
}
/* 우측 패널 닫혔을 때 */
.page-wrapper:not(.full) .up111-footer {
    left: var(--sidebar-width);
    right: 0;
}

/* ═══════════════════════════════════════════════════════════
   페이지 CSS — OA01 / OA03 / OB01 / SA02 (기존 src/pages/css/*.css 통합)
   ═══════════════════════════════════════════════════════════ */

/* ── OA01 (가져오기 검색바 · @font-face 는 style.css 전역이라 제외) ── */
/* OA01/OA03 페이지 콘텐츠 폰트: Pretendard (검색바·툴바·그리드·우측패널) */
.oligo-imp-searchbar,
.oligo-imp-searchbar *,
.oa01-grid-toolbar,
.oa01-grid-toolbar *,
.oa01-grid .wj-flexgrid,
.oa01-grid .wj-flexgrid .wj-cell,
.sa02-wrap,
.orp,
.orp *,
.csp,
.csp * {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto,
        'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* 검색바 컨테이너: [검색조건] + [조회버튼] 가로 배치 */
.oligo-imp-searchbar {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 0 5px rgba(17, 24, 39, .06);
    /* overflow:hidden 제거 — 달력(air-datepicker) 팝업이 잘리지 않도록.
       둥근 모서리는 우측 조회버튼 영역(.oligo-imp-searchbtn-wrap)에 직접 radius 부여로 유지 */
    overflow: visible;
}

/* 검색조건 영역 (2줄) */
.oligo-imp-searchbar .oligo-imp-cond {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}
.oligo-imp-searchbar .oligo-imp-row {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
}
.oligo-imp-searchbar .oligo-imp-field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.oligo-imp-searchbar .oligo-imp-field.grow { flex: 1 1 0; min-width: 0; }
.oligo-imp-searchbar .oligo-imp-field.grow .form-control { flex: 1 1 0; min-width: 0; max-width: 420px; }
/* 템플릿 검색바(OA04/OA05): 검색 input을 끝까지(420 제한 해제) */
.oligo-imp-searchbar.oligo-tmpl-search .oligo-imp-field.grow .form-control { max-width: none; }
.oligo-imp-searchbar .oligo-imp-label {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.oligo-imp-searchbar .w-140p { width: 140px !important; }

/* 입력/셀렉트 포커스 → 퍼플 */
.oligo-imp-searchbar .form-control:focus,
.oligo-imp-searchbar .form-select:focus {
    border-color: #6a61f5 !important;
    box-shadow: 0 0 0 2px rgba(106, 97, 245, .15) !important;
}

/* 조회 버튼 영역 (우측, 풀 높이) */
.oligo-imp-searchbar .oligo-imp-searchbtn-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: #f6f5ff;
    border-left: 1px solid #e5e7eb;
    border-radius: 0 12px 12px 0;
}
.oligo-imp-searchbar .oligo-imp-searchbtn {
    background: #6a61f5;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
}
.oligo-imp-searchbar .oligo-imp-searchbtn:hover { background: #554ce9; }
/* 조회 중(응답 전)엔 비활성 — 중복 조회 방지(useLatestRequest) */
.oligo-imp-searchbar .oligo-imp-searchbtn:disabled { background: #6a61f5; opacity: 0.55; cursor: default; }
.oligo-imp-searchbar .oligo-imp-resetbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
}
.oligo-imp-searchbar .oligo-imp-resetbtn:hover { color: #554ce9; border-color: #554ce9; }

/* 칩 */
.oligo-imp-searchbar .filter-chip { flex-wrap: wrap; gap: 6px; }

/* 검색바 접기 토글(ImpSearchToggle) — 데스크톱에선 존재하지 않는 것처럼 둔다.
   버튼을 숨기고, 접는 규칙도 아래 @media(max-width:992px) 안에만 둔다.
   ⚠ 이 규칙은 반드시 그 @media 보다 앞에 있어야 한다. 뒤에 두면 특이도가 같아
      나중 규칙이 이겨서 좁은 화면에서도 버튼이 숨겨진다. */
.oligo-imp-searchbar .imp-collapse { display: none; }

/* 간격 30: 제목→검색(상단 14 + page-body 16) / 검색→그리드(하단 30) */
.oligo-imp-searchbar { margin-top: 14px; margin-bottom: 30px; }

/* ============================================================
   등록일: Figma 날짜 박스 (달력 아이콘 왼쪽 + 붙은 라운드 박스 + ~ 커넥터)
   + 기간 select → 보라 pill (닫힌 상태만 Figma; 열린 목록은 브라우저 기본)
   ============================================================ */
/* 두 날짜박스+커넥터 붙이기 (gap 제거). 판매가 구간(.calendar 없음)은 영향 없음 */
.oligo-oa01-search .d-flex.gap5:has(.calendar) { gap: 0; align-items: center; }
/* CustomSelect(.csel)가 캘린더 앞에 올 때 간격 (네이티브 .form-select margin 규칙 대체) */
.oligo-oa01-search .d-flex.gap5:has(.calendar) > .csel { margin-right: 10px; }
/* ── 검색용 날짜범위(DateRangeGroup) 공통 크롬 ──
   OA01 검색바(.oligo-oa01-search) + 빠른검색(.qs-date-inputs) 공용.
   폼 필드/상세 달력(.calendar 기본형)엔 영향 없도록 검색 스코프에 한정.
   화면별 차이(폭·폰트)만 아래에서 분리. (Figma 4011-12239) */
.oligo-oa01-search .calendar,
.qs-date-inputs .calendar,
.import-job-form .calendar,
.jlm-filter .calendar { height: 30px; }
.oligo-oa01-search .calendar .calendar-icon,
.qs-date-inputs .calendar .calendar-icon,
.import-job-form .calendar .calendar-icon,
.jlm-filter .calendar .calendar-icon { left: 10px; right: auto; width: 14px; height: 14px; color: #9ca3af; }
.oligo-oa01-search .calendar .form-control,
.qs-date-inputs .calendar .form-control,
.import-job-form .calendar .form-control,
.jlm-filter .calendar .form-control {
    height: 30px;
    line-height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
    padding: 0 10px 0 30px;
    color: #6b7280;
}
/* OA01 검색바 전용: 폭 135 · 폰트 14 */
.oligo-oa01-search .calendar .form-control { width: 135px; font-size: 14px; }
/* 가져오기 모달 기준일: 폭 120 · 폰트 14 */
.import-job-form .calendar .form-control { width: 130px; font-size: 14px; }
/* 작업목록 모달 기간: 높이 40 · 폭 135 · 폰트 16 (모달 select/작업명과 통일 — 기존 달력 14px과 별개) */
.jlm-filter .calendar { height: 40px; }
.jlm-filter .calendar .form-control { height: 40px; line-height: 38px; width: 135px; font-size: 16px; color: #6b7280; }
/* '~' 커넥터: 테두리·패딩 없이 텍스트만 (gap 만으로 간격), 폰트도 모달 기준 16 */
.jlm-filter__row > span:not(.calendar) {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; height: 40px; padding: 0;
    border: 0; color: #9ca3af; font-size: 16px;
}
/* 빠른기간 pill: 모달 컨트롤과 동일하게 높이 40 · 폰트 16 */
.jlm-filter .qr-trigger { height: 40px; font-size: 16px; }
/* '~' 커넥터: 테두리(박스) 없이 텍스트만 노출, 양옆 8px 간격 */
.oligo-oa01-search .d-flex.gap5:has(.calendar) > span:not(.calendar) {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; height: 30px; padding: 0 8px;
    border: 0; color: #9ca3af; font-size: 14px;
}
/* 기간 선택: 커스텀 드롭다운(QuickRangeDropdown)로 대체 — 좌측 여백만 부여 */
.oligo-oa01-search .qr-dropdown { margin-left: 10px; }

/* ── 그리드 카드: 좌우 인셋 제거 (그리드가 카드 폭 꽉 차게) ── */
.oa01-grid-card > .card-body { padding-left: 0 !important; padding-right: 0 !important; }

/* ── 그리드 툴바 (MOCK02: 좌 카운트+패널접기 / 우 쓰레기통+상품가져오기) ── */
.oa01-grid-toolbar { width: 100%; min-height: 44px; margin-bottom: 10px; padding-left: 20px; padding-right: 20px; }
/* 카드뷰: 툴바 하단 여백 제거 (섹션 헤더가 바로 붙게) */
.oa01-grid-toolbar.ob01-toolbar-nomb { margin-bottom: 0; }
/* 카운트: MOCK02 (라벨 회색 16px + 숫자 퍼플 볼드) */
.oa01-grid-toolbar > div:first-child { font-size: 16px; color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 20px; }
.oa01-grid-toolbar .tot-count,
.oa01-grid-toolbar .select-count { color: #6a61f5 !important; font-weight: 700; }

/* ── 그리드 스타일은 grid.css(전역)로 이관 (모든 그리드 일관). auto 높이만 OA01 스코프로 grid.css에 있음 ── */
.oa01-panel-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; color: #9ca3af; cursor: pointer;
}
.oa01-panel-btn:hover { background: #e5e7eb; }
/* 활성(패널 열림) = 퍼플 soft 채움 (Figma Select 상태) */
.oa01-panel-btn.active { background: #f6f5ff; border-color: #dfddff; color: #6a61f5; }
/* 패널 토글 툴팁 (펼치기/접기) — hover 시 버튼 아래 중앙 + 위 세모 */
.oa01-panel-btn { position: relative; }
.oa01-panel-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    background: #191f28;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 7px;
    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: 30;
}
.oa01-panel-btn[data-tip]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #191f28;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 31;
}
.oa01-panel-btn:hover::after,
.oa01-panel-btn:hover::before { opacity: 1; }
.oa01-trash-btn {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px; color: #9ca3af; cursor: pointer;
}
.oa01-trash-btn:hover { background: #e5e7eb; }
.oa01-trash-btn:disabled { opacity: .45; cursor: not-allowed; }
.oa01-trash-btn:disabled:hover { background: #fff; }
.oa01-import-btn {
    display: flex; align-items: center; gap: 8px; padding: 8px 18px;
    background: #fff; border: 1px solid #00b3b3; border-radius: 8px;
    color: #00b3b3; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.oa01-import-btn:hover { background: #e1f3f4; }
/* primary/default 채움 변형 (신규등록 등 메인 CTA) */
.oa01-import-btn.oa01-import-btn--primary { background: #6a61f5; border-color: #6a61f5; color: #fff; }
.oa01-import-btn.oa01-import-btn--primary:hover { background: #574fd6; border-color: #574fd6; }
/* primary/default 아웃라인 변형 (흰 배경 + 보라 보더/텍스트) */
.oa01-import-btn.oa01-import-btn--primary-outline { border-color: #6a61f5; color: #6a61f5; }
.oa01-import-btn.oa01-import-btn--primary-outline:hover { background: #f6f5ff; }
/* 회색 변형 (연동해제 등 — oa01-trash-btn 과 동일 회색 톤) */
.oa01-import-btn.oa01-import-btn--gray { border-color: #d1d5db; color: #9ca3af; }
.oa01-import-btn.oa01-import-btn--gray:hover { background: #e5e7eb; }
.oa01-import-btn.oa01-import-btn--gray:disabled { opacity: .45; cursor: not-allowed; }
.oa01-import-btn.oa01-import-btn--gray:disabled:hover { background: #fff; }

/* OB01 채널관리 그리드: 채널 로고 박스 (흰 배경 + 라운드 + 소프트 섀도우) */
.ob01-ch-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 24px;
    padding: 0 2px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(17, 24, 39, 0.2);
}
.ob01-ch-logo img { display: block; object-fit: contain; width: 100%; height: 100%; }

/* OB01 채널관리 카드뷰 (섹션 헤더 + 채널 카드) */
.ob01-card-section-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}
.ob01-card-section-label {
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}
.ob01-card-section-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.ob01-card-section-count {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.ob01-card-section-count b {
    color: #6a61f5;
    font-weight: 700;
}

.ob01-vcard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.1);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ob01-vcard:hover {
    border-color: #6a61f5;
    box-shadow: 0 2px 14px rgba(106, 97, 245, 0.3);
}
.ob01-vcard:not(.is-off):hover .ob01-vcard-name {
    color: #6a61f5;
}
.ob01-vcard.is-off {
    background: #f9fafb;
}
.ob01-vcard-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ob01-vcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ob01-vcard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    width: 41px;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.ob01-vcard-chip .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.ob01-vcard-chip.on {
    width: 41px;
    background: #dbf3ea;
    color: #00a96c;
}
.ob01-vcard-chip.off {
    width: 50px;
    background: #e5e7eb;
    color: #9ca3af;
}
.ob01-vcard-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ob01-vcard-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    line-height: 17.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob01-vcard.is-off .ob01-vcard-name {
    color: #9ca3af;
}
.ob01-vcard-code {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob01-vcard-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ob01-vcard-badge {
    padding: 4px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}
.ob01-vcard-badge.collect {
    background: #e1f3f4;
    color: #00b3b3;
}
.ob01-vcard-badge.send {
    background: #dfddff;
    color: #6a61f5;
}

/* ── 헤더 액션: 작업목록 라벨 + 드롭다운 + 상품 배지 (MOCK02) ── */
.oa01-worklist-label { font-size: 16px; font-weight: 500; color: #6b7280; white-space: nowrap; flex-shrink: 0; }
#page-header-actions .job-dropdown-trigger {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    height: 30px;
}
.oa01-progress {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; flex-shrink: 0;
    background: #e5e7eb; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: #6b7280; white-space: nowrap;
}
.oa01-progress b { color: #6a61f5; font-weight: 700; }

/* ── OA03 (상품전송 전용 오버라이드) ── */
/* ============================================================
   OA03.css — 상품전송 전용 오버라이드
   - 공통 레이아웃/검색바/툴바/그리드는 OA01.css + grid.css 재사용
   - 여기엔 OA03 전용 차이만 (select 폭, 상품전송 퍼플, 상세필터 펼치기 토글)
   ============================================================ */

/* 1. 채널/계정·상세필터 select 폭 축소 (기존 flex-fill로 너무 넓던 것) */
.oligo-oa01-search .oa03-chan-sel { width: 150px; flex: 0 0 auto; }
.oligo-oa01-search .oa03-filter-sel { width: 110px; flex: 0 0 auto; }

/* 등록일: 상품등록일 select ↔ 달력 사이 간격 (달력끼리는 gap:0 로 붙였으므로 select 에만 우측 여백) */
.oligo-oa01-search .d-flex.gap5:has(.calendar) > .form-select { margin-right: 10px; }

/* 5. 그리드 툴바 '상품전송' 버튼: 퍼플(#6a61f5) 아웃라인 (OA01 import 버튼은 teal) */
.oa01-import-btn.oa03-send-btn { border-color: #6a61f5; color: #6a61f5; }
.oa01-import-btn.oa03-send-btn:hover { background: #f0efff; }

/* 2. 상세 필터 펼치기/접기 토글 — 검색바 바깥 하단 중앙에 걸친 pill (Figma 4047-752) */
.oligo-imp-searchbar.oligo-oa01-search { position: relative; }
.oligo-oa01-search .oa03-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: 23px; padding: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0 0 10px 10px; border-top: 0;
    color: #9ca3af; cursor: pointer;
    box-shadow: 0 2px 4px rgba(17, 24, 39, .04);
}
/* pill 입구 위쪽 검색바 하단 테두리선 가리기 (흰 띠) */
.oligo-oa01-search .oa03-filter-toggle::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: #fff;
}
.oligo-oa01-search .oa03-filter-toggle:hover { color: #6a61f5; }
.oligo-oa01-search .oa03-filter-toggle svg { transition: transform .15s ease; }
.oligo-oa01-search .oa03-filter-toggle svg.flip { transform: rotate(180deg); }

/* ── OB01 (채널관리; .ob01-guide 는 page.css에 이미 있어 제외) ── */
/* ── 상태 뱃지 (연동중/미사용) ── */
.badge-active {
    background: #dbf3ea;
    color: #00a96c;
    font-size: 11px;
    font-weight: 600;
}
.badge-inactive {
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

/* ── 벤더(채널/계정) 카드 ── */
.vendor-card {
    position: relative;
    cursor: pointer;
    border: 1px solid #eceef1 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.05) !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* 상단 브랜드 그라데이션 악센트 바 (평소 은은, hover 시 선명) */
.vendor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00b3b3, #6b5afa);
    opacity: 0.35;
    transition: opacity 0.2s ease;
}
.vendor-card:hover {
    transform: translateY(-4px);
    border-color: #00b3b3 !important;
    box-shadow: 0 14px 32px rgba(0, 179, 179, 0.2), 0 4px 12px rgba(16, 24, 40, 0.1) !important;
}
.vendor-card:hover::before {
    opacity: 1;
}
.vendor-card-name {
    color: #1f2937;
    transition: color 0.18s ease;
}
.vendor-card:hover .vendor-card-name {
    color: #00b3b3 !important;
}
/* ── 상세 패널 섹션 ── */
.ob01-card-header-inner { background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.ob01-key-item { background: #f8f9fa; border: 1px solid #e9ebec; }
.ob01-footer { background: #fff; }
.ob01-section-label { color: #6c757d; }

/* ── OB01 채널/계정 상세 패널 (인라인 스타일 이관) ── */
.ob01-detail { padding: 0; overflow: hidden; }
.ob01-detail__scroll { overflow-y: auto; padding: 1rem; }
.ob01-detail__section-label { font-size: 14px; font-weight: 700; color: #1f2937; }
.ob01-detail__ch-logo { width: 30px; height: 30px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 4px; }
.ob01-detail__clear-btn { cursor: pointer; color: #adb5bd; }
.ob01-detail__nowrap { white-space: nowrap; }
.ob01-detail__sub-label { font-size: 12px; }
.ob01-detail__cafe24-note { font-size: 0.75rem; line-height: 1.6; padding: 4px 2px; }
/* 토큰 발급 안내 info 박스 (연보라, 아이콘 좌측) */
.ob01-info-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f6f5ff;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6;
}
.ob01-info-note__icon { flex-shrink: 0; margin-top: 1px; font-size: 16px; color: #6a61f5; }
.ob01-info-note__body { flex: 1; min-width: 0; color: #6b7280; }
.ob01-info-note__title { font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.ob01-info-note__list { list-style: disc; margin: 0; padding-left: 18px; }
.ob01-info-note__list li { margin-bottom: 2px; }
/* 연동할 채널 선택 표시 행: 상하10 좌우20 */
.ob01-panel .ob01-ch-display { width: 100%; }
/* 연동 매뉴얼 버튼 (흰 아웃라인 + 회색) — 상단 툴바·채널 상세 공용 */
.ob01-manual-btn {
    height: 30px;
    padding: 0 10px;
    justify-content: center;
    white-space: nowrap;
    gap: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}
.ob01-manual-btn svg { color: #9ca3af; font-size: 14px; }
.ob01-manual-btn:hover { background: #f9fafb; }
/* 토큰 발급하러 가기: 보라 아웃라인, 너비 144 */
.ob01-token-btn {
    flex: 0 0 144px;
    width: 144px;
    height: 40px;
    justify-content: center;
    font-size: 14px;
    background: #fff;
    border: 1px solid #6a61f5;
    color: #6a61f5;
}
.ob01-token-btn:hover { background: #f6f5ff; color: #6a61f5; border-color: #6a61f5; }
/* 상품연동/사용여부 토글 (FA fa-toggle-large 아이콘, 통통) */
.ob01-panel .ob01-toggle { font-size: 40px; line-height: 1; color: #d1d5db; cursor: pointer; margin: -6px 0; } /* 세로 투명여백 상쇄 → 행 높이 Figma(~47) 맞춤 */
.ob01-panel .ob01-toggle.on { color: #6a61f5; }
.ob01-panel .ob01-toggle:not(.on) { transform: scaleX(-1); } /* off = 노브 왼쪽(좌우반전) */
.ob01-panel .ob01-toggle.disabled { cursor: not-allowed; color: #9ca3af; }
/* 상품 연동 설정 표: 행(라벨+토글) — 지원안함 시 회색 처리 */
.ob01-panel .ob01-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    margin: 0;
    padding: 10px 11px;
    background: #fff;
}
.ob01-panel .ob01-toggle-row + .ob01-toggle-row { border-top: 1px solid #e5e7eb; }
.ob01-panel .ob01-toggle-row__label { font-size: 16px; color: #6b7280; }
.ob01-panel .ob01-toggle-row--disabled { background: #f3f4f6; }
.ob01-panel .ob01-toggle-row--disabled .ob01-toggle-row__label { color: #9ca3af; }
/* API 인증 만료일시 행 */
/* API 만료일시 입력칸: 읽기전용 회색 */
.ob01-panel .ob01-expire-input { flex: 1; min-width: 0; background: #f3f4f6; }
/* API 인증: AccessKey+만료 / SecretKey+만료 세트 묶음 박스 */
.ob01-panel .ob01-detail .card-body .ob01-key-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fafbfc;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 12px;
}
/* 패널 필드 행 통일: 라벨(col-sm-4) 최소 135 + 입력(col-sm-8) 채움, 사이 20 */
.ob01-panel .ob01-detail .card-body .row { flex-wrap: nowrap; align-items: center; margin: 0; }
.ob01-panel .ob01-detail .card-body .row > .col-sm-4 {
    flex: 0 0 136px;
    width: 136px;
    max-width: 136px;
    padding: 0;
}
.ob01-panel .ob01-detail .card-body .row > .col-sm-8 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
    margin-left: 20px;
}
.ob01-detail__title { font-size: 16px; }
.ob01-detail__sub-text { font-size: 12px; }
.ob01-detail__footer { flex-shrink: 0; }
/* 폼 라벨: 살짝 들여쓰기 + 톤 통일 (폰트/여백만 — 레이아웃 영향 없음) */
.ob01-detail .form-label { padding-left: 8px; color: #64748b; font-size: 13px; font-weight: 500; }

/* ── 채널/계정 추가·상세 패널 Figma 정합 (.ob01-panel 스코프) ── */
/* 헤더: 좌우30 상하20, h64, 타이틀 20 Bold */
.ob01-panel .csp-head { padding: 20px 30px; min-height: 64px; }
.ob01-panel .csp-title { font-size: 20px; font-weight: 700; color: #1f2937; letter-spacing: -0.5px; }
.ob01-panel .csp-close { color: #9ca3af; }
/* 바디: 좌우30 상하20, 섹션 간 간격 20. 스크롤바 자리 항상 예약(가로 점프 방지) */
.ob01-panel .ob01-detail__scroll { padding: 20px 30px; gap: 20px; scrollbar-gutter: stable; }

/* ═══ 섹션 표(헤더바 + 본문 행) — 피그마 4470:19531 통일 체계 ═══ */
/* 스크롤 컨테이너 자식(섹션·안내문)이 찌부러지지 않도록 (flex-shrink 방지) */
.ob01-panel .ob01-detail__scroll > * { flex-shrink: 0; }
.ob01-panel .ob01-sec { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
/* CustomSelect 섹션: 드롭다운(.csel-menu)이 잘리지 않게 overflow 허용 + 모서리 직접 라운딩 */
.ob01-panel .ob01-sec--select { overflow: visible; }
.ob01-panel .ob01-sec--select .ob01-sec__head { border-radius: 10px 10px 0 0; }
.ob01-panel .ob01-sec--select .ob01-sec__row { border-radius: 0 0 10px 10px; }
.ob01-panel .ob01-sec__head {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 11px 21px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.ob01-panel .ob01-sec__row {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px 11px;
}
.ob01-panel .ob01-sec__row--wide { padding: 10px 21px; min-height: 60px; } /* 연동할 채널 행(로고: 헤더와 21 정렬) */
/* select일 땐 입력칸 행과 동일하게 11px로 채워 좌우 비지 않게 */
.ob01-panel .ob01-sec__row--wide:has(.csel) { padding-left: 11px; padding-right: 11px; }
.ob01-panel .ob01-sec__row--split { justify-content: space-between; }
.ob01-panel .ob01-sec__row--disabled { background: #f3f4f6; }
/* 필드: 라벨(고정폭 180) + 입력(우측 채움) */
.ob01-panel .ob01-field { display: flex; align-items: center; gap: 20px; width: 100%; }
.ob01-panel .ob01-field__label { flex: 0 0 136px; font-size: 16px; line-height: 1.35; white-space: pre-line; color: #6b7280; }
.ob01-panel .ob01-field__control { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
/* 입력칸 아래 안내 문구: 입력칸 시작선(행 패딩 11 + 라벨 136 + 간격 20)에 맞춘다 */
.ob01-panel .ob01-field__hint { background: #fff; padding: 0 11px 10px 167px; margin-top: -4px; font-size: 13px; line-height: 1.5; color: #6b7280; }
.ob01-panel .ob01-field__control .form-control {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
}
.ob01-panel .ob01-field__control .form-control:disabled,
.ob01-panel .ob01-field__control .form-control[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    cursor: not-allowed;
}
/* 라벨행(토글 등): 라벨 좌 + 컨트롤 우 */
.ob01-panel .ob01-row-label { font-size: 16px; color: #6b7280; }
.ob01-panel .ob01-sec__row--disabled .ob01-row-label { color: #9ca3af; }
/* 필수(*) 표시 */
.ob01-panel .ob01-req { color: #ff3149; }
/* 섹션 카드: 라운드10, 보더 #e5e7eb */
.ob01-panel .ob01-detail .card.border { border-color: #e5e7eb; border-radius: 10px; }
/* 섹션 헤더 바: px21, 최소높이 50, 수직중앙 */
.ob01-panel .ob01-card-header-inner { min-height: 50px; display: flex; align-items: center; padding: 0 21px; }
/* 섹션 바디: px21 py10, 최소높이 71 (select 50 + 상하패딩 = 71) */
.ob01-panel .ob01-detail .card-body { padding: 10px 21px; }
/* 항목(입력 행/세트) 사이 간격 20 — 기본정보 포함 전 섹션 동일. 단 사용여부(d-flex 단일행 카드)는 제외 */
.ob01-panel .ob01-detail .card-body:not(.d-flex) { display: flex; flex-direction: column; gap: 20px; }
/* 상품 연동 설정: 토글 행 사이 간격만 10 */
.ob01-panel .ob01-detail .card-body.ob01-toggle-body { gap: 0; overflow: hidden; border-radius: 0 0 10px 10px; }
/* 연동할 채널 select 트리거: 높이 50 */
.ob01-panel .ob01-detail .csel-trigger { height: 40px; padding: 0 10px; font-size: 16px; } /* 입력칸(40)과 통일 */
/* 필드 라벨: 16 Medium #6b7280, 안쪽으로 20 들여쓰기 */
.ob01-panel .ob01-detail .form-label { padding-left: 10px; font-size: 16px; font-weight: 500; color: #6b7280; }
/* 입력칸: h40, radius8, border #e5e7eb, 폰트16 */
.ob01-panel .ob01-detail .form-control { height: 40px; border-radius: 8px; border-color: #e5e7eb; font-size: 16px; }
/* 푸터: 높이 88, 좌우30, 버튼 h48 radius10 */
/* 우측은 예약된 스크롤바 폭(≈17)만큼 더 줘서 스크롤 영역 콘텐츠와 정렬 (30 + 17 = 47) */
.ob01-panel .ob01-detail__footer { height: 88px; padding: 20px 47px 20px 30px; align-items: center; }
/* 삭제: 흰 아웃라인 + 회색 trash 아이콘 */
.ob01-panel .ob01-detail__del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
}
.ob01-panel .ob01-detail__del-btn:hover { background: #e5e7eb; }
.ob01-panel .ob01-detail__footer .btn {
    height: 48px;
    width: auto;
    min-width: 0;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ob01-panel .ob01-detail__footer .btn-light { background: #fff; border: 1px solid #e5e7eb; color: #6b7280; }
.ob01-panel .ob01-detail__footer .btn-primary { background: #6a61f5; border-color: #6a61f5; color: #fff; }

/* 상품정보 하단 푸터: 사용여부(is_active) 토글 (전체/필수 토글 옆) */
.up111-active-wrap { display: flex; align-items: center; gap: 8px; }
/* 사용여부 토글은 브랜드 보라 (전체/필수 청록과 구분) */
.up111-active-wrap .up111-toggle-btn.active { background: #6a61f5 !important; }

/* ============================================================
   반응형(≤992) — 콘솔 콘텐츠
   Phase2(Main.css 셸 드로어)와 같은 브레이크포인트.
   여기 규칙은 전부 @media 안에만 둔다 → 데스크톱(≥993) 무영향.
   대상: .oligo-imp-searchbar / .oa01-grid-toolbar 를 쓰는 9개 목록화면
        (OA01~OA05, OB01, LO01, SA02, CS01) 공통.
   ============================================================ */
@media (max-width: 992px) {
    /* ── 검색바: [검색조건 | 조회버튼] 가로 배치 → 세로 스택 ── */
    .oligo-imp-searchbar {
        flex-direction: column;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    /* 세로 스택에선 cond/field 의 flex:1 이 '세로로' 늘어나므로 해제 */
    .oligo-imp-searchbar .oligo-imp-cond {
        flex: 0 0 auto;
        gap: 12px;
        padding: 14px;
    }
    .oligo-imp-searchbar .oligo-imp-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    /* 필드: 라벨 좌측 인라인 → 라벨 상단 + 컨트롤 풀폭 */
    .oligo-imp-searchbar .oligo-imp-field {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .oligo-imp-searchbar .oligo-imp-field.grow { flex: 0 0 auto; }
    .oligo-imp-searchbar .oligo-imp-label { font-size: 13px; }

    /* 컨트롤 고정폭/폭제한 해제 (CustomSelect 는 인라인 width → !important 필요) */
    .oligo-imp-searchbar .oligo-imp-field.grow .form-control {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }
    .oligo-imp-searchbar .csel,
    .oligo-imp-searchbar .w-120p,
    .oligo-imp-searchbar .w-135p,
    .oligo-imp-searchbar .w-140p { width: 100% !important; }

    /* 날짜범위: [시작]~[종료] 한 줄 + 빠른기간은 다음 줄로 접힘 */
    .oligo-oa01-search .d-flex.gap5:has(.calendar) {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .oligo-oa01-search .calendar { flex: 1 1 0; min-width: 0; }
    .oligo-oa01-search .calendar .form-control { width: 100%; }
    .oligo-oa01-search .qr-dropdown { margin-left: 0; flex: 0 0 100%; }
    .oligo-oa01-search .qr-trigger { width: 100%; justify-content: space-between; }

    /* 조회 버튼: 우측 세로바 → 하단 가로바(풀폭) */
    .oligo-imp-searchbar .oligo-imp-searchbtn-wrap {
        flex-direction: row;
        padding: 12px 14px;
        border-left: 0;
        border-top: 1px solid #e5e7eb;
        border-radius: 0 0 12px 12px;
    }
    .oligo-imp-searchbar .oligo-imp-searchbtn { flex: 1 1 auto; padding: 11px 16px; }
    .oligo-imp-searchbar .oligo-imp-resetbtn { flex: 0 0 auto; height: 40px; width: 40px; }

    /* ── 그리드 툴바: 좌(카운트)/우(액션) 1줄 고정 → 줄바꿈 허용 ── */
    .oa01-grid-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .oa01-grid-toolbar > div:first-child { font-size: 15px; gap: 12px; }

    /* 툴바의 좌/우 묶음은 각각 d-flex 라 안쪽 버튼이 줄바꿈되지 않는다.
       OA03 은 우측에 대량수정·삭제·연동해제·상품전송 4개가 붙어 427px 인데
       툴바는 297px 라 '상품전송' 이 화면 밖으로 나갔다. */
    .oa01-grid-toolbar > div { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
    /* 버튼을 조금 줄여 한 줄에 더 담는다.
       높이를 같이 지정해야 한다 — padding 만 줄이면 세로 여백이 사라져 33px 가 되는데
       휴지통(.oa01-trash-btn)은 44px 정사각 고정이라 나란히 놓였을 때 높이가 어긋난다. */
    .oa01-grid-toolbar .oa01-import-btn {
        height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }
    .oa01-grid-toolbar .oa01-trash-btn {
        width: 38px;
        height: 38px;
    }

    /* 상세 필터 토글은 검색 카드 하단에 매달린 탭이다.
       검색바가 접히면 카드 사이에 고아처럼 떠 있어 어색하므로 같이 숨긴다. */
    .oligo-imp-searchbar:has(> .imp-collapse[aria-expanded='false']) .oa03-filter-toggle {
        display: none;
    }

    /* ── 검색바 접기 ──
       모바일에서 검색바는 290~604px(조건 6개인 OA02 기준)까지 길어져 그리드가
       첫 화면 밖으로 밀린다. 기본 접힘 + 헤더 스트립만 남긴다.
       상태는 버튼의 aria-expanded 에만 있고 여기서 :has 로 읽는다 — 부모 className 을
       토글하면 페이지 리렌더 때 React 가 덮어써서 날아간다. */
    .oligo-imp-searchbar .imp-collapse {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 14px;
        border: 0;
        background: transparent;
        border-radius: 12px;
        cursor: pointer;
    }
    .oligo-imp-searchbar .imp-collapse__label { font-size: 14px; font-weight: 600; color: #374151; }
    .oligo-imp-searchbar .imp-collapse__caret { font-size: 14px; color: #9ca3af; transition: transform 0.18s ease; }
    .oligo-imp-searchbar .imp-collapse[aria-expanded='true'] .imp-collapse__caret { transform: rotate(180deg); }

    /* 접힘: 조건 영역과 조회 바를 감춰 스트립 한 줄만 남긴다 */
    .oligo-imp-searchbar:has(> .imp-collapse[aria-expanded='false']) > .oligo-imp-cond,
    .oligo-imp-searchbar:has(> .imp-collapse[aria-expanded='false']) > .oligo-imp-searchbtn-wrap {
        display: none;
    }
    /* 펼침: 스트립과 조건 영역 사이 경계선 */
    .oligo-imp-searchbar:has(> .imp-collapse[aria-expanded='true']) > .imp-collapse {
        border-bottom: 1px solid #e5e7eb;
        border-radius: 12px 12px 0 0;
    }
    /* 접혔을 땐 조건 영역 상단 여백이 없으므로 아래 간격을 줄인다 */
    .oligo-imp-searchbar:has(> .imp-collapse[aria-expanded='false']) { margin-bottom: 12px; }
}

/* ============================================================
   반응형(≤992) — 페이지 헤더 액션 영역(#page-header-actions)
   헤더 한 줄에 [햄버거 + 제목 + 액션 + 우측아이콘]이 모두 들어가는데,
   OA01 작업목록 드롭다운(min-width:250 인라인) 같은 액션이 들어오면
   좁은 화면에서 헤더가 통째로 가로로 밀린다 → 액션을 둘째 줄로 내린다.
   ============================================================ */
@media (max-width: 992px) {
    /* 액션을 제목줄 아래 한 줄로 내린다.
       .col 안에서 줄바꿈시키면 .col 폭(우측 아이콘과 나눠 가져 360에서 158px)에 갇히고,
       헤더 행은 height:40px 고정이라 늘어나지도 않아 본문에 가려진다.
       → 헤더 아래에 한 줄 여백을 확보하고 액션만 absolute 로 전체폭에 깐다.
       액션이 없는 화면(대시보드 등)은 :has 로 제외 → 빈 여백이 생기지 않는다. */
    #layout-wrapper .page-header:has(#page-header-actions > *) {
        position: relative;
        padding-bottom: 44px !important;
    }
    #layout-wrapper #page-header-actions:has(> *) {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 6px;
        min-width: 0;
        margin: 0;
    }
    #layout-wrapper #page-header-actions > * { min-width: 0; }

    /* OA01 작업목록: 인라인 min-width:250 / 내부 max-width:200 해제 */
    #page-header-actions .job-dropdown-trigger { min-width: 0 !important; flex: 1 1 auto; }
    #page-header-actions .job-dropdown-trigger > span { max-width: none !important; }
    /* '작업목록' 라벨은 폭이 모자랄 때만 줄어들도록 */
    .oa01-worklist-label { font-size: 14px; }
    .oa01-progress { flex: 0 0 auto; white-space: nowrap; }
}

/* 노트북(993~1199) — OA01 헤더 [작업목록][드롭다운 min 250][상품 0/0] 이 헤더에 남는 칸
   (1100 에서 300, 993 에서 192)보다 넓어 상단바 [프로][새 탭] 아래로 파고들었다.
   줄여서는 993 에서 안 들어가므로 ≤992 와 같은 방식으로 둘째 줄에 내린다(OA01 에만). */
@media (min-width: 993px) and (max-width: 1199px) {
    #layout-wrapper .page-header:has(#page-header-actions .oa01-worklist-label) {
        position: relative;
        padding-bottom: 44px !important;
    }
    #layout-wrapper #page-header-actions:has(.oa01-worklist-label) {
        position: absolute;
        left: 45px; /* 제목(가져오기) 시작점과 맞춘다 */
        right: 36px;
        bottom: 6px;
        min-width: 0;
        margin: 0;
    }
    /* 제목 아래 줄에서는 오른쪽 끝(ms-auto)이 아니라 제목 밑에서 시작 */
    #page-header-actions:has(.oa01-worklist-label) .ms-auto { margin-left: 0 !important; }
}

/* ============================================================
   반응형(≤992) — UP111 상품정보 (OA02/OA03 안에 임베드되는 상세 화면)
   데스크톱은 [좌 채널목록 330px][중앙 폼 flex:1] 가로 2단이고 바깥을
   overflow:hidden 으로 잘라 둔다. 360px 에서는 좌측 330px 만으로 폭을 다 써서
   폼이 통째로 잘린 영역 밖에 있었다 — 목록에서 상품을 눌러도 아무것도 못 고쳤다.
   세로 스택으로 바꾸고, 채널 목록은 높이를 제한해 폼이 곧바로 이어지게 한다.
   ============================================================ */
@media (max-width: 992px) {
    /* 2단 → 세로 스택. 바깥 자르기도 푼다(바깥 .page-body 가 스크롤을 맡는다)
       ⚠️ 높이도 같이 풀어야 한다 — flex-grow-1 로 부모(화면) 높이에 묶여 있으면 세로로 쌓은
          내용이 그 안에 다 안 들어가고, 아래 자식들이 shrink 로 눌려 잘린다. */
    .up111-body-wrap {
        flex-direction: column;
        overflow: visible;
        border-radius: 0;
        height: auto;
        flex: 0 0 auto;
    }
    .up111-page-body {
        overflow: visible !important;
        height: auto;
    }

    /* 채널 목록: 전체폭 + 높이 제한(길어도 폼이 화면 밖으로 밀리지 않게).
       주축은 폼이므로 기본은 '접힘' — 머리글만 남기고 내용을 감춘다. */
    .up111-left-panel {
        width: 100%;
        flex: 0 0 auto;
        max-height: 40dvh;
        overflow-y: auto;
        border-right: 0;
        border-bottom: 0;
    }
    .up111-left-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid var(--tblr-border-color-translucent);
        background: #fff;
        font-size: 13px;
        font-weight: 700;
        color: #2d2d2d;
    }
    .up111-left-panel.is-collapsed {
        max-height: none;
        overflow: visible;
    }
    .up111-left-panel.is-collapsed > *:not(.up111-left-toggle) {
        display: none;
    }
    /* '채널 추가'는 absolute(bottom:0) 라 스크롤 영역 맨 아래에 겹쳐 목록 마지막 항목을 가린다.
       좁은 화면에선 흐름에 넣어 목록 끝에 자연스럽게 오게 한다(패널 자체가 스크롤을 맡는다). */
    .btn-up111-add-ch-wrap {
        position: static;
    }

    /* 채널 목록 SimpleBar 해제 — 세로 스택으로 바꾸며 높이 사슬을 풀었더니 SimpleBar 컨테이너가
       높이 계산 근거를 잃고 0px 로 무너졌다(내용 138px, 컨테이너 0px → 목록이 패널 스크롤에
       잡히지 않아 채널이 많아도 스크롤로 닿을 수 없었다).
       좁은 화면에선 내부 스크롤을 쓰지 않고 패널(max-height + overflow-y:auto)이 스크롤을 맡는다. */
    .up111-left-panel .vendor-list-simplebar,
    .up111-left-panel .simplebar-wrapper,
    .up111-left-panel .simplebar-mask,
    .up111-left-panel .simplebar-offset,
    .up111-left-panel .simplebar-content-wrapper {
        height: auto !important;
        max-height: none !important;
        position: static !important;
        overflow: visible !important;
    }
    .up111-left-panel .simplebar-track {
        display: none !important;
    }

    /* 상단 '상품명 …' 은 아래 ≤1199 블록에서 처리 */
    /* 접혀 있으면 폼이 화면을 거의 다 쓴다 */
    .up111-left-panel.is-collapsed + .up111-center-panel {
        max-height: 76dvh;
    }

    /* 폼: 자기 높이를 갖고 내부에서 스크롤한다.
       ⚠️ flex-shrink 는 0 이어야 한다 — 1 이면 좌측 패널이 먼저 자리를 차지한 뒤 남은 높이로
          눌린다(실측 360px 로 눌려 내용 1747px 중 1494px 이 잘렸던 적이 있다).
       ⚠️ overflow 는 visible 이 아니라 auto — visible 이면 목록과 폼이 한 덩어리로 이어져
          어디까지가 폼인지 구분이 안 되고, 페이지 전체가 길어져 탭 줄이 멀어진다.
       위쪽 회색 띠로 채널 목록과 시각적으로 끊는다(1px 실선은 너무 옅어 붙어 보였다). */
    .up111-center-panel {
        height: auto;
        flex: 0 0 auto;
        min-height: 320px;
        max-height: 52dvh;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        border-top: 8px solid #eef0f4;
    }
    /* height:100% 는 부모 높이가 auto 가 되면 0 으로 무너진다 */
    .up111-center-panel .goods-form-simplebar { height: auto; }

    /* ⚠️ 바깥 두 겹(.up111-center-panel·simplebar)만 풀면 소용없다 — 그 사이의 .goods-detail 이
       `flex:1 + overflow:hidden` 이라 남은 높이(실측 253px)로 눌리고, 내용 1268px 중 1015px 이
       잘려 스크롤로도 닿지 못했다(360px 에서 폼 대부분이 아예 보이지 않음).
       내용만큼 늘리고 자르지 않는다 — 스크롤은 바깥 .page-body 가 맡는다. */
    .up111-center-panel .goods-detail {
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* 상단 '상품명 …' (≤1199) — 12em 밀기를 풀어 이름에 폭을 더 준다(말줄임은 위 기본 규칙) */
@media (max-width: 1199px) {
    .up111-title-item-name-wrap {
        margin-left: 0;
    }
    .up111-title-item-name-wrap > .gap10 {
        gap: 4px;
    }
    .up111-title-item-name-wrap .item-name-label {
        margin-right: 0;
    }
}

/* ============================================================
   중간 폭(993~1199) — 노트북
   #layout-wrapper 의 1600px 고정을 걷어내면서 생긴 구간. 데스크톱 배치를 그대로
   두고 폭만 줄이면 대부분 그대로 맞는데, 검색바만 조건 3~4개를 한 줄에 못 담는다
   (993 에서 OA01 91px · OA02 103px 넘침). 줄바꿈만 허용한다.
   ≤992 는 아래 세로 스택 규칙이 따로 받으므로 여기는 993 부터다.
   ============================================================ */
@media (min-width: 993px) and (max-width: 1199px) {
    /* 폼이 아무리 좁아져도 입력을 읽을 수 있는 폭은 남긴다.
       ≤992 에는 주면 안 된다 — 거기선 세로 스택이라 340 이 컨테이너(289)를 넘어버린다. */
    .up111-center-panel { min-width: 340px; }

    .oligo-imp-searchbar .oligo-imp-row {
        flex-wrap: wrap;
        row-gap: 12px;
        column-gap: 20px;
    }
    /* 검색어 입력이 남는 폭을 다 먹어 다른 조건을 밀어내지 않게 */
    .oligo-imp-searchbar .oligo-imp-field.grow .form-control { max-width: 320px; }
}
/* 검색어(grow)가 basis 0 이라, 남는 폭이 거의 없어도 줄에 '들어간다'고 판정돼 줄바꿈 대신
   18px 까지 눌리고 [조회] 버튼과 겹쳤다. 993~1199 만의 문제가 아니었다 — 1200~1599 에서도
   (특히 우측 패널을 붙인 1440~1599) OA01·OA02·OB01 이 같은 상태였다.
   ≥993 전체에서 줄바꿈을 허용하고 검색어에 최소 폭을 준다. 자리가 넉넉하면 한 줄 그대로
   (데스크톱 간격 32 는 유지 — 줄바꿈된 줄 사이만 12). */
@media (min-width: 993px) {
    .oligo-imp-searchbar .oligo-imp-row {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .oligo-imp-searchbar .oligo-imp-field.grow { min-width: 240px; }
}

/* ============================================================
   폼이 좁아지는 구간(≤1199) — UP111 폼 내부
   UP111 은 [사이드바][좌 채널 330][폼][우 패널 370] 이라 화면이 1200 아래로
   내려가면 폼이 350~450px 까지 줄어든다. 데스크톱 1600 기준으로 박아둔
   탭 배치와 입력 고정폭이 그 폭에서 그대로 잘려 나갔다.
   바깥 레이아웃(세로 스택 여부)은 ≤992 블록이 따로 정하고, 여기는 폼 안쪽만 본다.
   ============================================================ */
@media (max-width: 1199px) {
    /* 탭: flex:1 로 나눠 담기를 그만두고 제 폭 + 가로 스크롤.
       전역 .tab-items > .tab-item 이 width:100% 라 flex-basis:auto 가 컨테이너 폭을
       그대로 집는다 — 그래서 width:auto 를 같이 준다(안 주면 탭 하나가 컨테이너 폭). */
    .up111-center-panel .tab-items > .tab-item {
        width: auto;
        flex: 0 0 auto;
        padding: 14px 14px;
        white-space: nowrap;
    }

    /* 입력 고정폭 해제. w-*p 유틸은 width 와 min-width 를 둘 다 !important 로 걸어서
       width 만 덮으면 min-width 가 이긴다.
       200px 미만(w-70p/w-150p/w-180p 등)은 날짜·수량처럼 나란히 놓는 입력이라 둔다. */
    .up111-center-panel .w-200p,
    .up111-center-panel .w-210p,
    .up111-center-panel .w-220p,
    .up111-center-panel .w-250p,
    .up111-center-panel .w-300p,
    .up111-center-panel .w-400p,
    .up111-center-panel .w-450p,
    .up111-center-panel .w-500p {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }
    /* 라벨 좌 · 입력 우 배치에서 입력 묶음이 줄어들 수 있게 */
    .up111-center-panel .up111-goods-detail-contents .d-flex { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
}

/* ============================================================
   UP111 폼 라벨을 입력 위로 — 기준은 화면이 아니라 '폼 폭'
   ≤992 는 공통 폼 규칙(.form-items .form-item)이 이미 라벨을 위로 올리지만,
   노트북(993~1199)에서는 좌 채널목록·우 패널 사이에서 폼이 343~450px 로 좁아지는데도
   라벨 160 을 옆에 둬서, 입력이 도움말과 함께 다음 줄로 떨어진 행과 옆에 붙은 행이
   섞여 들쭉날쭉했다(실측 1100 고시정보: 11행 중 4행만 아래로). 1200~1279 는 폼 550 에
   라벨 160 + 입력 450 이 안 들어가 입력이 잘렸다.
   화면 폭으로는 이 구간을 가를 수 없어(사이드바 접힘에 따라 폼 폭이 달라진다)
   폼 패널을 컨테이너로 두고, 폼이 735 이하면 '좁은 폼'으로 본다.
   - 컨테이너는 화면 ≤1279 에서만 선언한다 → 1280+ 데스크톱은 이 규칙이 절대 닿지 않는다
     (1366 노트북은 폼 716 이지만 지금 배치 그대로 둔다).
   - ≤767 화면은 폼이 늘 화면-32 ≤ 735 라, 아래 '≤735' 블록(예전 @media ≤767)은 모바일에서
     전과 똑같이 걸리고, 993~1279 의 좁은 폼(343~629)에도 같이 걸린다.
   ============================================================ */
@media (max-width: 1279px) {
    .up111-center-panel {
        container: up111-narrow / inline-size;
    }
}
@container up111-narrow (max-width: 735px) {
    .goods-detail .form-items .form-item {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    /* 라벨 폭 160 은 !important(style.css .goods-detail .form-items .form-item .col-form-label) 라
       그보다 한 단계 구체적인 셀렉터로 푼다 */
    .up111-center-panel .goods-detail .form-items .form-item > .col-form-label:not(.form-item-check) {
        flex: 0 0 100%;
        min-width: 0 !important;
        max-width: none !important;
    }
    .up111-center-panel .goods-detail .form-items .form-item > .form-item-input {
        flex: 0 0 100%;
        min-width: 0;
    }
    /* 입력 고정폭(200px 이상)은 폼 폭 안으로 — ≤1199 규칙이 못 닿는 1200~1279 구간 */
    .up111-center-panel .w-200p,
    .up111-center-panel .w-210p,
    .up111-center-panel .w-220p,
    .up111-center-panel .w-250p,
    .up111-center-panel .w-300p,
    .up111-center-panel .w-400p,
    .up111-center-panel .w-450p,
    .up111-center-panel .w-500p {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* 200px 미만 고정폭(날짜·수량 등 나란히 놓는 입력)은 위에서 일부러 남겨 뒀지만,
   폼이 330px 아래로 내려가는 구간에서는 그것도 안 들어간다 — 실측: 판매일시가
   [150][~][150] 이라 360px 에서 두 번째 날짜가 19px 잘렸다.
   줄바꿈 대신 둘이 같이 줄어들게 한다(한 줄 유지, 날짜 표시 폭은 충분).
   원래 @media (max-width:767px) 였다 — 화면 기준이라 노트북(993~1279)의 좁은 폼에는 안 걸려
   단위 '원'이 입력 아래로 떨어지는 문제가 그대로 남았다. 위 up111-narrow 컨테이너(폼 ≤735)로 옮겼다. */
@container up111-narrow (max-width: 735px) {
    /* 날짜 묶음(.d-flex.flex-wrap)이 형제와 폭을 나눠 224px 밖에 못 받는다 → 한 줄에 둘을
       욱여넣지 말고 각 줄을 쓰게 한다(flex-wrap 이 이미 켜져 있어 basis 100% 면 줄바꿈). */
    .up111-center-panel .form-item-input > .d-flex {
        flex: 1 1 100%;
        min-width: 0;
    }
    .up111-center-panel .w-150p,
    .up111-center-panel .w-180p {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* ⑦ 단위(원·개)가 입력 아래 줄로 떨어지던 문제 — 입력이 ≤1199 규칙으로 width:100% 가 되면서
       부모 폭을 다 먹어 `.ms-1`(단위)이 wrap 됐다. 입력은 남는 만큼만 쓰고 단위는 옆에 붙는다. */
    .up111-center-panel .form-item-input .d-flex.flex-wrap > .form-control {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }
    .up111-center-panel .form-item-input .d-flex.flex-wrap > .ms-1 {
        flex: 0 0 auto;
    }

    /* 올리고 카테고리: 칩이 w-450p→100% 라 돋보기(left:-2em 로 칩 위에 겹치는 설계)가
       다음 줄로 밀리고 화면 밖으로 잘렸다. 칩은 남는 폭만 쓰고, 돋보기는 원래 의도대로
       칩 '안쪽' 오른쪽 끝에 얹는다(칩에 그만큼 오른쪽 여백을 준다). */
    .up111-center-panel .goods-cat-chip {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        padding-right: 30px;
    }
    .up111-center-panel .goods-cat-edit {
        left: 0 !important;
        margin-left: -26px;
        flex: 0 0 auto;
        z-index: 1;
    }
    /* 채널 카테고리는 마크업이 다르다 — 칩·돋보기를 .goods-cat-input(w-450p)이 감싸고
       그 옆에 [+] 버튼이 온다. w-450p→100% 라 [+]가 다음 줄로 밀렸다. 한 줄에 둔다. */
    .up111-center-panel .goods-cat-list > .d-flex {
        width: 100%;
    }
    .up111-center-panel .goods-cat-input {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }
    .up111-center-panel .goods-cat-input .goods-cat-edit {
        margin-left: 0;
    }
    .up111-center-panel .goods-cat-add {
        margin-left: 8px !important;
    }

    /* ④⑥ 폼 안 버튼이 입력(h32·14px)보다 작아 눈에 안 띄고 누르기도 어려웠다
       (적용하기 80×28·12px, 상세설명참조 일괄적용 125×28·12px) → 입력 높이에 맞춘다. */
    .up111-center-panel .btn-sm {
        min-height: 32px;
        font-size: 13px;
        padding: 4px 12px;
    }

    /* ⑤ 옵션·추가상품 입력: [옵션명][옵션값][추가금액] 3열이 400px 에 들어가지 않아
       라벨 행과 입력 행이 서로 어긋났다(옵션명 칸 50px). 열마다 한 줄씩 쓰게 한다. */
    .up111-center-panel .form-item-input.flex-column .d-flex.w-100 {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .up111-center-panel .form-item-input.flex-column .d-flex.w-100 > [class*='col-lg-'] {
        flex: 1 1 100%;
        max-width: 100%;
        width: auto !important;
    }
    /* 행 끝 +/- 버튼 칸은 제 폭만 */
    .up111-center-panel .form-item-input.flex-column .d-flex.w-100 > .col-lg-1:last-child {
        flex: 0 0 auto;
        width: auto !important;
    }
    /* 열이 한 줄씩 쓰면 머리글 행(옵션명/옵션값/추가금액)과 입력이 짝이 안 맞는다 →
       머리글은 감추고, 대신 각 입력의 placeholder 가 이름표 역할을 한다(JSX 에 추가).
       (행 컨테이너를 :has() 로 잡으려 했으나 적용되지 않아 머리글 셀만 직접 숨긴다) */
    .up111-center-panel .form-item-input.flex-column .opt-item-text {
        display: none;
    }
    /* 행 끝 [+]/[-] 와 [적용하기]는 오른쪽에 붙인다(왼쪽에 있으면 입력칸과 붙어 눌리기 쉽다) */
    .up111-center-panel .form-item-input.flex-column .d-flex.w-100 > .col-lg-1:last-child {
        margin-left: auto;
    }
    .up111-center-panel .form-item-input.flex-column > .d-flex.mt-2 {
        justify-content: flex-end;
    }

    /* 옵션/추가상품 목록 툴바: [행 추가][선택 삭제] 한 줄, [판매수량][재고수량][적용] 한 줄.
       그냥 wrap 만 두면 '적용'이 혼자 셋째 줄로 떨어진다(수량 입력이 126px 씩 먹어서). */
    .up111-center-panel .d-flex.align-items-center.gap-3.px-3.py-2 {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
    }
    .up111-center-panel .d-flex.align-items-center.gap-3.px-3.py-2 > .me-auto {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }
    /* [판매수량][재고수량][적용]이 한 줄에 들어가야 한다 — 실측 336px 안에 넣으려면
       입력 54 + 라벨 12px 로 줄여야 한다(64px·13px 로는 '적용'이 셋째 줄로 떨어졌다). */
    .up111-center-panel .d-flex.align-items-center.gap-3.px-3.py-2 input {
        width: 54px !important;
        min-width: 0 !important;
    }
    .up111-center-panel .d-flex.align-items-center.gap-3.px-3.py-2 .col-auto {
        font-size: 12px;
        white-space: nowrap;
    }
    .up111-center-panel .d-flex.align-items-center.gap-3.px-3.py-2 .btn {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 고시: 입력 폭이 203/321 로 들쭉날쭉했다 — 입력을 감싼 .d-flex 가 내용 크기(flex:0 1 auto)로
       잡혀서 부모 폭을 다 못 받았기 때문. 폭을 100% 로 통일하고, 일괄적용 버튼은 select 와 한 줄에 둔다. */
    .up111-center-panel .form-item-input > .d-flex.flex-wrap {
        width: 100%;
    }
    .up111-center-panel .form-item-input .csel {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }
    .up111-center-panel .form-item-input .btn.ms-3 {
        margin-left: 8px !important;
        flex: 0 0 auto;
    }
}

/* 좁은 화면(≤992) — 환경설정(SA02) 탭 라벨
   폭이 줄면 '내 정/보', '구성원 관/리' 처럼 어절 중간에서 끊긴다.
   keep-all 이면 한국어도 어절 단위로만 줄바꿈한다. (대시보드 카드 라벨과 같은 처리) */
@media (max-width: 992px) {
    .sa02-tabs .sa02-tab { word-break: keep-all; }
}

/* ============================================================
   좁은 화면(≤992) — 공통 폼 행(.form-items .form-item)
   라벨이 min/max-width 130px 로 고정이고 행이 nowrap 이라, 340px 모달이나
   300px 폼에서는 입력에 180px 밖에 안 남는다. 라디오 라벨이 '일/반/상/품' 처럼
   한 자씩 쪼개지고 셀렉트·달력이 잘려 나갔다(OA05 속성템플릿 모달이 가장 심했다).
   라벨을 입력 위로 올린다. 이 구조는 UP111 상세 폼·템플릿 모달·상품 상세가
   공유하므로 한 번에 정리된다. (.form-item--vertical 이 쓰던 방식과 같다)
   ============================================================ */
@media (max-width: 992px) {
    .form-items .form-item {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .form-items .form-item > .col-form-label {
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 100%;
    }
    .form-items .form-item > .form-item-input {
        flex: 0 0 100%;
        min-width: 0;
    }
    /* 값 칸이 늘 .form-item-input 인 건 아니다. 채널 원본상세 모달은
       <label class="w-10"> + <div class="flex-grow-1 d-flex flex-wrap"> 구조라
       위 규칙에 안 걸려서, 라벨만 위로 올라가고 값 칸은 flex 기본값
       min-width:auto 그대로였다 — 옵션 목록처럼 내용이 긴 행이 모달 밖으로 넘쳤다.
       같은 대접을 해 준다. */
    .form-items .form-item > .flex-grow-1 {
        flex: 0 0 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* flex-wrap 묶음 안쪽도 마찬가지 — 자식이 줄바꿈은 되지만 각자
       min-width:auto 라 긴 값 하나가 그대로 폭을 밀어낸다. */
    .form-items .form-item > .flex-grow-1 > * { min-width: 0; max-width: 100%; }
    /* 라디오·체크박스 묶음이 한 줄에 다 안 들어가면 접히게 */
    .form-items .form-item-input .form-check { white-space: normal; word-break: keep-all; }

    /* 입력 고정폭 해제(200px 이상만). w-*p 유틸은 width 와 min-width 를 둘 다
       !important 로 걸어서 width 만 덮으면 min-width 가 이긴다.
       200px 미만(w-70p/w-150p/w-180p 등)은 날짜·수량처럼 나란히 놓는 입력이라 둔다. */
    .form-items .w-200p,
    .template-modal .w-200p,
    .form-items .w-210p,
    .template-modal .w-210p,
    .form-items .w-220p,
    .template-modal .w-220p,
    .form-items .w-250p,
    .template-modal .w-250p,
    .form-items .w-300p,
    .template-modal .w-300p,
    .form-items .w-400p,
    .template-modal .w-400p,
    .form-items .w-450p,
    .template-modal .w-450p,
    .form-items .w-500p,
    .template-modal .w-500p {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* ============================================================
   iOS 안전영역 (노치 · 홈 인디케이터)
   index.html 의 viewport meta 가 viewport-fit=cover 라 화면 가장자리까지 그려지는데,
   env(safe-area-inset-*) 을 어디에서도 반영하지 않고 있었다. 그래서 아이폰에서
   맨 아래 콘텐츠(페이저 · UP111 푸터 · 드로어 버튼)가 홈 인디케이터 바에 깔렸다.
   인디케이터가 없는 기기에선 값이 0 이라 아무 영향이 없다.
   page.css 는 grid.css 보다 뒤에 로드되므로 grid-fill 의 padding-bottom:8px 도 여기서 덮는다.
   ============================================================ */
.page-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
#page-wrapper.grid-fill .page-body { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

/* 화면 아래에 붙는 것들 */
.up111-footer { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.right-content,
.left-content { padding-bottom: env(safe-area-inset-bottom, 0px); }
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* 사이드바 드로어의 프로필 영역 */
.navbar.navbar-vertical .sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
/* 모달 하단 버튼 줄 */
.modal .modal-content { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* ============================================================
   탭 공통(≤1199) — .tab-items 를 쓰는 모든 곳
   전역 `.tab-items > .tab-item { width: 100% }` 때문에 탭이 컨테이너 폭을 균등
   분할한다. 좁은 화면에선 한 칸이 45px 까지 눌려 '상/품/기/본' 처럼 한 글자씩
   쌓이고 제목과 겹쳤다(채널 원본상세 모달에서 가장 심했다).
   제 폭을 갖게 두고 가로 스크롤로 본다.
   쓰는 곳은 UP111 상세 · 템플릿 모달 · 채널 원본상세 모달 세 군데이고,
   앞 둘은 각자 스코프에 같은 규칙이 이미 있다(여백 값이 달라 그대로 둔다).
   ============================================================ */
@media (max-width: 1199px) {
    /* 가로 스크롤이 아니라 줄바꿈이다. 탭이 8개라 스크롤로 두면 한 번에 서너 개만
       보이고 나머지가 있다는 것조차 알기 어렵다. 두 줄로 접으면 전부 보인다. */
    .tab-items {
        flex-wrap: wrap;
        height: auto;
        row-gap: 0;
    }
    .tab-items > .tab-item {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        height: auto;
    }
}

/* 스마트스토어 쇼핑윈도 노출 배지 — 스마트스토어 상품에 덧붙은 보조 정보라 테두리만, 계정명 뒤에 붙인다.
   UP111 채널목록·일괄적용 모달·OA03 그리드 공통 */
.ss-window-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid #b7e4c7;
    border-radius: 9px;
    background: transparent;
    color: #2f9e5b;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0; /* 그리드 채널/계정 셀(flex)에서 계정명 대신 줄어들지 않게 */
}

/* 떠 있는 툴팁 (util/floatingTip.js) — body 에 붙어 그리드 셀 overflow 에 잘리지 않음. 패널 토글 툴팁과 같은 톤 */
.float-tip {
    position: fixed;
    z-index: 2000;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #191f28;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
}
.float-tip.is-on { opacity: 1; transform: translateY(0); }
.float-tip.is-below { transform: translateY(-4px); }
.float-tip.is-on.is-below { transform: translateY(0); }
.float-tip__title { font-size: 12px; font-weight: 500; color: #9ca3af; line-height: 1.3; }
.float-tip__body { font-size: 13px; font-weight: 600; line-height: 1.4; word-break: keep-all; }
/* 세모 — 기본은 아래(툴팁이 요소 위), is-below 면 위 */
.float-tip::after {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    top: 100%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #191f28;
}
.float-tip.is-below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 6px solid #191f28; }