/* 레이아웃 컨테이너. 클래스 이름을 .compare 로 두면 비교 표(table.spec.compare)까지
   display:flex 가 되어 thead 와 tbody 가 가로로 나란히 놓인다 — 이름을 갈라 둔다. */
.compare-layout{display:flex;height:100%;min-height:0}
.compare-picker{
  width:288px;flex-shrink:0;overflow-y:auto;padding:12px 10px;
  background:var(--bg);border-right:1px solid var(--border);
}
.pick-group{margin-bottom:6px}
.pick-group summary{
  padding:6px 8px;border-radius:6px;font-weight:700;font-size:12px;
  color:var(--text-sub);cursor:pointer;
}
.pick-group summary:hover{background:var(--bg-tint)}
.pick-item{
  display:flex;align-items:center;gap:8px;padding:5px 10px 5px 20px;
  font-size:12.5px;cursor:pointer;
}
.pick-item:hover{background:var(--bg-tint)}

.compare-view{flex:1;min-width:0;overflow-y:auto;padding:18px 22px}
.compare-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px;
  font-weight:700;font-size:13px;
}
.compare-bar .btn{margin-left:auto;font-size:12px;padding:5px 11px}
.cmp-count{white-space:nowrap}
.compare-chips{display:flex;flex-wrap:wrap;gap:6px}
.cmp-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:260px;
  padding:3px 8px 3px 5px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--bg);color:var(--text-sub);font:600 11.5px/1.6 inherit;cursor:pointer;
}
.cmp-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-chip .x{font-size:13px;line-height:1;color:var(--text-muted)}
.cmp-chip:hover{border-color:var(--warn);color:var(--warn)}
.cmp-chip:hover .x{color:var(--warn)}

/* 첫 열은 가로 스크롤에서 왼쪽에 고정한다 — 머리글 셀까지 함께 고정하지 않으면
   열 라벨만 밀려나가 데이터와 어긋나 보인다. 여기서 공유하는 것은 고정에 필요한
   속성뿐이다: 글꼴까지 함께 주면 머리글 첫 칸만 옆 칸들과 크기가 달라진다. */
table.spec.compare-spec th.row-head,
table.spec.compare-spec thead th:first-child{
  position:sticky;left:0;z-index:1;background:var(--bg-soft);
}
table.spec.compare-spec thead th:first-child{z-index:2}
table.spec.compare-spec th.row-head{
  text-align:left;font-weight:600;font-size:12px;white-space:nowrap;
}
/* 상품 소제목 행 — 어디서 상품이 갈리는지 굵은 선으로 끊어 보여준다. */
table.spec.compare-spec tr.product-row th{
  padding:8px 10px;background:var(--bg-tint);
  border-top:2px solid var(--border-strong);text-align:left;font-size:12px;
}
table.spec.compare-spec tbody:first-of-type tr.product-row th{border-top:0}
table.spec.compare-spec .p-inner{
  position:sticky;left:10px;display:inline-flex;align-items:center;gap:7px;
}
table.spec.compare-spec .p-name{font-weight:700;color:var(--text)}
table.spec.compare-spec .p-media{font-weight:600;font-size:11px;color:var(--text-muted)}
/* 상품 안의 소구분 행. */
table.spec.compare-spec tr.group-row th{
  padding:5px 10px;background:var(--bg-soft);text-align:left;
  font-weight:700;font-size:11px;color:var(--text-sub);
}
table.spec.compare-spec .g-inner{position:sticky;left:10px;display:inline-block}
/* 비고는 길어 가로 스크롤을 혼자 늘린다 — 이 열만 접는다. 첫 열이면 th 로 그려지므로
   요소를 가리지 않는 선택자를 쓴다. */
table.spec.compare-spec .col-note{white-space:normal;min-width:200px;max-width:340px}

.compare-raw{margin-top:22px}
.compare-raw h3{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:14px}

@media (max-width:1000px){
  .compare-layout{flex-direction:column}
  .compare-picker{width:auto;max-height:34vh;border-right:0;border-bottom:1px solid var(--border)}
}