/* find-suggest — 랜딩 검색창 추천어 목록 (2026-10-01 신설 · find-suggest.js)
   ⚠ 히어로는 테마와 무관하게 늘 어둡다(landing.css .ld-search 주석) — 테마 변수를 쓰지 않고 어두운 값으로 고정한다.
   ⚠ 글자색 명도비(배경 #0d1528 기준): 본문 #f1f5f9 15:1 · 보조 #a9b7c9 8.6:1(landing.css 안내문과 같은 값) · 시안 태그 #4deeea 12:1. */
/* ⚠ .ld-search 는 backdrop-filter 로 제 쌓임 맥락을 만든다 — z-index 가 없으면 뒤 형제(지표 알약 .ld-stats)가 목록 위에 그려진다(헤드리스 실측) */
.ld-hero-in .ld-search { position: relative; z-index: 3; }
.ld-search .ld-row { position: relative; }   /* 목록의 기준 상자 — 위치는 JS가 입력칸에 맞춰 잰다(폰 세로 배치 대응) */
.ld-sg {
  position: absolute; z-index: 30; max-height: min(60vh, 420px); overflow-y: auto;
  background: #0d1528; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75); padding: 6px 0; text-align: left;
}
.ld-sg[hidden] { display: none; }
.sg-head { padding: 4px 14px 6px; font-size: 12px; font-weight: 700; color: #a9b7c9; letter-spacing: .02em; }
.sg-row {
  display: grid; grid-template-columns: 20px auto 1fr auto; align-items: center; gap: 0 10px;
  padding: 8px 14px; cursor: pointer; color: #f1f5f9; font-size: 14.5px;
}
.sg-row:hover, .sg-row[aria-selected="true"] { background: rgba(77, 238, 234, 0.10); }
.sg-main { font-weight: 500; white-space: nowrap; letter-spacing: .01em; }
.sg-main b { font-weight: 800; }
.sg-alt { color: #a9b7c9; font-weight: 500; font-size: 13px; }
.sg-sub { color: #a9b7c9; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sg-tag { font-size: 12px; font-weight: 700; white-space: nowrap; color: #a9b7c9; }
.sg-live .sg-tag { color: #4deeea; }
/* 줄 머리 아이콘 — 실시간은 기체(삼각형, 히어로 지도와 같은 모양) · 곧 출발은 시계. 글자 아이콘을 쓰지 않는다(이모지 금지 — ui-icons 규칙) */
.sg-ic { width: 16px; height: 16px; justify-self: center; background: #a9b7c9;
  -webkit-mask: var(--sg-ic) center / contain no-repeat; mask: var(--sg-ic) center / contain no-repeat; }
.sg-live .sg-ic { background: #4deeea;
  --sg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l5.5 13L8 11l-5.5 3z'/%3E%3C/svg%3E"); }
.sg-sched .sg-ic {
  --sg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.5V8l2.4 1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width: 640px) {
  /* 폰 — 둘째 줄로 노선·상태를 내린다(한 줄에 다 넣으면 노선이 잘려 보이지 않는다) */
  .sg-row { grid-template-columns: 20px 1fr auto; gap: 2px 10px; font-size: 14px; padding: 8px 12px; }
  .sg-sub { grid-column: 2 / 4; grid-row: 2; }
}