/* 트렌드 탭 공용 컨트롤 — 도구막대 · 세그먼트(segmented.js) · 메뉴 셀렉트(menuSelect.js) · 날짜 스텝퍼(dateStepper.js) · 팝오버(popover.js).
 * 두 셸 공용(토큰만 쓴다 — 색·반경·간격 하드코딩 0). 새 셸 전용 손질은 v2/trends.css.
 * 선택 상태는 한 가지로 통일한다: 트랙(--surface-1) 위에 떠오른 칸(--surface-3) + 잉크 글자. 파랑(--accent)은 포커스 링에만.
 * 팝오버는 불투명 표면이다 — 트레이(글라스) 안에서도 열리므로 재질을 얹으면 glass-on-glass 가 된다(liquidGlassLayer.test.mjs ②). */

/* ── 도구막대 ── */
.trend-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-sm) var(--sp-lg); flex-wrap: wrap; }
.trend-toolbar-controls { display: flex; align-items: flex-end; gap: var(--sp-sm) var(--sp-md); flex-wrap: wrap; min-width: 0; }
.trend-toolbar-meta { display: flex; align-items: center; gap: var(--sp-sm); margin-left: auto; font-size: var(--fs-fine); color: var(--ink-48); min-height: 36px; }
.trend-notice { margin: 0; font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-48); }

/* ── 컨트롤 공통: 라벨이 위에, 컨트롤이 아래 ── */
.ctl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctl-label { font-size: var(--fs-fine); line-height: 1; color: var(--ink-48); font-weight: 500; padding-left: 2px; }

/* ── 세그먼트 ── */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-1); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-opt {
  flex: none; appearance: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-48);
  transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) { .seg-opt:hover { color: var(--ink); } }
.seg-opt.on { background: var(--surface-3); color: var(--ink); }
.seg-opt:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }

/* ── 팝오버 ── */
.pop-anchor { position: relative; display: inline-flex; min-width: 0; }
.pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  background: var(--parchment); border: 1px solid var(--divider-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-float, var(--shadow-product)); padding: 6px;
  animation: pop-in .16s cubic-bezier(.2, .8, .2, 1) backwards; /* backwards — both 면 끝난 뒤에도 transform 을 들고 있다(backdrop root 함정) */
  transform-origin: top left;
}
.pop[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } .seg-opt { transition: none; } }

/* ── 메뉴 셀렉트 ── */
.msel-trigger, .dstep-trigger {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--surface-1);
  font: inherit; font-size: var(--fs-caption); font-weight: 500; color: var(--ink); max-width: min(320px, 100%);
  transition: background-color .18s ease;
}
.msel-trigger:hover, .dstep-trigger:hover, .msel-trigger[aria-expanded="true"], .dstep-trigger[aria-expanded="true"] { background: var(--surface-2); }
.msel-trigger:focus-visible, .dstep-trigger:focus-visible, .dstep-nav:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }
.msel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-caret { flex: none; color: var(--ink-48); transition: transform .18s ease; }
[aria-expanded="true"] > .msel-caret { transform: rotate(180deg); }
.msel-pop { width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; }
.msel-search {
  appearance: none; width: 100%; height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); font: inherit; font-size: var(--fs-caption);
}
.msel-search:focus { outline: none; border-color: var(--accent); }
.msel-search[hidden] { display: none; }
.msel-list { max-height: min(360px, 50vh); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; }
.msel-list:focus { outline: none; }
.msel-group {
  position: sticky; top: 0; z-index: 1; background: var(--parchment);
  padding: 8px 8px 4px; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48);
}
.msel-opt {
  appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-caption); color: var(--ink-80);
}
.msel-opt:hover, .msel-opt.is-active { background: var(--surface-2); color: var(--ink); }
.msel-opt.on { color: var(--ink); font-weight: 600; }
.msel-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-opt-count { flex: none; font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }
.msel-opt-check { flex: none; color: var(--ink); }
.msel-empty { padding: 16px 8px; font-size: var(--fs-caption); color: var(--ink-48); text-align: center; }

/* ── 날짜 스텝퍼 ── */
.dstep-row { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-1); }
.dstep-row .dstep-trigger { height: 30px; background: transparent; padding: 0 8px 0 10px; font-variant-numeric: tabular-nums; }
.dstep-row .dstep-trigger:hover, .dstep-row .dstep-trigger[aria-expanded="true"] { background: var(--surface-3); }
.dstep-nav {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-80);
  width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center;
}
.dstep-nav:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.dstep-nav:disabled { opacity: .32; cursor: default; }
.dstep-pop { padding: 12px; width: max-content; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; } /* 자료 범위가 길어도 화면 밖으로 흘러내리지 않게 */
.dstep-cal-head, .dstep-cal-week { display: grid; grid-template-columns: repeat(7, 38px); gap: 2px; }
.dstep-cal-head { margin-bottom: 4px; font-size: var(--fs-fine); color: var(--ink-48); text-align: center; }
.dstep-cal-day {
  appearance: none; border: 0; background: transparent; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; font: inherit; font-size: var(--fs-fine); font-variant-numeric: tabular-nums; color: var(--ink);
}
button.dstep-cal-day { cursor: pointer; background: var(--surface-1); }
button.dstep-cal-day:hover { background: var(--surface-3); }
button.dstep-cal-day:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }
.dstep-cal-day.on { background: var(--ink); color: var(--canvas); font-weight: 600; }
.dstep-cal-day.is-empty { color: var(--ink-48); opacity: .45; }
.dstep-cal-note { margin: 10px 0 0; font-size: var(--fs-fine); color: var(--ink-48); }

/* ── 모바일: 터치 타깃 44px · 도구막대는 세로로 ── */
@media (max-width: 810px) {
  .trend-toolbar { align-items: stretch; }
  .trend-toolbar-meta { margin-left: 0; min-height: 0; }
  .seg-opt, .dstep-nav, .dstep-row .dstep-trigger { height: 38px; }
  .dstep-nav { width: 38px; }
  .msel-trigger { height: 44px; }
  .msel-opt { min-height: 44px; }
  .pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 70dvh; }
  .msel-pop { width: auto; }
  .dstep-pop { width: auto; }
  .dstep-cal-head, .dstep-cal-week { grid-template-columns: repeat(7, 1fr); }
  .dstep-cal-day { height: 44px; }
}