/* header.css */

.site-header {
  width: 100%;
}

.header-container {
  position: relative;
  width: 100%;
  height: 50px;
}

.main-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-nav ul {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 메뉴 링크 */
.main-nav ul li a.menu-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
}

/* 텍스트 기본 보임 */
.menu-text {
  display: inline;
}

/* 아이콘 기본 숨김 */
.menu-icon {
  display: none;
  width: 20px;
  height: 20px;
}

/* 선택된 메뉴: 텍스트 숨김, 아이콘 표시 + 강조 */
.menu-link.selected .menu-text {
  display: none;
}

.menu-link.selected .menu-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  transform: scale(1.05);
}

/* 선택된 메뉴 색상 강조 (선택) */
.menu-link.selected {
  color: #0070f3;
}

/* 현재시간 */
.time-container {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333;
}

#live-status {
  margin-right: 16px;
}

#live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #555;
  vertical-align: middle;
  margin-right: 6px;
}
/* ── 검색 아코디언 기본 숨김/토글 ── */
.search-accordion {
  display: none;           /* 기본 숨김 */
  overflow: hidden;
  background: #1b1b1b;
  color: #fff;
  border-top: 1px solid #333;
  transition: max-height 0.3s ease; /* 펼침 애니메이션 */
  max-height: 0;           /* 펼쳐도 높이가 0 */
}

.search-accordion.expanded {
  display: block;          /* expanded일 때 보이기 */
  max-height: 400px;       /* 필요에 따라 조절 */
}

/* ── 검색 입력창 ── */
.search-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

#search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: #2b2b2b;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.95rem;
}

#search-input::placeholder {
  color: #888;
}

.search-clear {
  margin-left: 8px;
  background: none;
  border: none;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ── 검색 결과 리스트 ── */
.search-results {
  max-height: calc(400px - 52px); /* 총 높이에서 input영역 높이 빼기 */
  overflow-y: auto;
}

.search-results .item {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.search-results .item:last-child {
  border-bottom: none;
}

.search-results .item:hover {
  background: #333;
}

.search-results .item .label {
  font-size: 0.95rem;
}

.search-results .item .meta {
  font-size: 0.85rem;
  color: #aaa;
}

/* 모바일 */
@media (max-width: 480px) {
  .header-container {
    height: 30px;
  }

  .time-container,
  .main-nav {
    display: none;
  }
}


/* ── 검색 버튼 고정 표시 & pill 스타일 ── */
#search-button .menu-icon {
  /* 기본 .menu-icon {display:none;} 을 override */
  display: inline-block !important;
  width: 20px;
  height: 20px;
}

#search-button .menu-text {
  /* 기본 .menu-text 는 inline; 이므로 그대로 노출 */
  display: inline-block !important;
  font-size: 0.9rem;
  color: #333;
}

#search-button .menu-link {
  /* pill 모양 배경 + padding */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 20px;
  transition: background 0.2s;
}

#search-button .menu-link:hover {
  background: #e0e0e0;
}

/* ── 검색 아코디언 (header.css 맨 아래) ── */
.search-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #1b1b1b;
  color: #fff;
  border-top: 1px solid #333;
}

.search-accordion.expanded {
  max-height: 400px; /* 필요에 따라 조절 */
  max-width: 500px;
  margin: auto;
  background-color: #1b1b1b;
}
/* ── 검색 영역 너비 제한 & 중앙 정렬 ── */
.search-accordion {
  padding: 0;               /* 필요에 따라 위아래 패딩만 남기고 좌우 여백 제거 */
}

.search-accordion .search-wrapper,
.search-accordion .search-results {
  max-width: 500px;         /* 원하는 최대 너비로 조절 (예: 500px) */
  margin: 0 auto;           /* 화면 중앙에 배치 */
}
.search-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

#search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: #2b2b2b;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.95rem;
}

#search-input::placeholder {
  color: #888;
}

.search-clear {
  margin-left: 8px;
  background: none;
  border: none;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
}

.search-results {
  max-height: calc(400px - 52px);
  overflow-y: auto;
}

.search-results .item {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.search-results .item:last-child {
  border-bottom: none;
}

.search-results .item:hover {
  background: #333;
}

.search-results .item .label {
  font-size: 0.95rem;
}

.search-results .item .meta {
  font-size: 0.85rem;
  color: #aaa;
}

#search-button {
  margin: auto;
}

/* 조금 더 은은한 그레이 톤 배경 */
.search-accordion {
  background-color: #f7f7f7 !important;    /* 아주 연한 그레이 */
  color: #333;
  border-top: 1px solid #ddd;
}

/* 입력창 배경을 살짝 그레이로 변경 */
#search-input {
  background: #f2f2f2 !important;          /* 연한 회색 */
  border: 1px solid #ccc !important;
  color: #333;
}
#search-input::placeholder {
  color: #888 !important;
}

/* 결과 아이템 배경 톤 다운 */
.search-results .item {
  background: #f2f2f2 !important;
  border-bottom: 1px solid #e6e6e6 !important;
  color: #333;
}
.search-results .item:hover {
  background: #e8e8e8 !important;          /* 호버 시 좀 더 진한 그레이 */
}

/* 클리어 버튼 색상 조정 */
.search-clear {
  color: #555 !important;
}

/* wrapper 배경 제거 (투명 유지) */
.search-wrapper {
  background: transparent !important;
}

/* 검색결과 리스트 */
.search-results .item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.search-results .item:hover {
  background: #f9f9f9;
}
/* 1. 종목코드(고정 너비) */
.search-results .col-code {
  width: 80px;
  flex-shrink: 0;
  font-weight: 500;
  color: #333;
}
/* 2. 종목명(가변 너비) */
.search-results .col-name {
  flex: 1;
  padding: 0 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 3. 타입(고정 너비, 우측 정렬) */
.search-results .col-type {
  width: 60px;
  flex-shrink: 0;
  text-align: right;
  color: #666;
  font-size: 0.9rem;
}
/* ── 검색 토글 버튼 ── */
.search-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.search-filters .filter-btn {
  flex: 1;
  padding: 6px 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: #555;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.search-filters .filter-btn.active {
  color: #333d4b;
  border-bottom-color: #333d4b;
  font-weight: 600;
}
/* = header.css (또는 공통 CSS) 맨 아래에 추가 = */

/* 1) 검색 전용 오버레이 */
#search-overlay {
  /* 기존 modal-overlay 속성 재활용 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
  /* z-index는 검색창 바로 아래 */
  z-index: 999 !important;
}
#search-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

/* 2) 검색 아코디언(=검색창) */
#search-accordion {
  position: relative;         /* z-index 적용을 위해 */
  z-index: 1001 !important;   /* 오버레이(1000) 위에 */
}

/* header.css */
/* …기존 스타일 그대로 유지… */

/* ── 검색 결과 컬럼 ── */
.search-results .item .col-code {
  width: 80px;
  flex-shrink: 0;
  font-weight: 500;
  color: #333;
}
.search-results .item .col-name {
  flex: 1;
  padding: 0 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-results .item .col-type {
  width: 60px;
  flex-shrink: 0;
  text-align: right;
  color: #666;
  font-size: 0.9rem;
}

/* ── 매칭된 텍스트 하이라이트 ── */
.search-results .item .highlight {
  color: #0070f3;
}

/* 기본: 데스크톱에서는 숨김 */
.mobile-home-btn { display: none; }

/* 모바일에서 보여주기 */
@media (max-width: 768px) {
  .header-container { position: relative; }

  /* 시간 영역은 모바일에서 숨김(오른쪽 끝 자리를 아이콘에 양보) */
  .time-container { display: none; }

  .mobile-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;      /* 터치 타겟 확보 */
    height: 40px;
    border-radius: 8px;
  }

  .mobile-home-btn img {
    width: 50px;
    height: 50px;
    display: block;
  }
}


/* 전역: 모바일에서 가로 스크롤 금지(안전망) */
html, body { overflow-x: hidden; }

/* 검색 아코디언: 중복 정의 정리 + 폭 100% 보장 */
.search-accordion {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f7f7f7;            /* 최종 톤으로 통일 */
  color: #333;
  border-top: 1px solid #ddd;
  width: 100%;                     /* ← 폭 100% 고정 */
}

.search-accordion.expanded {
  display: block;
  max-height: 400px;
  /* max-width: 500px;  ← 이거 제거! 부모를 500px로 줄이면 내부 패딩 합쳐서 넘침 */
  margin: 0 auto;
}

/* 내부 컨텐트는 "상자 내부에서" 500px로 제한 + 패딩 포함 계산 */
.search-accordion .search-wrapper,
.search-accordion .search-results {
  width: 100%;
  max-width: 500px;                /* 컨텐트 최대폭만 제한 */
  margin: 0 auto;
  box-sizing: border-box;          /* 패딩이 폭을 밀어내지 않게 */
}

/* 패딩을 살짝 줄이거나(특히 초소형 화면에서) */
.search-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 12px;               /* 기존 16px → 12px */
  box-sizing: border-box;
}

.search-results {
  max-height: calc(400px - 52px);
  overflow-y: auto;
  padding: 0 12px;                 /* 좌우 패딩이 필요하다면 box-sizing과 함께 */
  box-sizing: border-box;
}

/* 컬럼 폭 고정값은 유지하되, 너무 작은 화면에서 터지지 않게 최소 축소 허용 */
@media (max-width: 360px) {
  .search-results .col-code { width: 68px; }
  .search-results .col-type { width: 52px; font-size: 0.85rem; }
}

/* 오버레이/레이어 인덱스는 그대로 */
#search-overlay { z-index: 999 !important; }
#search-accordion { position: relative; z-index: 1001 !important; }

body.search-open {
  overflow: hidden;           /* x,y 둘 다 잠금 */
  touch-action: none;         /* iOS에서 스크롤 튀는 경우 방지 */
}

/* iOS 사파리 인풋 포커스 자동 줌 방지 */
@media (max-width: 768px) {
  /* 검색 입력, 셀렉트, 텍스트에어리어 모두 16px 보장 */
  .search-wrapper input,
  .search-wrapper select,
  .search-wrapper textarea {
    font-size: 16px !important;     /* 핵심 */
    line-height: 1.2;
  }
}

/* 혹시 iOS 전용 최적화가 필요하면 */
@supports (-webkit-touch-callout: none) {
  .search-wrapper input,
  .search-wrapper select,
  .search-wrapper textarea {
    font-size: 16px !important;
  }
}

/* 가로스크롤 안전망 (이미 했다면 중복 OK) */
html, body { overflow-x: hidden; }

/* 검색 컨테이너는 폭 100% + 패딩 포함 계산 */
.search-accordion,
.search-accordion .search-wrapper,
.search-accordion .search-results {
  width: 100%;
  box-sizing: border-box;
}

.mobile-home-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
}