/* 상품비교설정 — 자동 매칭 현황판 (2026-09-05, 비교 개편 1단계)
   페이지 본문 = 표준 페이지 문법(흰 카드 #e5e7eb · 표준 파랑 #2563eb). 모달 아님 — 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: #6b7280; }
.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: #dcfce7; color: #166534; }
.ccs-pill--warn { background: #fef3c7; color: #92400e; }
.ccs-pill--blue { background: #dbeafe; color: #1e40af; }

.ccs-card { background: #fff; border: 1px solid #e5e7eb; 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 #e5e7eb; background: #f9fafb; flex-wrap: wrap; }
.ccs-card-h h3 { font-size: 13.5px; font-weight: 700; color: #111827; margin: 0; }
.ccs-card-h .ccs-sub { font-size: 11.5px; color: #6b7280; }
.ccs-card-h .ccs-sp { flex: 1; }
.ccs-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid #d1d5db; background: #fff; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap; }
.ccs-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.ccs-btn--pri { background: #2563eb; border-color: #2563eb; color: #fff; }
.ccs-btn--pri:hover { background: #1d4ed8; }
.ccs-btn--sm { padding: 3px 8px; font-size: 11px; }
.ccs-empty { padding: 14px 16px; font-size: 12px; color: #9ca3af; }
.ccs-scroll { overflow-x: auto; }

table.ccs-mx { width: 100%; border-collapse: collapse; font-size: 12px; }
.ccs-mx th { background: #f9fafb; color: #374151; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #f3f4f6; 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: #cbd5e1; font-size: 15px; line-height: 1; cursor: grab; user-select: none; padding: 2px 3px; border-radius: 4px; }
.ccs-grip:hover { color: #2563eb; background: #eff6ff; }
.ccs-grip:active { cursor: grabbing; }
tr.ccs-ghost > td { background: #eff6ff !important; opacity: .7; }
.ccs-mx td { padding: 6px 10px; border-bottom: 1px solid #f3f4f6; border-right: 1px solid #f9fafb; vertical-align: middle; }
.ccs-mx tr:hover > td { background: #fafbfc; }
.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: #111827; }
.ccs-name .ccs-edit { border: 0; background: transparent; color: #9ca3af; cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.ccs-name .ccs-edit:hover { color: #2563eb; }
.ccs-name input { font: inherit; font-weight: 700; padding: 2px 6px; border: 1px solid #93c5fd; border-radius: 6px; width: 150px; background: #fff; color: #111827; }
.ccs-head small { display: block; font-weight: 500; color: #9ca3af; font-size: 10.5px; margin-top: 1px; }
.ccs-head small a { color: #2563eb; 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: #b45309; background: #fff7ed; }
.ccs-tag--lock { color: #64748b; background: #f1f5f9; }

.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: #fff; color: inherit; font: inherit; }
.ccs-cell--ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ccs-cell--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ccs-cell--none { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; }
.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: #d1d5db; border-radius: 17px; cursor: pointer; transition: .15s; }
.ccs-sw i::before { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; }
.ccs-sw input:checked + i { background: #2563eb; }
.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: #fafbfc; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: #9ca3af; }
.ccs-choices { background: #fafbfc; 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: #111827; }
.ccs-choice .ccs-who { color: #9ca3af; 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 #e5e7eb; border-radius: 6px; background: #fff; color: #374151; max-width: 160px; }
.ccs-choice select.ccs-aliased { border-color: #fcd34d; background: #fffbeb; }
.ccs-hint { font-size: 11.5px; color: #6b7280; margin-top: 8px; }

.ccs-leftover { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-top: 1px dashed #e5e7eb; font-size: 11.5px; color: #6b7280; }
.ccs-lc { padding: 3px 9px; border-radius: 999px; background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; font-size: 11.5px; cursor: pointer; }
.ccs-lc:hover { border-color: #93c5fd; background: #eff6ff; }
.ccs-lc b { color: #6b7280; font-weight: 600; margin-right: 3px; }

.ccs-addrow td { background: #f8fafc; }
.ccs-addrow input { font: inherit; padding: 5px 9px; border: 1px solid #93c5fd; border-radius: 7px; width: 200px; background: #fff; color: #111827; }
.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 #d1d5db; border-radius: 6px; width: 140px; background: #fff; color: #111827; }

/* 칸 클릭 팝오버 — body 직속(rmm 모달 z 대역 위, 스낵바 아래) */
.ccs-pop { position: absolute; z-index: 9000; background: #fff; border: 1px solid #d1d5db; 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: #9ca3af; border-bottom: 1px solid #f3f4f6; 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: #111827; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccs-pop button:hover { background: #eff6ff; }
.ccs-pop button.ccs-cur { font-weight: 700; color: #1e40af; }
.ccs-pop button.ccs-muted { color: #9ca3af; }
.ccs-pop hr { border: 0; border-top: 1px solid #f3f4f6; margin: 4px 0; }
.ccs-pop input { font: inherit; font-size: 12px; width: 100%; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 4px; background: #fff; color: #111827; }

.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; }
}
html.dark .ccs-card { background: #0f172a; border-color: #334155; }
html.dark .ccs-card-h { background: #1e293b; border-color: #334155; }
html.dark .ccs-card-h h3, html.dark .ccs-name, html.dark .ccs-choice b { color: #f1f5f9; }
html.dark .ccs-mx th { background: #1e293b; color: #cbd5e1; border-color: #334155; }
html.dark .ccs-mx td { border-color: #1e293b; }
html.dark .ccs-mx tr:hover > td { background: #1e293b; }
html.dark .ccs-choices, html.dark .ccs-more, html.dark .ccs-addrow td { background: #111827; }
html.dark .ccs-pop { background: #1e293b; border-color: #334155; }
html.dark .ccs-pop button { color: #e2e8f0; }
html.dark .ccs-pop button:hover { background: #334155; }