/* swin-ds.css — 2026-10-12 SWIN 디자인 정리 (봇1 디자인 시스템)
 * 토큰 + 기본 타이포 + 공통 컴포넌트. 사용 규칙은 플러그인 루트 DESIGN-SYSTEM.md.
 * 원칙: 화면 전용 배치는 swin-admin.css / swin-member.css 에서. 여기 클래스는 이름 고정(이름 바꾸지 말 것).
 * 특이도: 기본 타이포는 body.bps-admin-portal / body.bps-member-home (0,1,1)로 테마 body(0,0,1)를 이긴다.
 *         그 밖의 굵기·크기는 화면 전체에 강제하지 않는다 — 역할 클래스(.swin-title/.swin-section/.swin-body/.swin-secondary/.swin-num/.swin-table/.swin-btn)로만. !important 없음.
 * 라운드 B(2026-10-12 밤): 역할 토큰(본문 #111827·보조 #475569·바탕 #F5F6F8·패널 흰색), 관리 포털 진한 상단 메뉴, .swin-dialog, 그림자 최소화.
 */

:root {
	/* 색 — 빨강은 주 버튼·현재 선택·위험에만 */
	--swin-red: #E10600;          /* = --bps-primary */
	--swin-red-dark: #B90400;     /* = --bps-primary-dark, 글자/hover */
	--swin-red-tint: #FFF1F0;
	/* 주 버튼(관리자 = 빨강 채움). 회원 화면은 아래 3차 블록에서 챔페인으로 바꿈 */
	--swin-primary-bg: #E10600; --swin-primary-bg-hover: #B90400; --swin-primary-fg: #fff; --swin-primary-line: #E10600; --swin-primary-line-hover: #B90400; --swin-primary-shadow: none;

	--swin-text: #111827;         /* 본문 17.7:1 */
	--swin-text-2: #475569;       /* 보조 7.6:1 (흰 패널), 7.0:1 (#F5F6F8) — 이보다 흐린 글자색 금지 */
	--swin-text-muted: var(--swin-text-2); /* 예전 이름(호환) */
	--swin-bg: #F5F6F8;           /* 페이지 바탕 */
	--swin-panel: #FFFFFF;        /* 패널·카드·표·팝업 */
	--swin-surface: var(--swin-panel); /* 예전 이름(호환) */
	--swin-nav-bg: #111827;       /* 관리 포털 상단 메뉴 바 */
	--swin-nav-fg: #D1D5DB;       /* 메뉴 글자 (바 위 12.0:1) */
	--swin-surface-2: #F1F2F4;    /* 표 머리·접힘영역 머리·hover */
	--swin-border: #E5E7EB;
	--swin-border-strong: #8A919C;/* 입력칸·보조 버튼 테두리 (UI 대비 3:1+) */
	--swin-focus: #1D4ED8;        /* 포커스 링 — 빨강과 구분되는 파랑 */

	/* 상태 (글자색은 각 배경에서 4.5:1 이상) */
	--swin-ok-bg: #E6F4EC;     --swin-ok-fg: #0B6B3A;     --swin-ok-line: #2E9E62;     /* 자동배포 */
	--swin-info-bg: #EAF1FF;   --swin-info-fg: #1E40AF;   --swin-info-line: #3B6FE0;   /* 정보보완 */
	--swin-warn-bg: #FFF4DB;   --swin-warn-fg: #7A4500;   --swin-warn-line: #D99A1E;   /* 확인필요 */
	--swin-danger-bg: #FFF1F0; --swin-danger-fg: #B90400; --swin-danger-line: #E10600; /* 취소·위험 */
	--swin-muted-bg: #EEF0F2;  --swin-muted-fg: #374151;  --swin-muted-line: #9CA3AF;  /* 마감·제외 */

	/* 글꼴 */
	--swin-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
	--swin-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	/* 역할별 글자 (크기/굵기) — 화면 전체 강제 아님, 아래 역할 클래스로 쓴다 */
	--swin-fs-title: clamp(24px, 1vw + 20px, 28px); /* 화면 제목 28/700 (모바일 24) */
	--swin-fs-section: 20px;  /* 구역 제목 20/700 */
	--swin-fs-body: 16px;     /* 본문 16/500 */
	--swin-fs-sm: 14px;       /* 보조·안내·표 머리·배지 14/400~600 (이보다 작게 금지) */
	--swin-fs-table: 15px;    /* 표 칸 15/500 */
	--swin-fs-btn: 16px;      /* 버튼 16/600 */
	--swin-fs-num: 20px;      /* 공고번호·핵심숫자 20~22/600 tabular */
	--swin-fs-sub: var(--swin-fs-section); /* 예전 이름(호환) */
	--swin-fw-body: 500;
	--swin-fw-strong: 600;
	--swin-fw-bold: 700;
	--swin-lh: 1.6;
	--swin-lh-tight: 1.35;

	/* 간격 (4px 단위) */
	--swin-sp-1: 4px;
	--swin-sp-2: 8px;
	--swin-sp-3: 12px;
	--swin-sp-4: 16px;
	--swin-sp-5: 20px;
	--swin-sp-6: 24px;
	--swin-sp-8: 32px;

	/* 모양 */
	--swin-radius-sm: 6px;
	--swin-radius: 8px;
	--swin-radius-lg: 12px;
	--swin-radius-pill: 999px;
	--swin-shadow: none;      /* 패널·카드는 테두리 하나로만 구분 (그림자 금지) */
	--swin-shadow-lg: 0 12px 32px rgba(17, 24, 39, .18); /* 팝업(.swin-dialog)에만 */
	--swin-tap: 44px;      /* 최소 터치 영역 */
}

/* ---------- 기본 타이포 (플러그인 화면 범위) ---------- */
body.bps-admin-portal,
body.bps-member-home {
	font-family: var(--swin-font);
	font-size: var(--swin-fs-body);
	font-weight: var(--swin-fw-body);
	line-height: var(--swin-lh);
	letter-spacing: normal;
	color: var(--swin-text);
	word-break: keep-all;          /* 한글 단어 중간 끊김 방지 */
	overflow-wrap: anywhere;       /* 긴 공고번호·URL은 끊어서 가로넘침 방지 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.bps-admin-portal { background: var(--swin-bg); }

/* 폼 요소는 기본적으로 글꼴을 상속하지 않음 → Arial 로 보이던 원인. 글꼴 종류만 맞추고 크기·굵기는 건드리지 않는다. */
html :where(.bps-admin-portal, .bps-member-home) :where(button, input, select, textarea, optgroup) { font-family: inherit; }
html :where(.bps-admin-portal, .bps-member-home) :where(code, kbd, pre, samp) { font-family: var(--swin-font-mono); }

/* ---------- 역할 글자 클래스 ---------- */
.swin-title   { margin: 0 0 var(--swin-sp-2); font-size: var(--swin-fs-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--swin-text); }
.swin-section,
.swin-subtitle { margin: 0 0 var(--swin-sp-2); font-size: var(--swin-fs-section); font-weight: 700; line-height: 1.35; color: var(--swin-text); }
.swin-body    { font-size: var(--swin-fs-body); font-weight: 500; line-height: var(--swin-lh); color: var(--swin-text); }
.swin-secondary { font-size: var(--swin-fs-sm); font-weight: 400; line-height: 1.55; color: var(--swin-text-2); }

/* 키보드 포커스는 항상 보이게 */
:where(body.bps-admin-portal, body.bps-member-home) :focus-visible {
	outline: 3px solid var(--swin-focus);
	outline-offset: 2px;
}
/* 스크립트가 포커스를 옮기는 대화상자·컨테이너(tabindex=-1)는 테두리를 그리지 않는다 — 안쪽 컨트롤만 표시 */
:where(body.bps-admin-portal, body.bps-member-home) :is([tabindex="-1"], dialog, [role="dialog"]):focus-visible { outline: none; }

/* ---------- 버튼 ---------- */
.swin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--swin-sp-2);
	min-height: var(--swin-tap);
	min-width: var(--swin-tap);
	padding: 0 var(--swin-sp-4);
	box-sizing: border-box;
	border: 1px solid var(--swin-border-strong);
	border-radius: var(--swin-radius);
	background: var(--swin-surface);
	color: var(--swin-text);
	font: var(--swin-fw-strong) var(--swin-fs-btn)/1.25 var(--swin-font);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.swin-btn:hover { background: var(--swin-surface-2); color: var(--swin-text); text-decoration: none; }
.swin-btn:focus-visible { outline: 3px solid var(--swin-focus); outline-offset: 2px; }
.swin-btn--primary { background: var(--swin-primary-bg); border-color: var(--swin-primary-line); color: var(--swin-primary-fg); box-shadow: var(--swin-primary-shadow); }
.swin-btn--primary:hover { background: var(--swin-primary-bg-hover); border-color: var(--swin-primary-line-hover); color: var(--swin-primary-fg); }
.swin-btn--secondary { /* 기본값과 같음 — 명시용 */ }
.swin-btn--ghost { background: transparent; border-color: transparent; color: var(--swin-text); }
.swin-btn--ghost:hover { background: var(--swin-surface-2); }
.swin-btn--danger { background: var(--swin-surface); border-color: var(--swin-red); color: var(--swin-red-dark); }
.swin-btn--danger:hover { background: var(--swin-red-tint); color: var(--swin-red-dark); }
.swin-btn--block { display: flex; width: 100%; }
.swin-btn:disabled,
.swin-btn[aria-disabled="true"] {
	background: var(--swin-surface-2);
	border-color: var(--swin-border);
	color: #6B7280;
	cursor: not-allowed;
}

/* ---------- 배지 (색 + 글자 둘 다로 의미 전달) ---------- */
.swin-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--swin-muted-line);
	border-radius: var(--swin-radius-pill);
	background: var(--swin-muted-bg);
	color: var(--swin-muted-fg);
	font: var(--swin-fw-strong) var(--swin-fs-sm)/1.4 var(--swin-font);
	white-space: nowrap;
	vertical-align: middle;
}
.swin-badge b,
.swin-badge strong { font-weight: var(--swin-fw-bold); font-variant-numeric: tabular-nums; }
.swin-badge--ok     { background: var(--swin-ok-bg);     border-color: var(--swin-ok-line);     color: var(--swin-ok-fg); }
.swin-badge--info   { background: var(--swin-info-bg);   border-color: var(--swin-info-line);   color: var(--swin-info-fg); }
.swin-badge--warn   { background: var(--swin-warn-bg);   border-color: var(--swin-warn-line);   color: var(--swin-warn-fg); }
.swin-badge--danger { background: var(--swin-danger-bg); border-color: var(--swin-danger-line); color: var(--swin-danger-fg); }
.swin-badge--muted  { background: var(--swin-muted-bg);  border-color: var(--swin-muted-line);  color: var(--swin-muted-fg); }
/* 제외: 마감과 같은 회색이지만 점선 테두리로 한 번 더 구분 */
.swin-badge--muted.swin-badge--dashed { border-style: dashed; background: var(--swin-surface); }

/* ---------- 카드 ---------- */
.swin-card {
	background: var(--swin-surface);
	border: 1px solid var(--swin-border);
	border-radius: var(--swin-radius-lg);
	box-shadow: var(--swin-shadow);
	padding: var(--swin-sp-4);
	box-sizing: border-box;
	min-width: 0;
}
@media (min-width: 768px) { .swin-card { padding: var(--swin-sp-5) var(--swin-sp-6); } }
.swin-card--selected { border: 2px solid var(--swin-red); }  /* 현재 선택 */
.swin-card > :first-child { margin-top: 0; }
.swin-card > :last-child { margin-bottom: 0; }

/* ---------- 안내문 ---------- */
.swin-help {
	margin: var(--swin-sp-1) 0 var(--swin-sp-3);
	font-size: var(--swin-fs-sm);
	font-weight: 500;
	line-height: var(--swin-lh);
	color: var(--swin-text-2);
}
.swin-help--box {
	padding: var(--swin-sp-3) var(--swin-sp-4);
	background: var(--swin-bg);
	border: 1px solid var(--swin-border);
	border-radius: var(--swin-radius);
	font-size: var(--swin-fs-body);
	color: var(--swin-text);
}
.swin-help--danger { border-color: #F5B5B2; background: var(--swin-red-tint); color: var(--swin-red-dark); }

/* ---------- 공고번호·핵심숫자 + 복사 ---------- */
.swin-num {
	font-family: var(--swin-font);
	font-size: var(--swin-fs-num);
	font-weight: var(--swin-fw-strong);
	line-height: 1.3;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--swin-text);
	word-break: break-all;
}
.swin-num--lg { font-size: 22px; }
.swin-num--sm { font-size: 18px; }

.swin-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--swin-tap);
	min-width: var(--swin-tap);
	padding: 0 var(--swin-sp-3);
	box-sizing: border-box;
	border: 1px solid var(--swin-border-strong);
	border-radius: var(--swin-radius);
	background: var(--swin-surface);
	color: var(--swin-text);
	font: var(--swin-fw-strong) var(--swin-fs-sm)/1.2 var(--swin-font);
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
}
.swin-copy:hover { background: var(--swin-surface-2); }
.swin-copy:focus-visible { outline: 3px solid var(--swin-focus); outline-offset: 2px; }
.swin-copy.is-copied,
.swin-copy[data-copied="1"] { background: var(--swin-ok-bg); border-color: var(--swin-ok-line); color: var(--swin-ok-fg); }
/* 번호 + 복사 버튼 한 줄 묶음 */
.swin-numrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--swin-sp-2) var(--swin-sp-3); min-width: 0; }

/* ---------- 고급/자세히 접힘 (<details class="swin-advanced">) ----------
 * 기존 <details class="bps-advanced-settings"> 도 같은 모양(두 클래스 동시 사용 포함).
 * 박스 모델은 여기서만 정한다: 테두리 1개, 좌우 안쪽 16px(맨 글자도 들여쓰기), summary 는 음수 여백으로 테두리 끝까지 꽉 참.
 * :is() 특이도 (0,1,0)/(0,1,1) = bid-price.css 의 .bps-advanced-settings 와 같고 나중에 로드되므로 이긴다. */
:is(.swin-advanced, .bps-advanced-settings) {
	display: block;
	margin: var(--swin-sp-3) 0;
	padding: 0 var(--swin-sp-4);
	border: 1px solid var(--swin-border);
	border-radius: var(--swin-radius);
	background: var(--swin-surface);
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;              /* summary 회색 바탕이 둥근 모서리 밖으로 안 나가게 */
}
:is(.swin-advanced, .bps-advanced-settings)[open] { padding-bottom: var(--swin-sp-4); }
:is(.swin-advanced, .bps-advanced-settings) > summary {
	display: block;                /* flex 금지: <strong>…</strong> 글자 섞인 summary 가 칸으로 쪼개짐 */
	position: relative;
	min-height: var(--swin-tap);
	margin: 0 calc(-1 * var(--swin-sp-4));
	padding: 10px var(--swin-sp-4) 10px 40px;
	box-sizing: border-box;
	background: var(--swin-surface-2);
	border: 0;
	font-size: var(--swin-fs-body);
	font-weight: var(--swin-fw-strong);
	line-height: 1.4;
	color: var(--swin-text-2);
	text-align: left;
	cursor: pointer;
	list-style: none;
}
:is(.swin-advanced, .bps-advanced-settings) > summary::-webkit-details-marker { display: none; }
:is(.swin-advanced, .bps-advanced-settings) > summary::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 22px;                     /* 첫 줄 가운데 (10px 여백 + 22.4px 줄높이 / 2) */
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s;
}
:is(.swin-advanced, .bps-advanced-settings)[open] > summary { margin-bottom: var(--swin-sp-3); border-bottom: 1px solid var(--swin-border); }
:is(.swin-advanced, .bps-advanced-settings)[open] > summary::before { transform: rotate(45deg); }
:is(.swin-advanced, .bps-advanced-settings) > summary:focus-visible { outline: 3px solid var(--swin-focus); outline-offset: -3px; }
/* 기존 모바일 규칙(admin-m-intake.css 13·53행 #bps-ui-advanced / .bps-run-panel details, admin-m-shell.css 52·53행 .bps-bid-suite-panel)이
 * summary 를 flex·padding 0 으로 덮어 화살표가 글자와 겹치던 것을 되돌린다. :is() 안의 #id 때문에 특이도 (1,0,1) — 이 세 곳에만 적용. */
:is(#bps-ui-advanced, .bps-run-panel details, .bps-bid-suite-panel > .bps-advanced-settings):is(.swin-advanced, .bps-advanced-settings) { padding: 0 var(--swin-sp-4); background: var(--swin-surface); }
:is(#bps-ui-advanced, .bps-run-panel details, .bps-bid-suite-panel > .bps-advanced-settings):is(.swin-advanced, .bps-advanced-settings)[open] { padding-bottom: var(--swin-sp-4); }
:is(#bps-ui-advanced, .bps-run-panel details, .bps-bid-suite-panel > .bps-advanced-settings):is(.swin-advanced, .bps-advanced-settings) > summary {
	display: block;
	min-height: var(--swin-tap);
	padding: 10px var(--swin-sp-4) 10px 40px;
	font-size: var(--swin-fs-body);
	line-height: 1.4;
}
.swin-advanced__body { overflow-x: auto; }  /* 진단 표가 넓으면 이 안에서만 스크롤 */

/* ---------- 건수 타일 ---------- */
.swin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--swin-sp-3); margin: var(--swin-sp-3) 0; }
@media (max-width: 480px) { .swin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--swin-sp-2); } }
.swin-kpi {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--swin-sp-3) var(--swin-sp-4);
	background: var(--swin-surface);
	border: 1px solid var(--swin-border);
	border-left: 4px solid var(--swin-muted-line);
	border-radius: var(--swin-radius);
	min-width: 0;
	box-sizing: border-box;
	color: var(--swin-text);
	text-decoration: none;
}
.swin-kpi__label { font-size: var(--swin-fs-sm); font-weight: var(--swin-fw-strong); color: var(--swin-text-2); line-height: 1.4; }
.swin-kpi__value { font-size: 26px; font-weight: var(--swin-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--swin-text); }
.swin-kpi__value small { font-size: var(--swin-fs-sm); font-weight: 500; margin-left: 2px; }
.swin-kpi--ok     { border-left-color: var(--swin-ok-line); }
.swin-kpi--info   { border-left-color: var(--swin-info-line); }
.swin-kpi--warn   { border-left-color: var(--swin-warn-line); }
.swin-kpi--danger { border-left-color: var(--swin-danger-line); }
.swin-kpi--muted  { border-left-color: var(--swin-muted-line); }
a.swin-kpi:hover { background: var(--swin-surface-2); }
.swin-kpi.is-active { border-color: var(--swin-red); border-left-color: var(--swin-red); box-shadow: inset 0 0 0 1px var(--swin-red); } /* 현재 선택한 필터 */

/* ---------- 표 (PC) → 카드 (모바일) ---------- */
.swin-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.swin-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--swin-surface);
	font-size: var(--swin-fs-table);
	font-weight: 500;
	line-height: 1.5;
	color: var(--swin-text);
}
.swin-table th,
.swin-table td { padding: 10px 12px; border-bottom: 1px solid var(--swin-border); text-align: left; vertical-align: middle; }
.swin-table thead th { background: var(--swin-bg); border-bottom-color: #D7DBE0; font-size: var(--swin-fs-sm); font-weight: 600; color: var(--swin-text-2); white-space: nowrap; }
.swin-table tbody th { font-weight: 600; }
.swin-table .swin-num { font-size: 17px; }   /* 표 안 공고번호는 한 단계 작게 */
.swin-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swin-table tbody tr:hover { background: #FAFAFB; }
.swin-table tr.is-selected { background: var(--swin-red-tint); }

/* 모바일 카드형: <table class="swin-table swin-table--cards"> + 각 td 에 data-label="항목명" */
@media (max-width: 640px) {
	.swin-table--cards,
	.swin-table--cards tbody,
	.swin-table--cards tr,
	.swin-table--cards td { display: block; width: 100%; box-sizing: border-box; }
	.swin-table--cards { background: transparent; }
	.swin-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.swin-table--cards tr {
		margin: 0 0 var(--swin-sp-3);
		padding: var(--swin-sp-3) var(--swin-sp-4);
		background: var(--swin-surface);
		border: 1px solid var(--swin-border);
		border-radius: var(--swin-radius-lg);
	}
	.swin-table--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--swin-sp-3); padding: 6px 0; border: 0; text-align: right; min-width: 0; }
	.swin-table--cards td[data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; font-size: var(--swin-fs-sm); font-weight: var(--swin-fw-strong); color: var(--swin-text-2); text-align: left; }
	.swin-table--cards td.is-head { display: block; padding: 0 0 var(--swin-sp-2); font-size: 17px; font-weight: var(--swin-fw-bold); text-align: left; }
	.swin-table--cards td.is-head::before { content: none; }
	.swin-table--cards td.is-num { white-space: normal; }
}

/* ---------- 배치 도우미 ---------- */
.swin-stack { display: flex; flex-direction: column; gap: var(--swin-sp-3); min-width: 0; }
.swin-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--swin-sp-2); min-width: 0; }
@media (max-width: 640px) { .swin-row--stack-m { flex-direction: column; align-items: stretch; } .swin-row--stack-m > .swin-btn { width: 100%; } }
.swin-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 탭·칩: "현재 선택" 한 가지 모양 (관리자·회원 공통) ----------
 * 선택 안 됨 = 흰 바탕 + 중립 테두리 + 진한 글자 / 선택됨 = 빨강 2px 테두리 + 진한 빨강 글자 + 700 (흰 바탕 유지, 분홍 채움·검정 채움 없음).
 * 상단 메뉴 바의 빨강 밑줄과 같은 강조색. 선택 표시는 .is-active / [aria-selected="true"] / [aria-pressed="true"] 어느 것이든.
 * 기존 마크업에도 같은 모양: 관리 읽은 결과 필터(.swin-run-tab), 회원 단계 탭(.bps-member-step-tab), 채널 칩(.bps-bid-chip).
 * :is() 특이도 (0,2,0)/(0,3,0) = bid-price.css 의 .bps-member-bid-home … 규칙과 같고 나중에 로드되므로 이긴다. 배치(flex·폭)는 각 화면 CSS 그대로. */
.swin-tabs { display: flex; flex-wrap: wrap; gap: var(--swin-sp-2); }
:is(.swin-tab, .swin-chip, .swin-run .swin-run-tab, .bps-bid-chip, .bps-member-step-tab) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: var(--swin-tap);
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid #C4CAD2;
	border-radius: var(--swin-radius);
	background: var(--swin-panel);
	box-shadow: none;
	color: var(--swin-text);
	font-family: var(--swin-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
:is(.swin-tab, .swin-chip, .swin-run .swin-run-tab, .bps-bid-chip, .bps-member-step-tab):hover { background: var(--swin-surface-2); color: var(--swin-text); }
:is(.swin-tab, .swin-chip, .swin-run .swin-run-tab, .bps-bid-chip, .bps-member-step-tab):is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
	border-color: var(--swin-red);
	box-shadow: inset 0 0 0 1px var(--swin-red);   /* 2px 처럼 보이되 크기는 안 변함 */
	background: var(--swin-panel);
	color: var(--swin-red-dark);
	font-weight: 700;
}
:is(.swin-tab, .swin-chip, .swin-run .swin-run-tab, .bps-bid-chip, .bps-member-step-tab):is(.is-active, [aria-selected="true"], [aria-pressed="true"]) :is(.swin-num, .bps-member-step-count) { color: inherit; }
:is(.swin-tab, .swin-chip, .swin-run .swin-run-tab, .bps-bid-chip, .bps-member-step-tab):focus-visible { outline: 3px solid var(--swin-focus); outline-offset: 2px; }

/* ---------- 팝업 (.swin-dialog) — 관리자·회원 공통 ----------
 * <dialog class="swin-dialog"> 또는 <div class="swin-dialog-backdrop"><div class="swin-dialog" role="dialog" aria-modal="true" aria-labelledby="…">
 *   <div class="swin-dialog__head"><h2 class="swin-dialog__title">…</h2><button class="swin-dialog__close" aria-label="닫기">×</button></div>
 *   <div class="swin-dialog__body">…</div>
 *   <div class="swin-dialog__foot"><button class="swin-btn">취소</button><button class="swin-btn swin-btn--primary">확인</button></div>
 * </div></div> */
/* 패널 모양(바탕·테두리·모서리·그림자·글자)만 — 기존 팝업(.bps-modal 등)에 클래스만 붙여도 배치는 안 바뀐다 */
.swin-dialog {
	box-sizing: border-box;
	border: 1px solid var(--swin-border);
	border-radius: 14px;
	background: var(--swin-panel);
	color: var(--swin-text);
	box-shadow: var(--swin-shadow-lg);
	font-family: var(--swin-font);
	font-size: var(--swin-fs-body);
	font-weight: 500;
	line-height: var(--swin-lh);
}
/* 머리·본문·바닥 구조(__head/__body/__foot)로 새로 만든 팝업만 크기·배치를 여기서 정한다 */
.swin-dialog:has(> .swin-dialog__body),
dialog.swin-dialog {
	display: flex;
	flex-direction: column;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: hidden;
}
.swin-dialog--wide:is(dialog, :has(> .swin-dialog__body)) { width: min(880px, calc(100vw - 32px)); }
dialog.swin-dialog:not([open]),
.swin-dialog[hidden],
.swin-dialog-backdrop[hidden] { display: none; }
dialog.swin-dialog::backdrop { background: rgba(17, 24, 39, .55); }
.swin-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background: rgba(17, 24, 39, .55);
}
.swin-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--swin-sp-3);
	padding: var(--swin-sp-3) var(--swin-sp-3) var(--swin-sp-3) var(--swin-sp-5);
	border-bottom: 1px solid var(--swin-border);
}
.swin-dialog__title { margin: 0; font-size: var(--swin-fs-section); font-weight: 700; line-height: 1.35; color: var(--swin-text); }
.swin-dialog__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--swin-tap);
	height: var(--swin-tap);
	padding: 0;
	border: 0;
	border-radius: var(--swin-radius);
	background: transparent;
	color: var(--swin-text-2);
	font: 400 26px/1 var(--swin-font);
	cursor: pointer;
}
.swin-dialog__close:hover { background: var(--swin-surface-2); color: var(--swin-text); }
.swin-dialog__close:focus-visible { outline: 3px solid var(--swin-focus); outline-offset: -3px; }
.swin-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--swin-sp-4) var(--swin-sp-5); }
.swin-dialog__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--swin-sp-2);
	padding: var(--swin-sp-3) var(--swin-sp-5) var(--swin-sp-4);
	border-top: 1px solid var(--swin-border);
}
@media (max-width: 480px) {
	.swin-dialog__head { padding-left: var(--swin-sp-4); }
	.swin-dialog__body { padding: var(--swin-sp-4); }
	.swin-dialog__foot { flex-direction: column-reverse; padding: var(--swin-sp-3) var(--swin-sp-4) var(--swin-sp-4); }
	.swin-dialog__foot > .swin-btn { width: 100%; }
}

/* ---------- 관리 포털 상단: 진한 간결한 메뉴 바 (기존 마크업 .bps-bid-suite-header + nav.bps-flat-nav) ----------
 * 바깥 흰 패널(#bps-bid-suite)은 투명하게 → 카드 안 카드 제거. 특이도 (1,1,1)/(0,3,2) 로 admin-m-shell.css 모바일 규칙을 이긴다. */
body.bps-admin-portal #bps-bid-suite { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 var(--swin-sp-4) var(--swin-sp-8); }
body.bps-admin-portal #bps-bid-suite > .bps-bid-suite-panel { padding: 0; }  /* 본문 왼쪽 끝 = 메뉴 바 왼쪽 끝 */
body.bps-admin-portal .bps-bid-suite-header {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--swin-sp-1) var(--swin-sp-4);
	padding: var(--swin-sp-3) 0;
	border: 0;
	background: transparent;
}
body.bps-admin-portal .bps-admin-portal-brand { flex: 1 1 auto; min-width: 0; gap: var(--swin-sp-3); }
body.bps-admin-portal .bps-admin-portal-brand .bps-member-logo-img { height: 30px; }
body.bps-admin-portal .bps-bid-suite-header h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--swin-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bps-admin-portal .bps-topbar-actions { display: flex; flex-wrap: wrap; gap: var(--swin-sp-1); width: auto; }
body.bps-admin-portal .bps-topbar-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--swin-tap);
	padding: 0 var(--swin-sp-3);
	border: 0;
	border-radius: var(--swin-radius);
	background: transparent;
	color: var(--swin-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
body.bps-admin-portal .bps-topbar-actions a:hover { background: #E9ECF0; }
body.bps-admin-portal .bps-topbar-actions .bps-logout-link { color: var(--swin-text-2); }

body.bps-admin-portal .bps-flat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
	margin: 0 0 var(--swin-sp-5);
	padding: 0 var(--swin-sp-2);
	border: 0;
	border-radius: 10px;
	background: var(--swin-nav-bg);
}
body.bps-admin-portal .bps-flat-nav a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: inset 0 -3px 0 transparent;
	color: var(--swin-nav-fg);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
body.bps-admin-portal .bps-flat-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); border: 0; }
body.bps-admin-portal .bps-flat-nav a.is-active { color: #fff; background: transparent; box-shadow: inset 0 -3px 0 var(--swin-red); }  /* 현재 위치 = 빨강 밑줄 */
body.bps-admin-portal .bps-flat-nav a:focus-visible { outline: 3px solid #93C5FD; outline-offset: -3px; }
body.bps-admin-portal .bps-flat-nav a[href*="bps_central_export"] { margin-left: auto; }  /* 엑셀 받기·고급은 오른쪽 끝 */
@media (max-width: 600px) {
	body.bps-admin-portal #bps-bid-suite { padding: 0 var(--swin-sp-3) var(--swin-sp-6); }
	body.bps-admin-portal .bps-admin-portal-brand .bps-member-logo-img { height: 26px; }
	body.bps-admin-portal .bps-bid-suite-header h3 { font-size: 15px; }
	body.bps-admin-portal .bps-flat-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px; margin-bottom: var(--swin-sp-4); }
	body.bps-admin-portal .bps-flat-nav a { min-height: 44px; padding: 0 4px; font-size: 15px; border-radius: 6px; }
	body.bps-admin-portal .bps-flat-nav a.is-active { background: rgba(255, 255, 255, .1); }
	body.bps-admin-portal .bps-flat-nav a[href*="bps_central_export"] { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.swin-btn, :is(.swin-advanced, .bps-advanced-settings) > summary::before { transition: none; }
}

/* ---------- 2026-10-17 3차(4.14.2): 회원 화면 = care79 챔페인 톤 ----------
 * 사장님 지시 "care79.com 디자인 그대로". 같은 토큰 이름을 회원 화면(body.bps-member-home)에서만 care79 값으로 바꾼다.
 * 관리자(body.bps-admin-portal)는 위 :root 값 그대로. 대비(흰/아이보리): #6B5B4E 6.5/6.1 · #776B62 5.2/4.9 · #7D6747 5.4/5.1 ·
 * 버튼글자 #66533E on #E8D8BB 5.2 · 위험 #9A3F28 6.7/6.4. #807468 은 흰 바탕(4.55)에서만. */
body.bps-member-home {
	--swin-red: #9A3F28;          /* 회원 화면에선 '빨강' = 따뜻한 적갈색(위험·마감 임박만). 주 버튼은 챔페인 */
	--swin-red-dark: #8F3A24;
	--swin-red-tint: #FBEDE8;
	--swin-text: #6B5B4E;
	--swin-text-2: #776B62;
	--swin-bg: #FBF8F2;
	--swin-panel: #FFFFFF;
	--swin-surface-2: #F7F1E6;
	--swin-border: #EFE6D6;
	--swin-border-strong: #DCCDB3;
	--swin-focus: #7D6747;
	--swin-danger-bg: #FBEDE8; --swin-danger-fg: #8F3A24; --swin-danger-line: #C98A76;
	--swin-ok-bg: #EEF2EA;     --swin-ok-fg: #4F6B45;     --swin-ok-line: #8FA685;
	--swin-warn-bg: #F7F1E6;   --swin-warn-fg: #7A5A24;   --swin-warn-line: #C9AE80;
	--swin-muted-bg: #F7F1E6;  --swin-muted-fg: #6B5B4E;  --swin-muted-line: #DCCDB3;
	/* care79 전용 */
	--swin-gold: #C9AE80;
	--swin-gold-d: #7D6747;
	--swin-champ-a: #F4EBDA;
	--swin-champ-b: #E8D8BB;
	--swin-champ-t: #66533E;      /* 챔페인 버튼 글자 */
	--swin-champ-line: #DCC69F;
	--swin-radius-lg: 24px;
	--swin-shadow: 0 30px 60px -20px rgba(107, 91, 78, .22), 0 2px 6px rgba(107, 91, 78, .06);
	--swin-shadow-card: 0 18px 40px -24px rgba(107, 91, 78, .28), 0 1px 2px rgba(107, 91, 78, .05);
	--swin-shadow-btn: 0 10px 24px -14px rgba(150, 120, 75, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
	--swin-ease: cubic-bezier(.22, .61, .36, 1);
	--swin-primary-bg: linear-gradient(180deg, #F4EBDA 0%, #E8D8BB 100%);
	--swin-primary-bg-hover: linear-gradient(180deg, #F0E4CD 0%, #E2CFAC 100%);
	--swin-primary-fg: #66533E; --swin-primary-line: #DCC69F; --swin-primary-line-hover: #CDB384;
	--swin-primary-shadow: 0 10px 24px -14px rgba(150, 120, 75, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
	letter-spacing: -0.01em;
}
body.bps-member-home ::selection { background: #EFE3CC; color: #6B5B4E; }
/* 주 버튼 = 챔페인 pill, 보조 = 흰 pill + #DCCDB3 테두리 */
body.bps-member-home .swin-btn { border-radius: var(--swin-radius-pill); border-color: var(--swin-border-strong); transition: background .2s var(--swin-ease), border-color .2s var(--swin-ease), box-shadow .2s var(--swin-ease), color .2s var(--swin-ease); }
body.bps-member-home .swin-btn:hover { background: var(--swin-bg); border-color: var(--swin-gold); color: var(--swin-gold-d); }
body.bps-member-home .swin-btn:disabled,
body.bps-member-home .swin-btn[aria-disabled="true"] { background: #F3EEE6; border-color: var(--swin-border); color: #776B62; box-shadow: none; }
body.bps-member-home .swin-card { border-color: var(--swin-border); box-shadow: var(--swin-shadow-card); }
body.bps-member-home .swin-dialog { border-color: var(--swin-border); border-radius: 24px; box-shadow: var(--swin-shadow); }
body.bps-member-home .swin-dialog-backdrop,
body.bps-member-home dialog.swin-dialog::backdrop { background: rgba(107, 91, 78, .42); }
body.bps-member-home .swin-copy { border-radius: var(--swin-radius-pill); }
body.bps-member-home .swin-copy.is-copied,
body.bps-member-home .swin-copy[data-copied="1"] { background: var(--swin-champ-a); border-color: var(--swin-champ-line); color: var(--swin-champ-t); }