.browse{display:flex;flex-direction:column;height:100%;min-height:0}
.browse-row{display:flex;flex:1;min-height:0}
.browse-tree{
  width:288px;flex-shrink:0;overflow-y:auto;padding:12px 10px;
  background:var(--bg);border-right:1px solid var(--border);
}
.tree-group{margin-bottom:10px}
.tree-head{
  display:flex;align-items:center;gap:7px;padding:6px 8px;
  font-weight:700;font-size:12px;color:var(--text-sub);
}
.tree-head .logo-chip{width:16px;height:16px;font-size:9px}
.tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-count{
  margin-left:auto;padding:1px 7px;border-radius:999px;
  background:var(--bg-tint);font-size:10.5px;color:var(--text-muted);
}
.tree-list{margin:0;padding:0;list-style:none}
.tree-item{
  display:block;width:100%;padding:6px 10px;border:0;border-radius:6px;
  background:none;color:var(--text);font:13px/1.35 inherit;text-align:left;cursor:pointer;
}
.tree-item:hover{background:var(--bg-tint)}
.tree-item[aria-current="true"]{background:var(--accent-bg);color:var(--primary);font-weight:600}

/* 특정 매체를 고르면 그 매체의 모든 상품 카드가 여기 나열되고 스크롤로 넘어간다 —
   "전체" 필터에서는 카드 1개(또는 안내문)만 들어간다. */
.browse-list{flex:1;min-width:0;overflow-y:auto;padding:18px 22px}

/* 매체 헤더 — 허브 <h2>(매체명 + 공식 가이드 링크)에 대응. 페이지 배경(--bg-soft)에
   바로 얹지 않고 흰 카드로 감싼다 — 카드 아래 상품 카드들과 같은 무게감을 준다.
   왼쪽 색상 띠는 매체 브랜드 컬러(browse.js 의 mediaAccent, 목업 렌더러의 PLATFORMS 와
   같은 팔레트)를 --media-accent 커스텀 프로퍼티로 받는다. */
.media-head{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:14px 18px;
  background:var(--bg);border:1px solid var(--border);
  border-left:4px solid var(--media-accent, var(--primary));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.media-head h2{margin:0;font-size:17px}
.media-head .guide-link{margin-left:auto;font-size:12.5px;color:var(--primary);text-decoration:none;white-space:nowrap}
.media-head .guide-link:hover{text-decoration:underline}

.product-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);
  border-left:4px solid var(--primary);box-shadow:var(--shadow-sm);
  margin-bottom:16px;padding:16px 18px;
}
.product-card:last-child{margin-bottom:0}

.detail-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.detail-head h2{margin:0;font-size:16px;flex:1;min-width:160px}
.card-toggle{
  flex-shrink:0;width:22px;height:22px;padding:0;border:0;background:none;
  color:var(--text-muted);font-size:11px;cursor:pointer;
}
.card-toggle::before{content:"▼"}
.product-card.collapsed .card-toggle::before{content:"▶"}
.detail-note{margin:0;flex-basis:100%;font-size:12.5px;color:var(--text-sub)}
.detail-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{
  padding:2px 8px;border-radius:999px;background:var(--bg-tint);
  font-size:11px;color:var(--text-sub);border:0;
}
.tag.suspect{background:var(--warn-bg);color:var(--warn);cursor:pointer}

/* 허브처럼 PSD/CPT/Motion/매체가이드 링크를 카드 헤더 우측에 둔다. */
.card-links{display:flex;gap:6px;flex-wrap:wrap}
.card-links .btn.psd{border-color:var(--primary);color:var(--primary)}

.product-card.collapsed .card-body{display:none}

.detail-body{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.detail-mockup-col{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.detail-mockup{
  position:relative;padding:10px;background:var(--bg-soft);cursor:zoom-in;
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
/* 허브 .zoom-trigger 와 같은 우상단 "🔎 확대" 배지 — 마우스를 올렸을 때만 보인다(평소엔 이미지를 가리지 않게).
   카드가 다시 그려지며 내용을 비워도 남도록 data 속성 + ::after 로 그린다(클릭은 .detail-mockup 전체가 받는다). */
.detail-mockup::after{
  content:attr(data-zoom-label);position:absolute;top:20px;right:20px;z-index:2;pointer-events:none;
  background:rgba(15,23,42,0.78);color:#fff;padding:5px 9px;border-radius:4px;
  font-size:10.5px;font-weight:600;line-height:1.2;opacity:0;transition:opacity .15s;
}
.detail-mockup:hover::after{opacity:1}
/* 세이프존 좌표(퍼센트)의 기준 박스 — .detail-mockup 자체는 패딩이 있어
   기준으로 쓰면 좌표가 그 패딩만큼 어긋난다(js/browse.js 참고). */
.detail-mockup-inner{position:relative;width:100%}
.detail-mockup-inner svg{width:100%;height:auto;display:block}
/* 확대 드로어에서 저장한 세이프존을 썸네일 위에 겹쳐 보여준다 — 드래그/핸들은
   없지만, 확대 드로어의 조정 모드 OFF 상태와 같은 펄스(zone-box.css의
   @keyframes zonePulse)를 그대로 써서 눈에 띄게 한다. 라운드는 js가 짧은 변
   기준 px로 환산해 인라인으로 준다(zone-box.js의 radiusPx()와 같은 이유). */
.card-zone-outline{
  position:absolute;border:2px solid var(--primary);background:rgba(27,111,183,0);
  box-sizing:border-box;pointer-events:none;
  animation:zonePulse 2s ease-in-out infinite;
}
.card-zone-outline.with-creative{overflow:hidden} /* 소재가 있어도 기본 영역과 같은 파란 테두리·펄스(box-shadow 는 overflow 에 잘리지 않는다) */
.card-zone-outline.with-creative img{width:100%;height:100%;object-fit:cover;display:block}
/* 허브 .mockup-slot .caption 대응 — 목업 아래 사이즈 요약 한 줄. */
.mockup-caption{font-size:11.5px;color:var(--text-sub);text-align:center;margin-top:6px;line-height:1.5}
.mockup-loading{padding:60px 0;text-align:center;color:var(--text-muted)}
.mockup-error{padding:24px 0;text-align:center;color:var(--warn);font-size:12.5px}
.detail-spec{flex:1;min-width:320px}

/* "상품 세부 구성" — 34개 레거시 상품 + 스펙 표에서 자동 생성된 new-* 상품 대부분. */
.detail-assets{width:220px;flex-shrink:0}
.detail-head-label{margin-bottom:8px;font-size:12px;font-weight:700;color:var(--text-sub)}
.detail-stack{display:flex;flex-direction:column;gap:10px}
.asset-card{
  padding:9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
}
.asset-swatch{
  display:flex;align-items:center;justify-content:center;width:100%;max-height:70px;
  margin-bottom:6px;border:1px solid var(--border-strong);border-radius:4px;
  font-size:10.5px;font-weight:700;color:var(--text);
}
.asset-name{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.asset-tag{
  padding:1px 6px;border-radius:999px;font-size:9.5px;font-weight:700;flex-shrink:0;
  background:var(--bg-tint);color:var(--text-sub);
}
.asset-tag.req{background:#FEE2E2;color:#B91C1C}
.asset-tag.psd{background:#F3E8FF;color:#6B21A8}
.asset-size{margin-top:3px;font-size:11px;color:var(--text-sub)}
.asset-meta{margin-top:2px;font-size:10.5px;color:var(--text-muted)}

/* Good/Bad case — 마찬가지로 34개 레거시 상품에만 있다. */
/* 허브와 동일한 디자인 — 박스 전체를 tint 배경으로 칠하지 않고 흰 배경 + 헤더
   밑줄로만 good/bad 를 구분하며, 목록 항목은 ✓/✗ 를 글머리표로 쓴다. */
.detail-cases{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;
  font-size:11.5px;line-height:1.55;
}
.case h5{
  margin:0 0 8px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.case.good h5{color:var(--success)}
.case.bad h5{color:var(--warn)}
.case ul{list-style:none;margin:0;padding:0}
.case li{padding:2px 0 2px 14px;position:relative;color:var(--text-sub)}
.case.good li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.case.bad li::before{content:"✗";position:absolute;left:0;color:var(--warn);font-weight:700}

@media (max-width:1300px){
  .detail-cases{grid-template-columns:1fr}
}

.key-specs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.key-specs .kc{
  min-width:150px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg);
}
.key-specs .kc .lbl{
  font-size:10.5px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.3px;font-weight:600;margin-bottom:2px;
}
.key-specs .kc .v{
  font-size:13px;font-weight:700;color:var(--text);
  font-family:"SF Mono",Consolas,monospace;
}
.detail-source{margin-top:10px;font-size:11.5px;color:var(--text-muted)}

.spec-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg)}
table.spec{width:100%;border-collapse:collapse;font-size:12.5px}
table.spec th,table.spec td{
  padding:7px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;
  white-space:nowrap;
}
table.spec thead th{
  background:var(--bg-soft);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--text-muted);
}
table.spec tbody tr:last-child td{border-bottom:0}
table.spec tr.group td{background:var(--bg-tint);font-weight:600;color:var(--text-sub)}
/* 허브와 같은 색 — 사이즈는 굵은 모노스페이스, 용량은 은은한 배경 위 파란 글자,
   형식 토큰은 보라 pill, 경고성 표현(투명 불가 등)만 빨간 pill 로 구분한다. */
table.spec td.size{font-family:"SF Mono",Consolas,monospace;font-size:12px;font-weight:600;color:var(--text)}
table.spec td.num{font-family:"SF Mono",Consolas,monospace;font-size:11.5px;background:var(--bg-soft);color:var(--primary);font-weight:600}
table.spec td .pill{
  display:inline-block;padding:1px 7px;border-radius:9px;font-size:10.5px;font-weight:500;
  background:var(--bg-tint);color:var(--text-sub);margin:1px 2px 1px 0;
}
table.spec td .pill.fmt{background:#F5F3FF;color:#6B2BD9}
table.spec td .pill.fmt.warn{background:#FEF2F2;color:var(--warn)}
.raw-badge{
  display:inline-block;margin:12px 0 6px;padding:2px 9px;border-radius:999px;
  background:var(--info-bg);color:var(--info);font-size:11px;font-weight:700;
}
table.spec.raw td{white-space:normal}

@media (max-width:1000px){
  .browse-row{flex-direction:column}
  .browse-tree{width:auto;max-height:34vh;border-right:0;border-bottom:1px solid var(--border)}
  .detail-mockup-col,.detail-assets{width:auto}
}