/* 상품비교설정 — 자동 매칭 현황판 (2026-09-05, 비교 개편 1단계)
   페이지 본문 = 표준 페이지 문법(카드·파랑 — 색은 테마 토큰). 모달 아님 — A-4 미적용. */
.ccs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.ccs-head .ccs-note { font-size: 11.5px; color: var(--ord-text-3); }
.ccs-head .ccs-sp { flex: 1; }
.ccs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ccs-pill--ok { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.ccs-pill--warn { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.ccs-pill--blue { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); }

.ccs-card { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.ccs-card-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ord-line); background: var(--ord-surface-2); flex-wrap: wrap; }
.ccs-card-h h3 { font-size: 13.5px; font-weight: 700; color: var(--ord-text); margin: 0; }
.ccs-card-h .ccs-sub { font-size: 11.5px; color: var(--ord-text-3); }
.ccs-card-h .ccs-sp { flex: 1; }
.ccs-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--ord-line-2); background: var(--ord-panel); border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--ord-text-2); cursor: pointer; white-space: nowrap; }
.ccs-btn:hover { background: var(--ord-surface-2); border-color: var(--ord-text-4); }
.ccs-btn--pri { background: var(--ord-solid-blue); border-color: var(--ord-tint-blue-fg); color: var(--ord-on-solid); }
.ccs-btn--pri:hover { background: var(--ord-solid-blue); }
.ccs-btn--sm { padding: 3px 8px; font-size: 11px; }
.ccs-empty { padding: 14px 16px; font-size: 12px; color: var(--ord-text-4); }
.ccs-scroll { overflow-x: auto; }

table.ccs-mx { width: 100%; border-collapse: collapse; font-size: 12px; }
.ccs-mx th { background: var(--ord-surface-2); color: var(--ord-text-2); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--ord-line); border-right: 1px solid var(--ord-line-soft); text-align: left; white-space: nowrap; font-size: 11.5px; }
.ccs-mx th.ccs-c, .ccs-mx td.ccs-c { text-align: center; }
.ccs-mx th:first-child, .ccs-mx td:first-child, .ccs-mx th:nth-child(2), .ccs-mx td:nth-child(2) { width: 1%; white-space: nowrap; }
.ccs-mx td.ccs-head, .ccs-mx th:nth-child(3) { width: 1%; }
.ccs-mx th.ccs-gripcell, .ccs-mx td.ccs-gripcell { width: 30px; min-width: 30px; max-width: 30px; padding-left: 8px !important; padding-right: 2px !important; box-sizing: border-box; }
.ccs-grip { display: inline-block; color: var(--ord-line-2); font-size: 15px; line-height: 1; cursor: grab; user-select: none; padding: 2px 3px; border-radius: 4px; }
.ccs-grip:hover { color: var(--ord-tint-blue-fg); background: var(--ord-tint-blue-bg); }
.ccs-grip:active { cursor: grabbing; }
tr.ccs-ghost > td { background: var(--ord-tint-blue-bg) !important; opacity: .7; }
.ccs-mx td { padding: 6px 10px; border-bottom: 1px solid var(--ord-line-soft); border-right: 1px solid var(--ord-line-soft); vertical-align: middle; }
.ccs-mx tr:hover > td { background: var(--ord-surface-2); }
.ccs-mx tr.ccs-off > td { opacity: .45; }
.ccs-mx td.ccs-head { white-space: nowrap; min-width: 150px; }
.ccs-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ord-text); }
.ccs-name .ccs-edit { border: 0; background: transparent; color: var(--ord-text-4); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.ccs-name .ccs-edit:hover { color: var(--ord-tint-blue-fg); }
.ccs-name input { font: inherit; font-weight: 700; padding: 2px 6px; border: 1px solid var(--ord-tint-blue-line); border-radius: 6px; width: 150px; background: var(--ord-panel); color: var(--ord-text); }
.ccs-head small { display: block; font-weight: 500; color: var(--ord-text-4); font-size: 10.5px; margin-top: 1px; }
.ccs-head small a { color: var(--ord-tint-blue-fg); text-decoration: none; }
.ccs-head small a:hover { text-decoration: underline; }
.ccs-tag { display: inline-block; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.ccs-tag--int { color: var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); }
.ccs-tag--lock { color: var(--ord-text-3); background: var(--ord-band); }

.ccs-cell { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; max-width: 100%; background: var(--ord-panel); color: inherit; font: inherit; }
.ccs-cell--ok { background: var(--ord-tint-green-bg); border-color: var(--ord-tint-green-line); color: var(--ord-tint-green-fg); }
.ccs-cell--warn { background: var(--ord-tint-amber-bg); border-color: var(--ord-tint-amber-line); color: var(--ord-tint-amber-fg); }
.ccs-cell--none { background: var(--ord-surface-2); border-color: var(--ord-line); color: var(--ord-text-4); }
.ccs-cell:hover { filter: brightness(.97); }
.ccs-cell .ccs-cnt { font-weight: 500; opacity: .8; }

.ccs-sw { position: relative; display: inline-block; width: 30px; height: 17px; vertical-align: middle; }
.ccs-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.ccs-sw i { position: absolute; inset: 0; background: var(--ord-line-2); border-radius: 17px; cursor: pointer; transition: .15s; }
.ccs-sw i::before { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; background: var(--ord-panel); border-radius: 50%; transition: .15s; }
.ccs-sw input:checked + i { background: var(--ord-tint-blue-fg); }
.ccs-sw input:checked + i::before { transform: translateX(13px); }
.ccs-sw input:disabled + i { opacity: .5; cursor: default; }

/* colspan 셀의 긴 내용이 첫 열(핸들·사용)을 벌리지 않게 — 폭 0 상자에 넣고 100% 로 펼친다 */
.ccs-spanbox { width: 0; min-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccs-choices .ccs-spanbox { display: block; }
.ccs-more { padding: 8px 16px; background: var(--ord-surface-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ord-text-4); }
.ccs-choices { background: var(--ord-surface-2); padding: 10px 16px; }
.ccs-choices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.ccs-choice { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ccs-choice b { min-width: 72px; color: var(--ord-text); }
.ccs-choice .ccs-who { color: var(--ord-text-4); font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccs-choice select { font-size: 11px; padding: 3px 6px; border: 1px solid var(--ord-line); border-radius: 6px; background: var(--ord-panel); color: var(--ord-text-2); max-width: 160px; }
.ccs-choice select.ccs-aliased { border-color: var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); }
.ccs-hint { font-size: 11.5px; color: var(--ord-text-3); margin-top: 8px; }

.ccs-leftover { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-top: 1px dashed var(--ord-line); font-size: 11.5px; color: var(--ord-text-3); }
.ccs-lc { padding: 3px 9px; border-radius: 999px; background: var(--ord-band); color: var(--ord-text-2); border: 1px solid var(--ord-line); font-size: 11.5px; cursor: pointer; }
.ccs-lc:hover { border-color: var(--ord-tint-blue-line); background: var(--ord-tint-blue-bg); }
.ccs-lc b { color: var(--ord-text-3); font-weight: 600; margin-right: 3px; }

.ccs-addrow td { background: var(--ord-surface-2); }
.ccs-addrow input { font: inherit; padding: 5px 9px; border: 1px solid var(--ord-tint-blue-line); border-radius: 7px; width: 200px; background: var(--ord-panel); color: var(--ord-text); }
.ccs-kw { display: inline-flex; align-items: center; gap: 6px; }
.ccs-kw input { font: inherit; font-size: 11.5px; padding: 4px 8px; border: 1px solid var(--ord-line-2); border-radius: 6px; width: 140px; background: var(--ord-panel); color: var(--ord-text); }

/* 칸 클릭 팝오버 — body 직속(rmm 모달 z 대역 위, 스낵바 아래) */
.ccs-pop { position: absolute; z-index: 9000; background: var(--ord-panel); border: 1px solid var(--ord-line-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.15); padding: 6px; min-width: 190px; max-width: 320px; max-height: 280px; overflow: auto; }
.ccs-pop-t { padding: 4px 10px 6px; font-size: 10.5px; color: var(--ord-text-4); border-bottom: 1px solid var(--ord-line-soft); margin-bottom: 4px; }
.ccs-pop button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: transparent; border-radius: 6px; font-size: 12px; color: var(--ord-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccs-pop button:hover { background: var(--ord-tint-blue-bg); }
.ccs-pop button.ccs-cur { font-weight: 700; color: var(--ord-tint-blue-fg); }
.ccs-pop button.ccs-muted { color: var(--ord-text-4); }
.ccs-pop hr { border: 0; border-top: 1px solid var(--ord-line-soft); margin: 4px 0; }
.ccs-pop input { font: inherit; font-size: 12px; width: 100%; padding: 5px 8px; border: 1px solid var(--ord-line-2); border-radius: 6px; margin-bottom: 4px; background: var(--ord-panel); color: var(--ord-text); }

.ccs-saving { opacity: .6; pointer-events: none; }

@media (max-width: 760px) {
  .ccs-card-h { padding: 10px 12px; }
  .ccs-mx td.ccs-head { min-width: 120px; }
}