/* 📋 쿠팡 등록 상황판 (`T-429` · `static/js/screens/uploads-screen.js`) — 사장님 «시안좋네» 시안 그대로 · 토큰으로만(DESIGN.md · §11-L). */
.ub-wrap { max-width: 980px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-16); color: var(--color-text-primary); }
.ub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ub-head h1, .ub-wrap > h1 { font-size: var(--text-2xl); letter-spacing: -.03em; margin: 0; }
.ub-sub { color: var(--color-text-secondary); margin: var(--space-2) 0 var(--space-5); font-size: var(--text-sm); }
.ub-err { color: var(--color-banned-text); margin-top: var(--space-4); }
.ub-muted { color: var(--color-text-muted); }
.ub-empty { color: var(--color-text-secondary); padding: var(--space-10) 0; text-align: center; }

.ub-sum { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
/* ★요약 칸은 누르면 그 조건으로 거른다(`T-462` ⑤) — 버튼도 상자 모양 그대로 */
.ub-tile { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); text-align: left; font: inherit; color: inherit; }
button.ub-tile { cursor: pointer; }
button.ub-tile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
/* 켜진 요약 칸 — 다시 누르면 풀린다(사장님 2026-10-22) */
button.ub-tile.is-on { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.ub-tile small { color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-tile b { display: block; font-size: var(--text-xl); margin-top: var(--space-1); white-space: nowrap; }
.ub-tile.is-bad b { color: var(--color-banned-text); }
.ub-tile i { display: block; font-style: normal; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }

.ub-day { font-weight: var(--font-bold); font-size: var(--text-base); margin: var(--space-5) 0 var(--space-3); color: var(--color-primary); }

.ub-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-bottom: var(--space-4); overflow: hidden; }
.ub-card.is-legacy { border-style: dashed; }
.ub-card header { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; font-size: var(--text-sm); }
.ub-card header a { color: var(--color-text-secondary); }
.ub-time { font-size: var(--text-base); }
.ub-st { font-style: normal; font-size: var(--text-xs); font-weight: var(--font-bold); padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-bg-input); color: var(--color-text-secondary); }
.ub-st--draft { background: var(--color-accent-light); color: var(--color-accent-hover); }
.ub-st--pending { background: var(--color-primary-light); color: var(--color-primary-dark); }
.ub-st--approved { background: var(--color-success-light); color: var(--color-success); }
.ub-st--rejected { background: var(--color-banned-bg); color: var(--color-banned-text); }
.ub-why { color: var(--color-banned-text); font-size: var(--text-xs); }

.ub-body { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: var(--space-4); }
.ub-thumb { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); cursor: zoom-in; padding: 0; overflow: hidden; text-align: center; }
.ub-thumb img { width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; }
.ub-thumb img.is-cover { height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; background: var(--color-bg-card); }
.ub-thumb small { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); padding: var(--space-2); }
.ub-thumb--none { cursor: default; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.ub-info h3 { font-size: var(--text-base); line-height: 1.4; letter-spacing: -.02em; margin: 0; }
/* 🔑 메인 · 보조 키워드(T-490) — 상품명 바로 아래 · 칩 = 쿠팡 검색 새 탭 */
.ub-kws { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--space-2) 0; font-size: var(--text-sm); }
.ub-kws > small { flex-basis: 100%; }
.ub-kws.is-none { color: var(--color-text-secondary); }
/* 항목명(메인·보조)·검색수는 칩 밖 — 칩 = 키워드 글자만 */
.ub-kw-lab { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary); margin-left: var(--space-2); }
.ub-kw-lab:first-of-type { margin-left: 0; }
.ub-kw-item { display: inline-flex; align-items: center; gap: 4px; }
.ub-kw-vol { font-size: var(--text-xs); color: var(--color-text-secondary); }
.ub-kw-none { font-size: var(--text-xs); color: var(--color-banned-text); }
.ub-kw { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-primary); text-decoration: none; }
.ub-kw:hover { border-color: var(--color-primary); }
.ub-kw.is-main { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; }
.ub-kw.is-sub { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.ub-kw.is-more { font-size: var(--text-xs); padding: 1px 8px; }
.ub-kw-warn { flex-basis: 100%; margin: 0; padding-left: 18px; color: var(--color-banned-text); font-size: var(--text-xs); }
p.ub-kw-warn { padding-left: 0; }
.ub-kw-more { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.ub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0; }
.ub-tags span { font-size: var(--text-xs); background: var(--color-bg-section); color: var(--color-primary); padding: 3px 9px; border-radius: var(--radius-full); }
.ub-opt { font-size: var(--text-sm); line-height: 1.7; }
.ub-opt small { color: var(--color-text-secondary); }
.ub-opt em { display: block; font-style: normal; color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-oi { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.ub-oi-b, .ub-oi-more { padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); cursor: zoom-in; overflow: hidden; }
.ub-oi-b:hover, .ub-oi-more:hover { border-color: var(--color-primary); }
.ub-oi-b img { height: 44px; width: 44px; object-fit: cover; display: block; }
.ub-oi-more { width: 44px; height: 46px; font-size: var(--text-xs); color: var(--color-text-secondary); }

.ub-money { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--color-border); }
.ub-money > div { padding: var(--space-3); border-right: 1px solid var(--color-border); }
.ub-money > div:last-child { border-right: 0; }
.ub-money small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-money b { font-size: var(--text-sm); }
.ub-money i { display: block; font-style: normal; color: var(--color-text-muted); font-size: var(--text-xs); }
.ub-money .is-hl { background: var(--color-success-light); }
.ub-money .is-hl b { color: var(--color-success); font-size: var(--text-base); }
.ub-money--none { display: block; padding: var(--space-3) var(--space-4); color: var(--color-text-secondary); font-size: var(--text-sm); }
.ub-peropt { border-top: 1px solid var(--color-border); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.ub-peropt summary { cursor: pointer; color: var(--color-primary); }
.ub-peropt table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.ub-peropt th, .ub-peropt td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--color-border); }

/* 👁 조회수 줄(`T-433`) — 픽셀이 없거나 모르면 숫자 대신 까닭(0 으로 안 그린다). */
.ub-views { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.ub-views > b { color: var(--color-text-secondary); font-weight: var(--font-bold); }
.ub-views span b { font-size: var(--text-base); color: var(--color-primary-dark); margin-left: 4px; }
.ub-views em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-secondary); }
/* 시험 조회(T-496) — 손님 조회와 갈라 흐리게 */
.ub-views .ub-views-test { color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-views .ub-views-test b { color: var(--color-text-secondary); font-size: var(--text-sm); }
.ub-views .ub-px { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-input); color: var(--color-text-secondary); }
.ub-views .ub-px.is-ok { background: var(--color-success-light); color: var(--color-success); }
.ub-views .ub-px.is-bad { background: var(--color-banned-bg); color: var(--color-banned-text); }
.ub-views--none { color: var(--color-text-secondary); }

/* 🧪 판매 시험(T-499) — 조회수 칸과 같은 띠 꼴 · 판정 유보만 경고색 */
.ub-test { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.ub-test > b { color: var(--color-text-secondary); font-weight: var(--font-bold); }
.ub-test-stage { font-style: normal; font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-input); color: var(--color-text-secondary); }
.ub-test--hold .ub-test-stage { background: var(--color-banned-bg); color: var(--color-banned-text); }
.ub-test--done .ub-test-stage, .ub-test--over .ub-test-stage { background: var(--color-success-light); color: var(--color-success); }
.ub-test-warn { font-style: normal; font-size: var(--text-xs); color: var(--color-banned-text); }
.ub-test-row { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.ub-test-day { padding: 1px 6px; border-radius: var(--radius-md); background: var(--color-bg-input); color: var(--color-text-secondary); }
.ub-test-day.is-due { color: var(--color-primary-dark); font-weight: var(--font-bold); }

.ub-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: var(--space-6) var(--space-4); }
.ub-modal-in { width: min(520px, 100%); }
.ub-modal-cap { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-inverse); }
.ub-modal-cover { display: block; width: 100%; border-radius: var(--radius-md); }
.ub-modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.ub-modal img { width: 100%; display: block; }

/* ── 쌓여도 다룰 수 있게(`T-448` · `T-449` · `T-462`) — 사이드 패널 · 달력 · 도구 줄 · 숨긴 카드 ── */
.ub-wrap { max-width: 1320px; }
/* ★오른쪽 사이드 패널(`T-462` ①) — 달력·불러오기·숨긴 카드는 목록을 내려도 따라온다 */
.ub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.ub-side { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); max-height: calc(100vh - var(--space-8)); overflow: auto; }
.ub-panel { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); }
.ub-panel h2 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.ub-panel h2 small { color: var(--color-text-muted); font-weight: normal; }
.ub-panel p { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.6; margin: var(--space-2) 0; }
.ub-panel > small { display: block; font-size: var(--text-xs); }
.ub-views-all { width: 100%; }
.ub-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.ub-cal-head b { font-size: var(--text-sm); }
.ub-cal-head small { color: var(--color-text-muted); font-weight: normal; margin-left: 4px; }
.ub-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: var(--space-2); }
.ub-cal-dow { font-style: normal; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.ub-cal-d { border: 1px solid transparent; background: transparent; border-radius: var(--radius-md); padding: 3px 0; min-height: 38px; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-cal-d:disabled { cursor: default; opacity: .55; }
.ub-cal-d b { font-size: var(--text-sm); color: var(--color-primary-dark); }
.ub-cal-d.has { background: var(--color-primary-light); }
.ub-cal-d.is-today { border-color: var(--color-primary); }
.ub-cal-d.is-on { background: var(--color-primary); color: var(--color-text-inverse); }
.ub-cal-d.is-on b { color: var(--color-text-inverse); }
.ub-cal small { display: block; font-size: var(--text-xs); }
.ub-cal-clear { width: 100%; }
.ub-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.ub-tools .ub-q { flex: 1 1 240px; min-width: 180px; }
.ub-tools input, .ub-tools select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-input); color: var(--color-text-primary); font-size: var(--text-sm); }
.ub-chk { display: inline-flex; gap: 4px; align-items: center; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ub-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.ub-line-avg { margin-left: auto; }
.ub-line b { color: var(--color-text-primary); }
.ub-card.is-trash { opacity: .7; border-style: dashed; }
.ub-trash-why { font-size: var(--text-xs); color: var(--color-banned-text); }
/* 숨긴 카드 완전 삭제(`T-467`) — 카드 고르기 · 사이드 패널 지우기 줄 */
.ub-pick { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); cursor: pointer; }
.ub-purge-bar { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.ub-repriced { border-top: 1px solid var(--color-border); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-accent-hover); background: var(--color-accent-light); }

/* 🔍 경쟁 비교(`T-463`) — 공통 · 우리 · 좋은 점 · 모자란 점 네 칸 */
.ub-spec { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.ub-spec summary { cursor: pointer; font-weight: var(--font-bold); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ub-spec summary .ub-muted { font-weight: normal; font-size: var(--text-xs); }
.ub-spec > summary { list-style: none; }
.ub-spec > summary::-webkit-details-marker { display: none; }
.ub-sp-sum { font-weight: var(--font-semibold); font-size: var(--text-xs); color: var(--color-text-secondary); }
.ub-sp-tog { margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-primary); white-space: nowrap; }
.ub-sp-tog::after { content: "▸ 펼치기"; }
.ub-spec[open] > summary .ub-sp-tog::after { content: "▾ 접기"; }
.ub-spec--none { color: var(--color-text-muted); font-size: var(--text-xs); }
.ub-tier { font-style: normal; font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary-dark); }
.ub-tier.is-ok { background: var(--color-success-light); color: var(--color-success); }
.ub-tier.is-bad { background: var(--color-banned-bg); color: var(--color-banned-text); }
.ub-spec-warn { color: var(--color-banned-text); font-size: var(--text-xs); margin: var(--space-2) 0 0; }
/* `T-483` 시안 A — 점수판(숫자 타일) · 🎯 왜 이 시장 · 기능 칩 ✓✕ · 가격 위치 */
.ub-sp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.ub-sp-kpi { background: var(--color-bg-section); border-radius: var(--radius-lg); padding: var(--space-3); min-width: 0; }
.ub-sp-kpi small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.4; word-break: keep-all; }
.ub-sp-kpi b { display: block; font-size: var(--text-xl); font-weight: var(--font-extrabold); letter-spacing: -.02em; margin-top: 2px; }
.ub-sp-kpi b.is-ok { color: var(--color-success); }
.ub-sp-kpi b.is-bad { color: var(--color-danger); }
.ub-sp-meter { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-border); margin-top: var(--space-2); overflow: hidden; }
.ub-sp-meter i { display: block; height: 100%; background: var(--color-success); border-radius: inherit; }
.ub-sp-meter i.is-bad { background: var(--color-warning); }
.ub-sp-why { display: flex; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-primary-light); }
.ub-sp-why > span { font-size: var(--text-xl); line-height: 1; }
.ub-sp-why h5 { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-primary); }
.ub-sp-why ul { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.6; word-break: keep-all; }
.ub-sp-why small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
.ub-sp-why.is-none { background: var(--color-bg-section); }
.ub-sp-why.is-none h5 { color: var(--color-text-muted); margin: 0; }
.ub-sp-sec { margin-top: var(--space-3); }
.ub-sp-sec > h5 { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-bold); }
.ub-sp-sec > h5 small { color: var(--color-text-muted); font-weight: normal; }
.ub-sp-sec > p { margin: 0; font-size: var(--text-xs); }
.ub-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ub-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); line-height: 1.5; border: 1px solid var(--color-border); background: var(--color-bg-card); word-break: keep-all; }
.ub-chip em { font-style: normal; font-weight: var(--font-extrabold); }
.ub-chip small { color: var(--color-text-muted); }
.ub-chip.is-ok em { color: var(--color-success); }
.ub-chip.is-bad { border-color: var(--color-border-danger); background: var(--color-banned-bg); }
.ub-chip.is-bad em { color: var(--color-danger); }
.ub-chip.is-half { border-color: var(--color-warning); }
.ub-chip.is-half em { color: var(--color-warning); }
.ub-chip.is-unk em { color: var(--color-text-muted); }
.ub-chip.is-plus { border-color: transparent; background: var(--color-success-light); color: var(--color-success); font-weight: var(--font-semibold); }
.ub-chip.is-minus { border-color: transparent; background: var(--color-banned-bg); color: var(--color-banned-text); font-weight: var(--font-semibold); }
.ub-sp-price { position: relative; height: 28px; margin: 0 var(--space-2); }
.ub-sp-price i { position: absolute; display: block; }
.ub-sp-price .rail { left: 0; right: 0; top: 11px; height: 6px; border-radius: var(--radius-full); background: var(--color-border); }
.ub-sp-price .mid { top: 7px; width: 2px; height: 14px; background: var(--color-text-muted); }
.ub-sp-price .ours { top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-bg-card); box-shadow: var(--shadow-sm); }
.ub-sp-legend { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.ub-sp-legend b { color: var(--color-primary); }
.ub-sp-more { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.ub-sp-more > summary { cursor: pointer; color: var(--color-primary); font-weight: var(--font-semibold); }
.ub-sp-more ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); line-height: 1.6; }
.ub-sp-more p { margin: var(--space-2) 0 0; line-height: 1.6; }

/* 옵션 사진 확대(`T-462` ⑥) */
.ub-modal-in--opt { width: min(720px, 100%); }
.ub-opt-big { background: var(--color-bg-card); border-radius: var(--radius-lg); max-height: 70vh; object-fit: contain; }
.ub-opt-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.ub-opt-strip button { padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-bg-card); cursor: pointer; overflow: hidden; }
.ub-opt-strip button.is-on { border-color: var(--color-primary); }
.ub-opt-strip img { width: 56px; height: 56px; object-fit: cover; display: block; }

@media (max-width: 1200px) {
  .ub-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ub-layout { grid-template-columns: 1fr; }
  .ub-side { position: static; max-height: none; order: -1; }
}

@media (max-width: 720px) {
  .ub-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-body { grid-template-columns: 110px 1fr; }
  .ub-money { grid-template-columns: repeat(4, 1fr); }
  .ub-money > div:nth-child(4n) { border-right: 0; }
  .ub-money > div:nth-child(-n+4) { border-bottom: 1px solid var(--color-border); }
}

/* 👀 보기 방식(`T-476` · 사장님 «카드가 너무 커서 한눈에 안 들어온다» → 시안 넷 «모두 다 넣어») — 표 · 사진 · 목록 · 자세히(옛 카드) */
.ub-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.ub-seg button { border: 0; background: var(--color-bg-card); padding: 6px 12px; font: inherit; font-size: var(--text-sm); cursor: pointer; color: var(--color-text-secondary); }
.ub-seg button + button { border-left: 1px solid var(--color-border); }
.ub-seg button.is-on { background: var(--color-primary); color: var(--color-text-inverse); }
.ub-noimg { display: block; background: var(--color-bg); border: 1px solid var(--color-border); }
.ub-tb-wrap { overflow-x: auto; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ub-tb { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ub-tb th { background: var(--color-bg-input); text-align: left; font-size: var(--text-xs); color: var(--color-text-secondary); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.ub-tb th.num, .ub-tb td.num { text-align: right; white-space: nowrap; }
.ub-th { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ub-th:hover, .ub-th[aria-pressed="true"] { color: var(--color-primary); }
.ub-tb td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ub-tb-r { cursor: pointer; }
.ub-tb-r:hover td, .ub-tb-r.is-open td { background: var(--color-bg-section); }
.ub-tb-r.is-trash { opacity: .7; }
.ub-tb-img { width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: cover; display: block; border: 1px solid var(--color-border); }
.ub-tb-name { display: block; line-height: 1.4; word-break: keep-all; }
.ub-tb td small { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.ub-tb-d { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; }
.ub-tb .ub-st, .ub-gr .ub-st, .ub-ln .ub-st { white-space: nowrap; }
.ub-tb-p { color: var(--color-success); font-weight: var(--font-bold); }
.ub-tb-day td { background: var(--color-bg); color: var(--color-primary); font-weight: var(--font-bold); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.ub-tb-x > td { background: var(--color-bg); padding: var(--space-3); }
.ub-tb-x .ub-card { margin-bottom: 0; }
.ub-gr { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.ub-gr-day { grid-column: 1 / -1; margin: var(--space-2) 0 0; }
.ub-gr-c { display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.ub-gr-c:hover, .ub-gr-c.is-open { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.ub-gr-c.is-trash { opacity: .7; border-style: dashed; }
.ub-gr-img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--color-bg); }
.ub-gr-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.ub-gr-img .ub-st { position: absolute; top: var(--space-2); left: var(--space-2); }
.ub-gr-img .ub-why, .ub-gr-img .ub-muted { display: none; }
.ub-gr-v { position: absolute; bottom: var(--space-2); right: var(--space-2); background: var(--color-bg-card); border-radius: var(--radius-full); font-size: var(--text-xs); padding: 2px 8px; box-shadow: var(--shadow-sm); }
.ub-gr-b { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
.ub-gr-b > b { font-size: var(--text-sm); line-height: 1.4; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ub-gr-m { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
.ub-gr-m b { color: var(--color-text-primary); font-size: var(--text-sm); white-space: nowrap; }
.ub-gr-x { grid-column: 1 / -1; }
.ub-gr-x .ub-card { margin-bottom: 0; }
.ub-ln { display: flex; flex-direction: column; gap: var(--space-2); }
.ub-ln-r { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ub-ln-r.is-open { border-color: var(--color-primary); }
.ub-ln-r.is-trash { opacity: .7; border-style: dashed; }
.ub-ln-h { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ub-ln-img { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; display: block; border: 1px solid var(--color-border); }
.ub-ln-t { min-width: 0; }
.ub-ln-t > b { display: block; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-ln-t small { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.ub-ln-n { display: flex; gap: var(--space-5); font-size: var(--text-xs); color: var(--color-text-secondary); text-align: right; }
.ub-ln-n b { display: block; font-size: var(--text-base); color: var(--color-text-primary); white-space: nowrap; }
.ub-ln-x { border-top: 1px solid var(--color-border); padding: var(--space-3); }
.ub-ln-x .ub-card { margin-bottom: 0; }
@media (max-width: 760px) { .ub-ln-h { grid-template-columns: 56px minmax(0, 1fr); } .ub-ln-n { grid-column: 1 / -1; justify-content: space-between; } }
@media (max-width: 600px) {
  .ub-sp-kpi { padding: var(--space-2) var(--space-3); }
  .ub-sp-kpi b { font-size: var(--text-lg); }
}

/* ── 상품군 묶어 보기(T-466 시안 A) — 상품군 줄 · 묶음 · 우리 상품끼리 비교표 · 공통형/특이형 배지 ── */
.ub-gp-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.ub-gp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-bg-card);
  border-radius: var(--radius-full); padding: 6px 14px; font: inherit; font-size: var(--text-sm); cursor: pointer; color: var(--color-text-primary); }
.ub-gp-chip b { font-weight: var(--font-bold); }
.ub-gp-chip i { font-style: normal; color: var(--color-text-secondary); font-size: var(--text-xs); }
.ub-gp-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.ub-gp-chip.is-on i { color: var(--color-text-inverse); }
.ub-gp { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-bottom: var(--space-5); overflow: hidden; }
.ub-gp > header { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ub-gp > header h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.02em; }
.ub-gp > header small { color: var(--color-text-secondary); font-size: var(--text-sm); }
.ub-gp-body { padding: var(--space-3) var(--space-4); }
.ub-gp-cmp { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ub-gp-cmp h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--font-bold); }
.ub-gp-tw { overflow-x: auto; }
.ub-gp-cmp table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.ub-gp-cmp th, .ub-gp-cmp td { border-bottom: 1px solid var(--color-border); padding: 8px 10px; text-align: center; vertical-align: top; word-break: keep-all; }
.ub-gp-cmp th:first-child, .ub-gp-cmp td:first-child { text-align: left; color: var(--color-text-secondary); white-space: nowrap; }
.ub-gp-cmp thead th { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-bold); }
.ub-gp-cmp tr.is-split td { background: var(--color-accent-light); }
.ub-gp-cmp tr.is-split td:first-child { color: var(--color-text-primary); font-weight: var(--font-bold); }
.ub-gp-cmp tr.is-own td { text-align: left; font-size: var(--text-xs); color: var(--color-text-secondary); }
.ub-gp-cmp td small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); margin-top: 2px; }
.ub-gp-o { color: var(--color-success); font-weight: var(--font-bold); }
.ub-gp-x { color: var(--color-banned-text); font-weight: var(--font-bold); }
.ub-gp-q { color: var(--color-text-muted); }
.ub-gp-same { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.ub-gp-tg { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 8px; border-radius: var(--radius-full); margin: 4px 4px 0 0; white-space: normal; }
.ub-gp-tg.is-common { background: var(--color-primary-light); color: var(--color-primary-dark); }
.ub-gp-tg.is-odd { background: var(--color-accent-light); color: var(--color-accent-hover); }