/*
 Theme Name: Salient Child
 Template: salient
 Text Domain: salient-child
 Version: 1.0.0
*/

/* = Project Attribute Pills (clean)
-------------------------------------------- */

/* 컨테이너 기본 */
.pf-attr-list{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .4rem;
  margin-top:.35rem;
  font-size:12.5px;
  line-height:1;
}

/* pill 공통 */
.pf-attr{
  display:inline-block;
  padding:.4rem .6rem;
  border-radius:9999px;
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s ease;
}

/* --- 스타일 변형: 컨테이너 modifier (출력: pf-attr-list pf-attr-pill) --- */

/* pill */
.pf-attr-list.pf-attr-pill .pf-attr{
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.78);
}
.pf-attr-list.pf-attr-pill .pf-attr:hover{
  background:rgba(0,0,0,.12);
}

/* tag */
.pf-attr-list.pf-attr-tag .pf-attr{
  background:transparent;
  border:1px solid rgba(0,0,0,.18);
  color:rgba(0,0,0,.78);
  padding:.35rem .55rem; /* tag는 살짝 얇게 */
}
.pf-attr-list.pf-attr-tag .pf-attr:hover{
  border-color:rgba(0,0,0,.32);
}

/* button */
.pf-attr-list.pf-attr-button .pf-attr{
  border:0;
  background:var(--nectar-accent-color, #5b6cff);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.pf-attr-list.pf-attr-button .pf-attr:hover{
  filter:brightness(1.05);
}

/* 다크모드 가독성(선택) */
@media (prefers-color-scheme: dark){
  .pf-attr-list.pf-attr-pill .pf-attr{background:rgba(255,255,255,.08); color:rgba(255,255,255,.9)}
  .pf-attr-list.pf-attr-pill .pf-attr:hover{background:rgba(255,255,255,.14)}
  .pf-attr-list.pf-attr-tag .pf-attr{border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.9)}
  .pf-attr-list.pf-attr-tag .pf-attr:hover{border-color:rgba(255,255,255,.4)}
}

/* (선택) Salient 포트폴리오 카드에만 적용하고 싶으면 아래 스코프 추가
.portfolio-items .pf-attr-list{ ... } 와 같이 위 블록들을 감싸도 됨 */