가 아닌 span — 카드 줄의 'b=16px 주황' 규칙에 안 덮이게. 파일 맨 끝 반응형 층보다 앞이지만 선택자가 더 구체적 */
.rs-card-row .rs-stat-month .rs-est, .rs-stat-month .rs-est { display: inline-block; vertical-align: middle; margin-left: 5px; padding: 1px 5px; border-radius: 999px; font-size: 9px; line-height: 12px; font-weight: 600; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; position: relative; top: -1px; } /* 9/8 형: 색 있게(하늘색, 주황 X) */
.rs-card-row .rs-stat-month .rs-est.ful, .rs-stat-month .rs-est.ful { color: #b45309; background: #fef3c7; border-color: #fde68a; } /* 풀필먼트(현지 창고) — Preferred 톤 */
/* 8/26 묶음4: 설정 좌우 2단 + 직접 추가 전용 줄(전역 검색창 규칙 안 탐 = 브라우저마다 높이 안 흔들림) */
.rs-set-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.rs-set-2col .rs-set-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1100px) { .rs-set-2col { grid-template-columns: 1fr; } }
.rs-addrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.rs-addrow-in { box-sizing: border-box; height: 42px; padding: 0 14px; border: 1.5px solid var(--color-border-strong, #cbd5e1); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--color-text); background: #fff; min-width: 0; }
.rs-addrow-in:focus { outline: none; border-color: var(--pf, var(--color-primary)); box-shadow: 0 0 0 3px var(--pf-ring, rgba(238,77,45,.16)); }
.rs-addrow-btn { box-sizing: border-box; height: 42px; padding: 0 18px; border: none; border-radius: 10px; background: var(--pf, var(--color-primary)); color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-addrow-btn:hover:not(:disabled) { background: var(--pf-deep, var(--color-primary)); }
.rs-addrow-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 판매 N개 이하 알약 (형 8/26) — 오른쪽 끝, 주문관리 필터 알약(orders-filter-pill) 규격 그대로 */
.rs-kbar .rs-maxsold-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 14px; }
.rs-maxsold-pill input { width: 112px; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--color-text); padding: 0; -moz-appearance: textfield; }
.rs-maxsold-pill input::placeholder { color: var(--color-text-dim); }
.rs-maxsold-pill input::-webkit-outer-spin-button, .rs-maxsold-pill input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-maxsold-pill .rs-maxsold-txt { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--color-text); cursor: text; padding: 0; }
.rs-maxsold-pill .rs-maxsold-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--color-primary-bg, #f1f5f9); color: var(--color-text-secondary); cursor: pointer; padding: 0; }
.rs-maxsold-pill .rs-maxsold-x:hover { background: var(--pf, var(--color-primary)); color: #fff; }
/* ── 8/26 모바일·좁은 화면 수정 (형 이미지 3장 기준) ── */
/* 1) 메인 탭 5개: 글자 세로 쪼개짐 금지 — 한 줄 유지, 좁으면 옆 스크롤 */
/* 스크롤 = 샵관리 탭과 동일한 pftab-bar-scroll 규칙 그대로(형 8/26). 리서치 자체 스크롤 규칙 삭제 */
.rs-main-tabs.pftab-bar-scroll { gap: 0; padding: 0; } /* pftab-bar 의 간격/패딩만 원래 탭줄 값으로 */
.rs-main-tabs .orders-main-tab { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 720px) { .rs-main-tabs .orders-main-tab { padding: 10px 14px; font-size: 14px; } }
/* 2) 셀러 순위 숫자 3칸: PC = 표 칸 그대로(display:contents), 모바일 = 라벨 붙여 한 줄 */
.rs-sl-nums { display: contents; }
.rs-sl-num::before { content: attr(data-l); display: none; }
@media (max-width: 720px) {
/* 🐞 원인: 312줄 모바일 그리드가 333줄 PC 7칸 규칙(뒤에 선언)에 덮여 폰에서도 7칸 → 오른쪽으로 삐져나감. 여기서 다시 확정 */
.rs-sl-head, .rs-sl-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'r shop act' 'r nums nums' 'r top top'; gap: 8px 10px; padding: 12px 14px; }
.rs-sl-row > * { min-width: 0; }
.rs-sl-nums { display: flex; grid-area: nums; gap: 12px; flex-wrap: wrap; min-width: 0; }
.rs-sl-num { font-size: 13px; }
.rs-sl-actwrap { gap: 4px; }
.rs-sl-act.rs-shop-btn { padding: 6px 7px; }
.rs-sl-act.rs-shop-btn svg + * , .rs-sl-actwrap .rs-shop-btn { font-size: 0; gap: 0; } /* 폰은 아이콘만(이름 칸 확보) */
.rs-sl-actwrap .rs-shop-btn svg { width: 16px; height: 16px; }
.rs-sl-num { display: inline-flex; align-items: baseline; gap: 4px; grid-area: auto; text-align: left; border: 0 !important; padding: 0 !important; }
.rs-sl-num::before { display: inline; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.rs-sl-div { align-self: auto; }
.rs-sl-top { padding-left: 0; border-left: 0; min-width: 0; overflow: hidden; }
.rs-sl-topname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
}
/* 3) 카드 월판매/월매출: 좁으면 두 줄로 내려감(잘림 금지) — PC 6열·모바일 2열 공통 */
.rs-card-row.rs-card-stats { flex-wrap: wrap; row-gap: 2px; }
.rs-card-row.rs-card-stats > * { min-width: 0; }
/* 4) 판매 N개 이하 알약: 모바일은 검색줄 아래 왼쪽 */
@media (max-width: 720px) { .rs-kbar .rs-maxsold-pill { margin-left: 0; } }
@media (max-width: 720px) {
/* 카드 버튼 글자 세로 쪼개짐 금지 */
.rs-card-btns .rs-open-btn { white-space: nowrap; padding: 9px 2px; font-size: 13px; gap: 3px; }
/* 가격 줄: 대분류가 안 들어가면 아래 줄로 */
.rs-card-row:not(.rs-card-stats) { flex-wrap: wrap; row-gap: 0; }
.rs-card-row:not(.rs-card-stats) .rs-card-loc { flex: 1 0 100%; text-align: left; margin-top: -2px; } /* 폰은 대분류를 가격 아래 줄에(잘림 금지) */
/* 셀러 행: 이름·위치줄은 잘라내지 말고 두 줄까지 */
.rs-sl-img { width: 40px; height: 40px; }
.rs-sl-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.rs-sl-loc { white-space: normal; }
}
/* ═══════════════════════════════════════════════════════════════════════
▣ 반응형 층 (8/26, 형: "특정 폭 몇 개가 아니라 모든 화면") — 이 아래가 최종 규칙.
원칙: 화면 폭(@media) 숫자로 나누지 않고, 내용이 들어갈 칸의 폭(@container)으로 스스로 접힘.
· 카드 = 최소 폭 기준(250px) 자동 배치. 카드 안 글자는 250px 기준 설계 → 어느 폭이든 한 줄.
· 카드 칸이 250px 미만(폰 2열)일 때만 카드 자체가 판단해 월판매/월매출을 두 줄로.
· 필터·검색 줄은 칸이 좁아지면 알약 스크롤 / 검색창 한 줄 통째로.
· 셀러 표는 표가 못 들어가는 칸(<1000px)에서 3단 카드로.
═══════════════════════════════════════════════════════════════════════ */
.rs-page { container-type: inline-size; container-name: rs; }
.rs-card { container-type: inline-size; container-name: card; }
/* ── 카드 그리드: 최소 250px, 들어가는 만큼 (6·5·4… 화면이 정함) ── */
.rs-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
@container rs (max-width: 600px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* ── 카드 안 = 250px 기준 한 줄 설계 ── */
.rs-card-body { padding: 12px 12px 12px; gap: 6px; }
.rs-card-name { font-size: 13.5px; min-height: 38px; }
.rs-card-row { gap: 6px; }
.rs-card-row .rs-card-price { font-size: 16.5px; }
.rs-card-row.rs-card-stats { flex-wrap: nowrap; }
.rs-card-row .rs-stat-month, .rs-card-row .rs-card-rev { font-size: 12px; }
.rs-card-row .rs-stat-month b, .rs-card-row .rs-card-rev b { font-size: 15px; letter-spacing: -.2px; }
.rs-card-row .rs-card-loc { font-size: 12px; }
.rs-card-btns .rs-open-btn { white-space: nowrap; padding: 8px 4px; font-size: 13px; }
/* 카드 칸이 좁을 때(폰 2열 등) — 카드가 스스로 판단 */
@container card (max-width: 235px) {
.rs-card-row.rs-card-stats { flex-direction: column; align-items: flex-start; gap: 1px; }
.rs-card-row:not(.rs-card-stats) { flex-wrap: wrap; row-gap: 0; }
.rs-card-row:not(.rs-card-stats) .rs-card-loc { flex: 1 0 100%; text-align: left; margin-top: -2px; }
.rs-card-name { font-size: 13px; }
}
/* ── 위쪽 줄들: 국가 · 샵등급 · 카테고리/검색 ── */
.rs-cb-s { display: none; }
.rs-kbar { row-gap: 8px; }
.rs-kbar-cats { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rs-kbar-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.rs-kbar-search .rs-search { flex: 1 1 auto; min-width: 140px; max-width: 360px; }
.rs-kbar-search .rs-ext-recheck { margin-top: 0; border-color: var(--color-border-strong, #cbd5e1); color: var(--color-text-secondary); white-space: nowrap; flex: none; }
.rs-viewcount { color: var(--color-text-secondary); }
.rs-viewcount b { color: var(--color-text); font-weight: 800; }
.rs-viewsub { font-weight: 500; }
.rs-viewdesc.rs-viewcount { font-size: 13px; margin: 0 0 10px; }
@container rs (max-width: 640px) {
/* 국가 4개 한 줄: 작게 + 짧은 이름 */
.rs-filters { gap: 4px; flex-wrap: nowrap; }
.rs-country-btn { height: 34px; padding: 0 8px; font-size: 13px; gap: 4px; border-radius: 9px; flex: 1 1 0; justify-content: center; min-width: 0; white-space: nowrap; }
.rs-country-btn .rs-cb-s { white-space: nowrap; }
.rs-cb-l { display: none; } .rs-cb-s { display: inline; }
.rs-hide-narrow { display: none !important; }
.rs-calc-btn { height: 34px; width: 34px; padding: 0; font-size: 0; gap: 0; flex: none; justify-content: center; border-radius: 9px; } /* 폰은 계산기 아이콘만 */
.rs-calc-btn svg { width: 17px; height: 17px; }
.rs-kbar-search .rs-search { min-width: 90px; }
/* 샵 등급 · 카테고리: 한 줄 알약, 넘치면 옆 스크롤 */
.rs-typebar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rs-typebar::-webkit-scrollbar { display: none; }
.rs-type-chip { height: 30px; padding: 0 12px; font-size: 12.5px; flex: none; }
.rs-kbar-cats { flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
.rs-kbar-cats::-webkit-scrollbar { display: none; }
.rs-kbar-cats .rs-drop-btn { height: 32px; font-size: 12.5px; padding: 0 9px 0 11px; flex: none; }
.rs-kbar-cats .rs-drop-lab { max-width: 110px; }
/* 검색 = 자기 줄 통째 */
.rs-kbar-search { flex: 1 0 100%; }
.rs-kbar-search .rs-search { max-width: none; }
.rs-kbar .rs-maxsold-pill { margin-left: 0; }
.rs-kchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rs-kchips .orders-filter-pill { flex: none; }
.rs-kbar .rs-viewhead-r { margin-left: 0; }
}
/* ── 셀러 표 → 3단 카드 (표가 못 들어가는 칸) ── */
.rs-sl-toplab { display: none; }
.rs-sl-topname { -webkit-line-clamp: 2; }
@container rs (max-width: 1000px) {
.rs-sl-head { display: none !important; }
.rs-sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'shop act' 'nums nums' 'top top'; gap: 0 10px; padding: 12px 14px 12px 14px; position: relative; }
.rs-sl-row > * { min-width: 0; }
.rs-sl-rank { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pf, #ee4d2d); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rs-sl-shop { grid-area: shop; gap: 12px; }
.rs-sl-img { width: 48px; height: 48px; border-radius: 12px; }
.rs-sl-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; font-size: 14px; }
.rs-sl-loc { white-space: normal; font-size: 11.5px; margin-top: 2px; }
.rs-sl-act { grid-area: act; align-self: start; }
.rs-sl-actwrap { gap: 4px; }
.rs-sl-act.rs-shop-btn { padding: 7px 8px; font-size: 0; gap: 0; }
.rs-sl-actwrap .rs-shop-btn svg { width: 16px; height: 16px; }
/* 2단: 숫자 3칸 = 라벨 + 값, 위아래 구분선 */
.rs-sl-nums { display: flex; grid-area: nums; gap: 0; margin: 10px 0 8px; border-top: 1px solid var(--color-border, #eef2f7); border-bottom: 1px solid var(--color-border, #eef2f7); padding: 8px 0; }
.rs-sl-num { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; grid-area: auto; text-align: left; border: 0 !important; padding: 0 0 0 10px !important; font-size: 14px; white-space: nowrap; }
.rs-sl-num + .rs-sl-num { border-left: 1px solid var(--color-border, #eef2f7) !important; }
.rs-sl-num:first-child { padding-left: 0 !important; }
.rs-sl-num::before { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.rs-sl-div { align-self: auto; justify-content: flex-start; }
/* 3단: 1등 상품 */
.rs-sl-top { grid-area: top; padding-left: 0; border-left: 0; min-width: 0; overflow: hidden; gap: 10px; }
.rs-sl-toplab { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--pf-bg, #fdf3ef); color: var(--pf-deep, #c93a1c); font-size: 11px; font-weight: 800; }
.rs-sl-topimg { width: 40px; height: 40px; }
.rs-sl-topname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; font-size: 12.5px; }
}
@container rs (max-width: 420px) {
.rs-sl-num { font-size: 13px; }
.rs-sl-img { width: 42px; height: 42px; }
}
/* ── 설정 2단 → 1단도 칸 기준 ── */
@container rs (max-width: 1100px) { .rs-set-2col { grid-template-columns: 1fr; } }
/* ── 신규 샵 목록 모달 ── */
.rs-modal-shops { width: 640px; }
.rs-shops-body { padding: 8px 10px; }
.rs-shops-row { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; text-decoration: none; color: var(--color-text); }
.rs-shops-row:hover { background: var(--pf-hover, #fdeae4); }
.rs-shops-rank { font-size: 12.5px; font-weight: 800; color: var(--pf-deep, #c93a1c); text-align: center; }
.rs-shops-img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.rs-shops-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-shops-age { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.rs-shops-rev { font-size: 13.5px; font-weight: 800; color: var(--pf-deep, #c93a1c); white-space: nowrap; }
.rs-shops-cnt { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; min-width: 44px; text-align: right; }
@media (max-width: 480px) { .rs-shops-row { grid-template-columns: 24px 32px minmax(0, 1fr) auto auto; gap: 8px; } .rs-shops-cnt { display: none; } } /* 모달은 body 직속이라 @media (폰: 상품수 숨김, 이름 자리 확보) */
.rs-type-label { white-space: nowrap; flex: none; } /* "카테고리"·"샵 등급" 라벨 세로 쪼개짐 금지 */
/* ── 8/26 2차 (형 9개): 배지 줄 · 폰 새로고침 아이콘 · 폰 한 줄 · 셀러 빼기 상자 · 탭 HScroll ── */
.rs-sl-shopinfo { gap: 2px; }
.rs-sl-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 이름 = 한 줄, 길면 … (모든 폭) */
.rs-sl-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-sl-badges .rs-sl-badge { margin-left: 0; }
@container rs (max-width: 1000px) {
.rs-sl-name { display: block; -webkit-line-clamp: unset; white-space: nowrap; }
}
@container rs (max-width: 640px) {
.rs-kbar-search .rs-ext-recheck { width: 36px; height: 36px; padding: 0; font-size: 0; gap: 0; justify-content: center; border-radius: 9px; } /* 폰 = 아이콘만 */
.rs-kbar-search .rs-ext-recheck svg { width: 16px; height: 16px; }
.rs-kbar-search { flex: 1 1 0; min-width: 0; } /* 검색·새로고침·판매 한 줄 */
.rs-kbar-search .rs-search { min-width: 0; }
.rs-kbar .rs-drop { flex: none; }
.rs-kbar > .rs-drop .rs-drop-btn { height: 36px; font-size: 12.5px; padding: 0 9px 0 11px; }
.rs-kbar .rs-viewhead-r { flex: 1 0 100%; }
}
.rs-exclbox .rs-addrow { margin-top: 4px; }
.rs-excl-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rs-excl-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--color-border, #eef2f7); }
.rs-excl-row .rs-shops-img { width: 32px; height: 32px; }
.rs-main-tabs { margin-bottom: 0; }
.hscroll-wrap:has(> .rs-main-tabs) { margin-bottom: 20px; }
/* ── 모달 (형 8/26): 상단바·하단탭 위 · 높이 최대 75% · 가운데 · 폰 좌우 16px · 폰 맨 아래 [닫기] ── */
.rs-modal-backdrop { z-index: 10000; padding: 16px; }
.rs-modal { max-height: 75vh; max-height: 75dvh; width: min(92vw, 360px); }
.rs-modal-wide { width: min(94vw, 620px); }
.rs-modal-shops { width: min(94vw, 640px); }
.rs-modal-head { position: sticky; top: 0; z-index: 1; }
.rs-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.rs-modal-foot-close { display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 46px; border: 0; border-top: 1px solid var(--color-border, #e5e7eb); background: #fff; color: var(--color-text); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
@media (max-width: 768px) {
.rs-modal-backdrop { padding: 16px 16px 24px; }
.rs-modal, .rs-modal-wide, .rs-modal-shops { width: 100%; max-height: 72vh; max-height: 72dvh; }
.rs-modal-foot-close { display: inline-flex; }
}
/* 탭 밑줄이 2px 아래로 삐져나와(margin -2px) 세로 스크롤 2px 생기던 것 — 밑줄을 안쪽에 그려 삐져나옴 0 (모양 동일) */
.rs-main-tabs.pftab-bar-scroll { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--color-border); }
.rs-main-tabs.pftab-bar-scroll .orders-main-tab { margin-bottom: 0; }
/* 설정 카드 = 제목 / 설명 / 입력 순 (형 8/26) */
.rs-set-title { margin-bottom: 2px; }
.rs-set-sec > .rs-set-desc { margin: 0 0 10px; line-height: 1.55; }
.rs-set-oneline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
/* ── 8/26 3차: 무한 스크롤 · 검색 지우기 · 마진 계산기 떠 있는 버튼 ── */
.rs-more-sentinel { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--color-text-secondary); } /* 높이 고정 = 이어 붙일 때 화면 안 튐 */
.rs-searchwrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.rs-searchwrap .rs-search { width: 100%; padding-right: 34px; }
.rs-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--color-primary-bg, #f1f5f9); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.rs-search-clear:hover { background: var(--pf, var(--color-primary)); color: #fff; }
.rs-kbar-search .rs-search { max-width: 360px; }
/* 계산기: 오른쪽 아래 떠 있는 버튼 + 그 위로 열리는 패널 (뒤 화면 그대로 스크롤·클릭) */
.rs-calc-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--pf, var(--color-primary)); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(15,23,42,.22); transition: transform .12s, box-shadow .12s; }
.rs-calc-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.26); }
.rs-calc-fab.on { background: var(--pf-deep, var(--color-primary)); }
.rs-calc-panel { position: fixed; right: 22px; bottom: 84px; z-index: 900; width: 360px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); display: none; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25); border: 1px solid var(--color-border, #e5e7eb); }
.rs-calc-panel.open { display: flex; }
.rs-calc-panel .rs-modal-body { overflow-y: auto; }
/* 결과 표: 마진·이익률 글자 통일, 열 맞춤 */
.rs-calc-result { padding: 10px 12px; text-align: left; align-items: stretch; }
.rs-calc-table { width: 100%; border-collapse: collapse; }
.rs-calc-table th, .rs-calc-table td { padding: 7px 6px; font-size: 13px; }
.rs-calc-table thead th { text-align: right; color: var(--color-text-secondary); font-weight: 600; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.rs-calc-table thead th:first-child { text-align: left; }
.rs-calc-table tbody th { text-align: left; color: var(--color-text-secondary); font-weight: 600; width: 64px; }
.rs-calc-table tbody td { text-align: right; font-size: 17px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-calc-table tbody td:last-child { color: var(--color-text-secondary); font-weight: 700; } /* 환급전 = 글자색만 (소싱탭 규칙) */
.rs-calc-table td.neg, .rs-calc-table td.warn { color: #b91c1c !important; }
@media (max-width: 768px) {
.rs-calc-fab { right: 14px; bottom: 80px; width: 48px; height: 48px; }
.rs-calc-panel { right: 8px; left: 8px; bottom: 136px; width: auto; max-height: min(62vh, 520px); }
}
/* ── v2.0 수집 속도 + 24시간 그래프 (8/27) ── */
.rs-pace { margin-top: 4px; }
.rs-act { margin-top: 10px; border: 1px solid var(--color-border, #e8edf3); border-radius: 12px; padding: 10px 12px 8px; background: #fff; }
.rs-act-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 4px; }
.rs-act-wall { display: inline-flex; align-items: center; gap: 4px; color: #b91c1c; font-weight: 700; }
.rs-act-svg { width: 100%; height: 150px; display: block; }
.rs-act-grid { stroke: var(--color-border, #e8edf3); stroke-width: 1; }
.rs-act-axis { font-size: 10px; fill: var(--color-text-secondary); }
.rs-act-bar { fill: var(--pf, #ee4d2d); opacity: .85; }
.rs-act-bar.wall { fill: #b91c1c; opacity: 1; }
.rs-act-wallmark { font-size: 10px; font-weight: 800; fill: #b91c1c; }
.rs-act-ref { stroke-width: 1.5; stroke-dasharray: 4 4; }
.rs-act-ref.bad { stroke: #b91c1c; }
.rs-act-ref.ok { stroke: #15803d; }
.rs-act-foot { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; min-height: 18px; }
.rs-act-leg { display: inline-block; width: 14px; height: 0; border-top: 2px dashed; vertical-align: middle; margin: 0 2px; }
.rs-act-leg.bad { border-color: #b91c1c; } .rs-act-leg.ok { border-color: #15803d; }
/* ═══ ERP 공용 플랫폼 선택 버튼 표준 (형 확정 2026-07-17) ═══
어느 페이지든 플랫폼 선택 버튼은 이 클래스만 사용: