/* 홈 검색만 꾸미며 색과 글꼴은 기존 사이트 토큰을 따른다. */
.entry-content .cc-home-search {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 32px;
  font-family: var(--cc-font-sans);
}

.cc-home-search__label {
  color: var(--cc-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.cc-home-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 12px;
}

.cc-home-search__field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md, 8px);
  background: var(--cc-bg-primary);
}

.entry-content .cc-home-search__field img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.cc-home-search__field:focus-within {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.entry-content .cc-home-search__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--cc-text-primary);
  font: inherit;
  font-size: 16px;
  line-height: 26px;
}

.cc-home-search__input::placeholder {
  color: var(--cc-text-secondary);
  opacity: 1;
}

.entry-content .cc-home-search__button {
  box-sizing: border-box;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--cc-radius-md, 8px);
  background: var(--cc-accent);
  color: var(--cc-btn-text, #fff);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

.cc-home-search__button:hover {
  background: var(--cc-accent-hover);
}

.cc-home-search__button:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

.entry-content .cc-home-search__help {
  margin: 0;
  color: var(--cc-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 767px) {
  /* 기존 본문 여백은 유지하고 검색에만 시안의 좌우 20px 여백을 적용한다. */
  .entry-content .cc-home-search {
    width: calc(100% + 20px);
    max-width: calc(100vw - 40px);
    margin-left: -10px;
    margin-right: -10px;
  }

  .cc-home-search__row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
}