/* ⇅ 정렬 · 필터 (tabletools.js) — one look on every table: a title click sorts (▲ ▼), its filter icon opens the menu; the line
   above the table says what is filtered. The icon's shape is Google Sheets' (Julian 2026-10-12: "something recognizable like in
   Google Sheets, with a hover"): three lines beside the title, always there (phones have no hover); hovered or reached with Tab, a
   rounded square with the lines white; a filtered column keeps that square on. Its colour is Wave's orange — the same as the
   「필터 N개」 line above the table (Julian 2026-10-12: Sheets green next to it didn't go together — 「잘 어울리게」). */
/* The orange, once: at rest the lines are a quiet orange-grey (every title has one); the square is the full orange. On it: white
   in light; near-black in dark (the project's :root = dark, [data-theme="light"] = the default look). */
:root { --tt-accent: var(--orange); --tt-on-accent: #0a0a0f; --tt-rest: color-mix(in srgb, var(--orange) 60%, var(--muted)); }
:root[data-theme="light"] { --tt-accent: var(--orange); --tt-on-accent: #ffffff; --tt-rest: color-mix(in srgb, var(--orange) 70%, var(--muted)); }
th.tt-th { cursor: pointer; user-select: none; -webkit-user-select: none; }
th.tt-th:hover, th.tt-th[aria-sort="ascending"], th.tt-th[aria-sort="descending"] { color: var(--text); }
th.tt-th:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
th.tt-th > .tt-arrow { white-space: nowrap; }
th.tt-th[aria-sort="ascending"] > .tt-arrow::after { content: ' ▲'; }
th.tt-th[aria-sort="descending"] > .tt-arrow::after { content: ' ▼'; }
.tt-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--tt-rest); cursor: pointer; vertical-align: middle; font: inherit; line-height: 1; transition: background-color .12s, color .12s; }
th.num > .tt-btn { margin: 0 4px 0 0; }   /* (4 px: the square doesn't touch the words) */
.tt-btn > .tt-glyph { display: block; width: 16px; height: 16px; }
/* the orange square: a mouse over it (only where there is a mouse — a tap would leave it lit like a filter) · Tab · a press · a filter */
@media (hover: hover) { .tt-btn:hover { background: var(--tt-accent); color: var(--tt-on-accent); } }
.tt-btn:focus-visible { background: var(--tt-accent); color: var(--tt-on-accent); outline: 2px solid color-mix(in srgb, var(--tt-accent) 45%, transparent); outline-offset: 1px; }
.tt-btn:active { background: color-mix(in srgb, var(--tt-accent) 80%, var(--text)); color: var(--tt-on-accent); }
.tt-btn--on { background: var(--tt-accent); color: var(--tt-on-accent); }
@media (hover: hover) { .tt-btn--on:hover { background: color-mix(in srgb, var(--tt-accent) 82%, var(--text)); } }
.tt-ic--arrow-up-down::before { content: '⇅'; }

/* the line above the table: 「필터 N개 (열 · 열) · 보이는 줄 M / 전체 T · 모두 지우기」 · phones: 「정렬 · 필터」 */
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--orange) 7%, var(--surface)); font-size: 13.5px; }
.tt-bar:not(:has(.tt-bar__info)) { border-color: var(--line); background: var(--surface); }
.tt-bar__info b { font-weight: 600; }
.tt-bar__col { border: 0; background: none; padding: 0; font: inherit; color: var(--orange); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tt-bar__sort { display: inline-flex; align-items: center; gap: 4px; }
.tt-bar__sum { color: var(--muted); }
.tt-bar__pick .ic { width: 15px; height: 15px; }

/* the filter icon's menu: a small window under the title (wide screens) or in the middle (phones) */
dialog.tt-menu { position: fixed; inset: auto; margin: 0; padding: 0; width: min(340px, calc(100vw - 16px)); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, #000 24%, transparent); font-size: 14px; font-weight: 400; text-align: left; }
dialog.tt-menu::backdrop { background: transparent; }
dialog.tt-menu.tt-menu--mid { inset: 0; margin: auto; width: min(420px, calc(100vw - 24px)); }
dialog.tt-menu.tt-menu--mid::backdrop { background: color-mix(in srgb, #000 40%, transparent); }
html.kb-open dialog.tt-menu.tt-menu--mid { margin: calc(var(--vvt, 0px) + 8px) auto auto; }
.tt-menu__in { display: grid; gap: 10px; padding: 12px 14px; }
.tt-menu__h { margin: 0; font-size: 15px; font-weight: 600; }
.tt-menu__note { margin: 0; color: var(--muted); font-size: 13px; }
.tt-menu__back { justify-self: start; }
.tt-menu__sorts, .tt-menu__extra { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tt-menu__extra { padding-top: 0; }
.tt-menu__sort { text-align: left; border: 0; background: none; color: var(--text); padding: 7px 8px; border-radius: 6px; font: inherit; cursor: pointer; }
.tt-menu__sort:hover { background: var(--surface-2); }
.tt-menu__sort[aria-pressed="true"] { font-weight: 600; color: var(--orange); }
.tt-menu__sec { display: grid; gap: 6px; }
.tt-menu__sec > b { font-size: 13px; color: var(--muted); font-weight: 600; }
.tt-menu__words { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tt-menu__words .input { flex: 1 1 140px; min-width: 0; }
.tt-menu__range { display: flex; align-items: flex-end; gap: 6px; }
.tt-menu__range .field { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.tt-menu__range .input, .tt-menu__range .df { width: 100%; min-width: 0; }
.tt-menu__range .df__wd { display: none; }   /* (the date field's own note under it moved 확인 away mid-click — the menu's own line says it) */
.tt-menu__dash { padding-bottom: 8px; color: var(--muted); }
.tt-menu__find { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tt-menu__find .input { flex: 1 1 120px; min-width: 0; }
.tt-menu__list { max-height: min(300px, 38vh); overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.tt-menu__val { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.tt-menu__val:hover { background: var(--surface-2); }
.tt-menu__val > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tt-menu__val > small { color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-menu__empty { color: var(--muted); font-style: italic; }
.tt-menu__err { margin: 0; color: var(--red); font-size: 13px; }
.tt-menu__cols { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-menu__col--on { border-color: var(--orange); color: var(--orange); }
.tt-menu__cols .tt-glyph { width: 15px; height: 15px; color: var(--tt-accent); vertical-align: -3px; }   /* (phones' column list: a filtered column) */
.tt-menu__acts { display: flex; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.tt-menu__gap { flex: 1 1 auto; }
@media (max-width: 640px) {
  .tt-menu__val { padding-block: 8px; }
  .tt-btn { width: 22px; height: 22px; }
}