/* ======================================
   50mm Q&A - Search Input Fix
   - Mobile: reduce font-size, prevent "vertical-looking" text by keeping it single line with ellipsis.
   - Desktop: make search input 30% width.
   ====================================== */

/* Base search form normalization */
.qna-search {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}

/* Input base */
.qna-search .form-control[type="search"],
.qna-search input[type="search"] {
  min-height: 44px;
  line-height: 1.25;
  letter-spacing: 0;
  width: 100%;
  /* Ensure single-line readability */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile first: moderate font size so long terms don't look "vertical" */
@media (max-width: 576px){
  .qna-search .form-control[type="search"],
  .qna-search input[type="search"] {
    font-size: clamp(9px, 1.8vw, 11px); /* ✅ 기존보다 약 40~50% 작게 */
    padding: .45rem .6rem;             /* 세로 패딩도 조금 줄임 */
  }
  .qna-search button, .qna-search .btn {
    padding: .45rem .65rem;
    font-size: clamp(11px, 2vw, 13px); /* 버튼 글씨도 동일하게 */
  }
}


/* Tablet (optional): keep full width */
@media (min-width: 577px) and (max-width: 991.98px){
  .qna-search .form-control[type="search"],
  .qna-search input[type="search"] {
    font-size: clamp(14px, 1.1vw + .6rem, 16px);
  }
}

/* Desktop: shrink input to 30% width; keep button natural width */
@media (min-width: 992px){
  .qna-search .form-control[type="search"],
  .qna-search input[type="search"] {
    flex: 0 0 30%;
    max-width: 30%;
    font-size: 16px;
  }
  .qna-search .btn {
    flex: 0 0 auto;
  }
}

/* Placeholder size alignment */
.qna-search .form-control::placeholder,
.qna-search input::placeholder {
  opacity: .7;
}

/* Avoid unexpected vertical text via transforms from theme */
.qna-search .form-control,
.qna-search input[type="search"] {
  writing-mode: horizontal-tb;
}