/* ============================================================
   SONA LIVE AI — 검색어분석 (Search Analysis) 전용 스타일
   ------------------------------------------------------------
   app.css 의 디자인 토큰만 사용한다 (hex 직접 금지).
   모든 셀렉터는 #screen-search 하위 또는 sk- 접두사로 스코프되어
   상품분석·매출종합분석 화면에 영향을 주지 않는다.
   모바일 우선: 기본 1열 → ≥1100px 에서 좌(목록) + 우(인사이트/경쟁사).
   ============================================================ */

/* display 선언이 UA 의 [hidden]{display:none} 을 이기지 않도록 재선언 */
#screen-search{ display:flex; flex-direction:column; gap:16px; margin-top:14px }
#screen-search[hidden]{ display:none }

/* 검색어분석 활성 시 상품분석 전용 서브탭 숨김 */
body.view-search .subtabs, body.view-search .vdiv{ display:none }

/* ---- 상단: 설명 줄 + [좌 카테고리 / 우 기간] ---- */
.sk-lead{ margin:0; font-size:12.5px; color:var(--ink-3) }
.sk-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap;
}
.sk-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-right:auto }   /* 항상 좌측 */
.sk-range{ display:flex; align-items:center; gap:8px; position:relative; margin-left:auto } /* 항상 우측 */

/* 검색어분석 전용 칩 — 상품분석 .chip 과 클래스를 분리해 전역 핸들러 충돌을 막는다. */
.sk-chip{
  padding:6px 13px; border-radius:999px; border:1px solid var(--border);
  font-size:12px; font-weight:500; color:var(--ink-2); background:var(--card);
  min-height:32px; transition:border-color .15s, color .15s, background .15s;
}
.sk-chip:hover{ border-color:var(--pink-line); color:var(--pink-text) }
.sk-chip.on{ background:var(--pink-soft); border-color:var(--pink-line); color:var(--pink-text); font-weight:600 }

.sk-period{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.sk-period::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--pink) }

.sk-cal{
  display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.sk-cal svg{ width:14px; height:14px }
.sk-cal:hover{ border-color:var(--pink-line); color:var(--pink-text) }
.sk-calpop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:190px; padding:8px;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.sk-calpop[hidden]{ display:none }
.sk-calh{ font-size:11px; font-weight:700; color:var(--ink-3); padding:4px 8px 7px }
.sk-calopt{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:9px;
  font-size:12.5px; font-weight:500; color:var(--ink-2);
}
.sk-calopt small{ color:var(--ink-3); font-size:10.5px; font-weight:500 }
.sk-calopt:hover{ background:var(--card-soft) }
.sk-calopt.on{ background:var(--pink-soft); color:var(--pink-text); font-weight:700 }

/* ---- 카드 (app.css .card 와 같은 어휘) ---- */
.sk-card{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
.sk-card-h{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:15px 18px 12px; border-bottom:1px solid var(--border-soft);
}
.sk-card-h h2{ font-size:14.5px; font-weight:700; letter-spacing:-.01em }
.sk-card-h .hint{ font-size:11.5px; color:var(--ink-3) }
.sk-card-h .spacer{ flex:1 }

/* ---- 레이아웃 ---- */
.sk-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start }
.sk-side{ display:flex; flex-direction:column; gap:16px; min-width:0 }
@media (min-width:1100px){
  .sk-grid{ grid-template-columns:minmax(0,1fr) 380px; gap:18px }
}
@media (min-width:1600px){
  .sk-grid{ grid-template-columns:minmax(0,1fr) 420px }
}

/* ============================================================
   키워드 행 — 좌측 TOP20 · 우측 경쟁사 공용
   ============================================================ */
.sk-list{ display:flex; flex-direction:column }
.sk-row{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto auto 44px;
  align-items:center; gap:10px;
  padding:10px 18px; min-height:52px;          /* 스캔 밀도 ↑, 탭 영역은 유지 */
  border-bottom:1px solid var(--border-soft);
  color:inherit; text-decoration:none;
  transition:background .13s;
}
.sk-row:last-child{ border-bottom:0 }
a.sk-row:hover{ background:var(--card-soft) }
a.sk-row:active{ background:color-mix(in srgb, var(--primary) 5%, var(--card)) }

.sk-rank{
  font:700 13px/1 'Sora',sans-serif; color:var(--ink-3);
  text-align:center; font-variant-numeric:tabular-nums;
}
.sk-rank.top{ color:var(--pink-text) }

.sk-kw{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sk-kw b{
  font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.sk-kw i{
  font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.sk-row:hover .sk-kw b{ color:var(--pink-text) }

.sk-cat{
  font-size:11px; color:var(--ink-2); white-space:nowrap;
  padding:3px 9px; border-radius:999px; background:var(--card-soft);
  border:1px solid var(--border-soft);
}

/* 트렌드 칩 — 강세(핑크) / 상승(초록) / 보통(그레이) */
.sk-tr{
  font-size:11px; font-weight:700; white-space:nowrap;
  padding:4px 10px; border-radius:999px; min-width:46px; text-align:center;
}
.sk-tr em{ font-style:normal; margin-left:2px; font-size:10.5px }

/* 등락폭 — 트렌드 배지 옆 작게 */
.sk-dl{
  font:700 11px/1 'Sora',sans-serif; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sk-dl.up{ color:var(--up) }
.sk-dl.down{ color:var(--ink-3) }
.sk-dl.same, .sk-dl.none{ color:var(--ink-3); opacity:.65 }
.sk-tr.hot{ color:var(--pink-text); background:var(--pink-soft); border:1px solid var(--pink-line) }
.sk-tr.up{ color:var(--up); background:color-mix(in srgb, var(--up) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--up) 26%, transparent) }
.sk-tr.flat{ color:var(--ink-3); background:var(--card-soft); border:1px solid var(--border) }

.sk-empty{ padding:26px 18px; text-align:center; font-size:12.5px; color:var(--ink-3) }

/* ---- AI 검색 인사이트 — 기존 AI 카드 어휘 + 한 단계 정제 ---- */
.sk-ai{
  border-color:color-mix(in srgb, var(--primary) 18%, var(--border));
  background:
    radial-gradient(120% 90% at 0% 0%,   color-mix(in srgb, var(--primary) 7%, transparent), transparent 56%),
    radial-gradient(115% 85% at 100% 6%, color-mix(in srgb, var(--s2) 6%, transparent),      transparent 58%),
    var(--card);
}
.sk-ai .sk-card-h{ border-bottom:0; padding-bottom:6px }
.sk-ai h2{ display:flex; align-items:center; gap:8px }
.sk-ai .ai-tag{
  font:700 10px/1 'Sora',sans-serif; color:var(--pink-text);
  background:var(--pink-soft); border-radius:7px; padding:5px 7px;
}
.sk-ai p{
  margin:0; padding:0 18px 18px;
  font-size:13px; line-height:1.75; color:var(--ink-2);
}
.sk-ai p b{ color:var(--ink); font-weight:600 }

/* ---- 초협폭 보정 ---- */
@media (max-width:420px){
  .sk-row{ grid-template-columns:24px minmax(0,1fr) auto 38px; gap:8px; padding:10px 14px }
  .sk-cat{ display:none }                 /* 카테고리 칩은 필터로 대체 — 폭 확보 */
  .sk-card-h{ padding:14px 14px 11px }
  .sk-top{ gap:8px }
  .sk-range{ width:100%; justify-content:flex-end }
  .sk-ai p{ padding:0 14px 16px }
}