/* ==========================================================================
   Blog — 키워드 검색 + 카테고리 필터

   대상은 본문 그리드 한 곳입니다.
     .blog-item-collection-list.blog-cards-row
   같은 페이지의 상단 피처드 리스트도 .blog-item-collection-list 를 쓰지만
   .blog-cards-row 가 없어 선택자에서 제외됩니다. (필터 대상 아님)

   토큰 매핑 (raw hex 없음 — CLAUDE.md §1.2)
     검색창 배경  #F2F2F2 -> --_colors---primitive--brand--100
     pill radius  32px    -> --redius--redius-2xl   (높이 64px 에서 완전한 pill)
     placeholder  #B9BABA -> --_colors---button--disabled-bg
     아이콘/글자  #0A0A0A -> --_colors---text--title-dark
     활성 버튼글자 #FFFFFF -> --_colors---text--title-white
     좌우 패딩    32px    -> --spacers--spacer-main
     글자 크기    20px    -> --_typography---font-sizes--paragraph-1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 검색창 — .article_search_content 안에 JS가 주입합니다
   -------------------------------------------------------------------------- */

.blog-search {
  display: flex;
  align-items: center;
  column-gap: var(--spacers--spacer-xsm); /* 16px */
  width: 100%;
  min-height: 4rem; /* 64px */
  padding-left: var(--spacers--spacer-main);  /* 32px */
  padding-right: var(--spacers--spacer-main);
  border-radius: var(--redius--redius-2xl);   /* 32px */
  background-color: var(--_colors---primitive--brand--100);
  transition: box-shadow .2s;
}

/* 입력 중임을 알리는 최소한의 표시 — Figma 시안에 포커스 상태가 없어 보완했습니다. */
.blog-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--_colors---text--title-dark);
}

.blog-search-icon {
  flex: none;
  width: 1.5rem;  /* 24px */
  height: 1.5rem;
  color: var(--_colors---text--title-dark);
}

.blog-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #0000;
  font-family: var(--_typography---font-family--body-font-family);
  font-size: var(--_typography---font-sizes--paragraph-1); /* 20px */
  line-height: 1.5;
  color: var(--_colors---text--title-dark);
  appearance: none;
}

.blog-search-input:focus {
  outline: none;
}

.blog-search-input::placeholder {
  color: var(--_colors---button--disabled-bg); /* #B9BABA */
}

/* 브라우저 기본 검색 지우기 UI 제거 — 자체 버튼을 씁니다 */
.blog-search-input::-webkit-search-cancel-button,
.blog-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.blog-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;   /* 32px */
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--redius--redius-full);
  background-color: #0000;
  color: var(--_colors---button--disabled-bg);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}

.blog-search-clear:hover {
  background-color: var(--_colors---primitive--brand--300);
  color: var(--_colors---text--title-dark);
}

.blog-search-clear[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   2. 카테고리 버튼 활성 상태

   Designer 클래스(.primary-button / .white-button.is-border)는 건드리지 않고
   aria-pressed 로만 상태를 표시합니다. 클래스를 서로 바꿔치기하면
   Designer 스타일과 엉키기 때문입니다. 접근성도 같이 챙겨집니다.
   -------------------------------------------------------------------------- */

.cate_list_content a[aria-pressed] {
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.cate_list_content a[aria-pressed="false"] {
  border: 1px solid var(--_colors---button--disabled-bg);
  background-color: #0000;
  background-image: none;
  color: var(--_colors---text--title-dark);
}

.cate_list_content a[aria-pressed="true"] {
  border: 1px solid var(--_colors---text--title-dark);
  background-color: var(--_colors---text--title-dark);
  background-image: none;
  color: var(--_colors---text--title-white);
}

/* 버튼 안쪽 래퍼(.button-text-block 등)가 자체 색을 갖고 있어 상속시킵니다 */
.cate_list_content a[aria-pressed] * {
  color: inherit;
  background-color: #0000;
}

.cate_list_content a[aria-pressed="false"]:hover {
  border-color: var(--_colors---text--title-dark);
}

.cate_list_content a[aria-pressed]:focus-visible {
  outline: 2px solid var(--_colors---text--title-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. 결과 없음 — 원본에 .w-dyn-empty 가 없어 JS가 만들어 넣습니다
   -------------------------------------------------------------------------- */

.blog-filter-empty {
  width: 100%;
  padding-top: var(--spacers--spacer-3xl);    /* 80px */
  padding-bottom: var(--spacers--spacer-3xl);
  text-align: center;
  font-family: var(--_typography---font-family--body-font-family);
  font-size: var(--_typography---font-sizes--paragraph-1);
  line-height: 1.5;
  color: var(--_colors---text--body-dark);
}

.blog-filter-empty[hidden] {
  display: none;
}

/* 필터로 숨긴 카드 */
.blog-item-collection[data-blog-filtered="hidden"] {
  display: none;
}

/* --------------------------------------------------------------------------
   4. 반응형 — 991 / 767 / 479 (CLAUDE.md §6.5)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .blog-search {
    min-height: 3.5rem; /* 56px */
    padding-left: var(--spacers--spacer-sm);  /* 24px */
    padding-right: var(--spacers--spacer-sm);
    column-gap: var(--spacers--spacer-2xs);   /* 12px */
  }

  .blog-search-input {
    font-size: var(--_typography---font-sizes--paragraph-2); /* 16px */
  }

  .blog-filter-empty {
    padding-top: var(--spacers--spacer-2xl);
    padding-bottom: var(--spacers--spacer-2xl);
    font-size: var(--_typography---font-sizes--paragraph-2);
  }
}

@media screen and (max-width: 479px) {
  .blog-search {
    min-height: 3rem; /* 48px */
    padding-left: var(--spacers--spacer-xsm); /* 16px */
    padding-right: var(--spacers--spacer-xsm);
  }

  .blog-search-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Work cards: the code embed follows the slash, so :last-child cannot select it.
   Hide only the separator paragraph in the final category of each card.
   A single category retains its label; separators between categories remain.
*/
.case-study-card-content-block .details-hero-button-block .collection-list > .w-dyn-item:last-child > p.text-size-small:nth-of-type(2) {
  display: none;
}