/* ===========================
   Header Styles (Front/header.css)
   =========================== */

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.logo {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
}

.logo a {
  text-decoration: none;
  color: inherit;
}

.logo-brand {
  font-size: 1.6rem;
  font-weight: 700; /* 메인 로고는 굵게 */
  color: rgba(0, 0, 0, 0.75);
  line-height: 1;
}

/* 작은 글씨 */
.logo-roman {
  font-size: 0.75rem;
  margin-left: 0.3rem;
  padding-bottom: 1px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
}

.logo-korean {
  font-size: 0.7rem;
  margin-left: 0.2rem;
  padding-bottom: 1px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
}

.search-icon {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding-right: 10px;
}

@media (max-width: 600px) {
  .search-icon {
    font-size: 1rem;
    padding-right: 10px;
  }

  .logo-brand {
    font-size: 1.2rem;
  }
}
/* ===========================
   ✨ Header Search (moved from styles.css)
   =========================== */
#search-bar {
  position: fixed;
  top: var(--header-h, 56px);   /* ✅ 헤더 높이와 동기화 */
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10050;               /* ✅ 오버레이(예: 9999)보다 위 */
  padding: 15px 20px 5px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  margin-bottom: 36px;
}

#search-bar.hidden { display: none; }

.search-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

#search-input {
  width: 100%;
  padding: 10px 36px 10px 10px;
  font-size: 0.8rem;
  border: 0.8px solid #ccc;
  border-radius: 2px;
  height: 32px;
  box-sizing: border-box;
}
#search-input:focus {
  outline: 1px solid #ccc;
  outline-offset: 0;
  border-color: #ccc;
}

.clear-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: #999;
  cursor: pointer;
  display: none;
  line-height: 1;
}

#search-results {
  width: 100%;
  background-color: rgba(255,255,255,0.95);
  z-index: 10040;
  padding: 10px 5px 10px;
  margin-top: 17px;
  margin-bottom: 10px;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(1, 130px);
  gap: 8px;
}

.search-results-images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  max-height: 410px;
  overflow-y: auto;
  padding: 3px;
}

.recommend-item {
  padding: 6px 8px;
  font-size: 0.6rem;
  line-height: 0.3;
  border-radius: 4px;
  text-align: left;
  color: #999;
  font-weight: 500;
  cursor: pointer;
}
.recommend-item:hover {
  background-color: transparent;
  color: #000;
}
.recommend-item.highlighted {
  background-color: #fff;
  color: #000;
}

.search-card {
  background-color: transparent;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: none;
  padding: 16px 0 10px 0;
}
.search-card:hover { background-color: transparent; }

.search-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
}

.card-title {
  text-align: left;
  font-size: 0.6rem;
  color: #999;
  margin-top: 6px;
}
.search-card:hover .card-title,
.search-card.highlighted .card-title { color: #000; }


/* ===== Mobile (<=600px): 원래 느낌 유지 + 2열만 적용 ===== */
@media (max-width: 600px) {
  /* iOS 확대 방지(필수) + 시각 크기는 기존과 비슷하게 */
  #search-input{
    font-size: 16px;        /* 확대 방지 */
    line-height: 1.2;
    height: 36px;           /* 기존 느낌을 위해 살짝 낮춤 */
    padding: 8px 36px 8px 10px;
    border-radius: 1px;     /* 기존과 동일하게 각짐 유지 */
    border: 0.7px solid #ccc;
    background: #fff;
  }

  /* 추천 박스: 배경/그림자 거의 그대로(투명 느낌 유지) */
  #search-results{
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 8px 4px;
    background: rgba(255,255,255,0.95); /* 기존과 거의 동일 */
    box-shadow: none;                    /* 앱 느낌 X, 웹 느낌 유지 */
    border: none;
  }

  /* 핵심: 2열만 적용. 나머지 시각 스타일은 상단 기본값 그대로 상속 */
  .search-results-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr)); /* 👉 2열 */
    gap: 8px; /* 기존 gap 그대로 */
  }

  /* 이미지 결과도 2열만, 라운드/테두리 없음 유지 */
  .search-results-images{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 410px;   /* 기존 값 유지 */
    overflow-y: auto;
    padding: 3px;        /* 기존 값 유지 */
  }
  .search-image{
    width: 100%;
    height: auto;        /* 원래처럼 비율 자유 */
    object-fit: cover;
    border-radius: 0;    /* 라운드 없음 유지 */
    border: 0;           /* 테두리 없음 유지 */
  }

  /* 카드/텍스트도 기존처럼 거의 투명/미니멀 */
  .search-card{
    background: transparent;
    border-radius: 0;
    border: 0;
    padding: 16px 0 10px 0;  /* 기존 그대로 */
  }
  .card-title{
    font-size: 0.6rem;   /* 기존 그대로 */
    color: #999;
    margin-top: 6px;
  }

  /* 추천 리스트(텍스트)도 기존 톤 유지 */
  .recommend-item{
    padding: 6px 8px;    /* 기존 */
    font-size: 0.6rem;   /* 기존 */
    line-height: 1.2;    /* 읽기성만 살짝 */
    border-radius: 4px;  /* 기존 */
    background: transparent;
    border: 0;
    color: #999;
  }
}

  /* Backdrop: 검색창 열렸을 때 바깥 클릭 흡수 (결과보다 아래) */
  #search-backdrop{
    position: fixed;
    top: var(--header-h, 56px);
    left: 0; right: 0; bottom: 0;
    z-index: 10030;           /* results(10040) < bar(10050) 구조와 맞춤 */
    background: transparent;
    display: none;
  }
  #search-backdrop.show{ display:block; }