/* /works 전용 스코프 CSS — subpages-a.css/theme.css 는 건드리지 않는다.
   목적: (1) 대표 제품 상세로 바로 들어가는 링크 블록(wk-detail-links) 스타일
        (2) 라이브 베타 도구 안심 문구(wk-reassure) 스타일
        (3) market.html 과 동일한 pa-product-card 그리드를 works 안에서만 시각적으로 구분
   전부 .pa-works 조상 셀렉터로 스코프해 market.html(.pa-market)에는 영향이 없다. */

/* 카드 상단 컬러 강조바는 쓰지 않는다(SKILL §2-7 — AI 생성 UI 클리셰).
   제품 카드는 카드 자체의 테두리·여백으로 충분히 구분된다. */

.pa-works .wk-detail-label {
  margin: 18px 0 8px;
  color: var(--pa-orange-dark, #ff4715);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pa-works .wk-detail-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  /* 카드(테두리) 안의 박스라 테두리를 또 그리면 이중 보더가 된다.
     면(배경)만으로 구분한다. */
  border-radius: 8px;
  background: var(--pa-paper, #f6f6f4);
}

.pa-works .wk-detail-links li { margin: 0; }

.pa-works .wk-detail-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pa-ink, #15171c);
  font-size: 14px;
  font-weight: 750;
}

.pa-works .wk-detail-links a::before {
  content: "\2192";
  color: var(--pa-orange-dark, #ff4715);
  font-weight: 900;
}

.pa-works .wk-detail-links a:hover { text-decoration: underline; }

.pa-works .wk-reassure {
  margin: 10px 0 0;
  color: var(--pa-faint, #626d7a);
  font-size: 13px;
}