/* ============================================================
   Rebeauty web — events list (cards-list, CONTRACT §4 · §9)
   1) list = explore (.lx, app/views/site/_list_explore.php; body .ls-explore) — figma-explore §2.3–2.12:
      script head · main-category underline tabs (edge fade + arrows) · search pill (q) + filter pills (<details class="rb-pop">) · plain-text tokens ·
      card grid · minimal number pager. Popovers on ≥700px viewports, bottom sheets below (position:fixed escapes
      the horizontally scrolling pill row). Works without JS (links + GET form + <details>).
   2) classic events.php polish: "Reset" as a real text link (.st-filters-reset).
   ============================================================ */

/* ---------------------------------------------------------- 0. classic list: reset link */
.site .st-filters .st-filters-reset {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 100%; min-height: 42px; padding: 0 .5rem;
  color: var(--accent-text, var(--brand)); font-size: .875rem; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
@media (hover: hover) { .site .st-filters .st-filters-reset:hover { text-decoration-thickness: 2px; } }
@media (min-width: 700px) { .site .st-filters .st-filters-reset { flex: 0 0 auto; } }

/* ---------------------------------------------------------- 1. explore: page rhythm */
.site .lx { padding-top: 18px; }
.site .lx-head { --rb-sh-gap: 20px; }
.site .lx .st-section-head.lx-head { justify-content: center; text-align: center; margin-bottom: 1rem; }
.site .lx-tabs-wrap { position: relative; margin-bottom: 4px; }
/* overflowing tab strip: rb.js fades the clipped edge(s) (.rb-fs/.rb-fe) and centres the active tab; the arrows are a
   pointer affordance (aria-hidden, tabindex -1 — keyboard users tab through the links) and show only on the clipped side */
.site .lx-tabs.rb-fe, .site .lx-tabs.rb-fs { --lx-fade: 72px; }
.site .lx-tabs.rb-fe:not(.rb-fs) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--lx-fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--lx-fade)), transparent); }
.site .lx-tabs.rb-fs:not(.rb-fe) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--lx-fade)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--lx-fade)), transparent); }
.site .lx-tabs.rb-fs.rb-fe { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--lx-fade), #000 calc(100% - var(--lx-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--lx-fade), #000 calc(100% - var(--lx-fade)), transparent); }
[dir="rtl"] .site .lx-tabs.rb-fe:not(.rb-fs) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--lx-fade)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--lx-fade)), transparent); }
[dir="rtl"] .site .lx-tabs.rb-fs:not(.rb-fe) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--lx-fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--lx-fade)), transparent); }
.site .lx-tabs-arrow {
  position: absolute; top: calc(50% - 17px); z-index: 2; width: 34px; height: 34px;
  box-shadow: 0 2px 8px rgba(20, 18, 30, .12);
}
.site .lx-tabs-arrow svg { width: 16px; height: 16px; }
.site .lx-tabs-arrow[data-dir="prev"] { inset-inline-start: -4px; }
.site .lx-tabs-arrow[data-dir="next"] { inset-inline-end: -4px; }
.site .lx-tabs-arrow[disabled] { visibility: hidden; }
.site .lx-tabs .rb-tab { gap: 5px; }
.site .lx-n { font-size: .75em; font-weight: 500; color: var(--mut); }
.site .lx-tabs .rb-tab[aria-current] .lx-n { color: var(--accent-text, var(--mut)); }
@container main (min-width: 700px) {
  .site .lx { padding-top: 28px; }
  .site .lx-head { --rb-sh-gap: 28px; }
}

/* ---------------------------------------------------------- 2. search pill + filter pill bar
   phones / 600px app column: search = full-width row above the scrolling pills; wider: one row, search at the end */
.site .lx-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.site .lx-bar { display: flex; align-items: center; gap: 8px; }
.site .lx-find { position: relative; display: flex; align-items: center; min-width: 0; margin: 0; }
.site .lx-find-in {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 44px; margin: 0; padding-block: 0; padding-inline: 18px 46px;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--fg) 3%, var(--surface));
  color: var(--fg); font: inherit; font-size: 1rem; line-height: 1.2; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, background-color .15s;
}
.site .lx-find-in::placeholder { color: var(--mut); opacity: 1; }
.site .lx-find-in:focus { outline: none; }
.site .lx-find-in:focus-visible, .site .lx-find-in:focus {
  border-color: var(--accent-text, var(--brand)); background: var(--surface);
  box-shadow: 0 0 0 1px var(--accent-text, var(--brand));
}
.site .lx-find-in:not(:placeholder-shown) { border-color: var(--accent-text, var(--brand)); }
.site .lx-find-go {
  position: absolute; inset-block: 0; inset-inline-end: 0; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--accent-text, var(--fg)); cursor: pointer;
}
.site .lx-find-go .rb-ico { width: 18px; height: 18px; }
.site .lx-find-go:focus-visible { outline: 2px solid var(--border, var(--brand)); outline-offset: -4px; }
@media (hover: hover) {
  .site .lx-find-in:hover { border-color: var(--border-hover, var(--accent-text)); }
  .site .lx-find-go:hover { background: var(--ui-hover, var(--soft)); }
}
@container main (min-width: 700px) {
  .site .lx-tools { flex-direction: row; align-items: center; gap: 16px; }
  .site .lx-tools .lx-bar { flex: 0 1 auto; min-width: 0; }
  .site .lx-find { order: 2; flex: 0 1 320px; margin-inline-start: auto; }
  .site .lx-find-in { font-size: .9375rem; }
}
/* one search per screen: the web GNB's pill (≥1024, prefilled with q) already sits above the list; in the desktop app
   column the appbar's empty search + category chips would repeat this list's search and tabs, so the list hides it */
@media (min-width: 1024px) {
  .site.nav-gnb:not(.dt-app) .lx-find { display: none; }
  .site.dt-app:has(.lx) .st-appbar { display: none; }
}
.site .lx-sep { flex: none; width: 1px; height: 30px; margin-inline: 4px; background: var(--line); }
.site .lx-btn, .site .lx-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; border-radius: 999px;
  font-size: .9375rem; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.site .lx-btn {
  padding-inline: 16px 18px; background: var(--brand); color: var(--accent-fg, #fff); font-weight: 700; border: 1px solid var(--brand);
}
.site .lx-btn .rb-ico { width: 16px; height: 16px; }
.site .lx-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--accent-fg, #fff); color: var(--brand); font-size: .75rem; font-weight: 700;
}
.site .lx-pill {
  padding-inline: 18px 12px; border: 1px solid var(--line); color: var(--fg); font-weight: 500;
  background: color-mix(in srgb, var(--fg) 3%, var(--surface));
}
.site .lx-pill > span:not(.sr-only) { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.site .lx-chev { width: 16px; height: 16px; color: var(--accent-text, var(--brand)); transition: transform .2s var(--rb-ease, ease); }
.site .lx-pop[open] > .lx-pill .lx-chev { transform: rotate(180deg); }
.site .lx-pill.is-on, .site .lx-pop[open] > .lx-pill {
  border-color: var(--accent-text, var(--brand)); color: var(--accent-text, var(--brand));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}
@media (hover: hover) {
  .site .lx-pill:hover { border-color: var(--border-hover, var(--accent-text)); }
  .site .lx-btn:hover { background: var(--solid-hover, var(--brand)); border-color: var(--solid-hover, var(--brand)); }
}
.site .lx-btn:focus-visible, .site .lx-pill:focus-visible { outline: 2px solid var(--border, var(--brand)); outline-offset: 2px; }

/* dropdown menus (region · sort) */
.site .lx-menu { min-width: 220px; max-height: 380px; overflow: auto; overscroll-behavior: contain; padding: 6px; }
.site .lx-menu-title { display: none; }
.site .lx-item {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 14px; border-radius: 8px;
  color: var(--fg); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.site .lx-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site .lx-item[aria-current] { color: var(--accent-text, var(--brand)); font-weight: 700; }
.site .lx-ck { flex: none; margin-inline-start: auto; color: var(--accent-text, var(--brand)); visibility: hidden; }
.site .lx-item[aria-current] .lx-ck { visibility: visible; }
.site .lx-opt-n { flex: none; color: var(--mut); font-size: .8125rem; font-weight: 400; }
.site .lx-item .lx-opt-n { margin-inline-start: auto; }
.site .lx-item .lx-opt-n + .lx-ck { margin-inline-start: 0; }
@media (hover: hover) { .site .lx-item:hover { background: var(--ui-hover, var(--soft)); } }

/* "Filters" panel: form with facet columns, fixed head and foot, the body scrolls inside. It opens at the start of the
   bar (= the wrap's start), so it is at most the column minus its gutters wide (600px app column included) and never
   taller than the viewport (the inline script scrolls it fully into view when it opens) */
.site .lx-panel {
  display: flex; flex-direction: column; width: min(760px, calc(100cqi - 2 * var(--pad, 16px))); max-width: none;
  max-height: min(640px, calc(100vh - 96px)); padding: 0; overflow: hidden; container: lxp / inline-size;
}
.site .lx-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.site .lx-panel-head { flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 6px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.site .lx-panel-title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.site .lx-x {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--mut); cursor: pointer;
}
.site .lx-js .lx-x { display: inline-grid; }
@media (hover: hover) { .site .lx-x:hover { background: var(--ui-hover, var(--soft)); color: var(--fg); } }
.site .lx-panel-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); flex: 1 1 auto; min-height: 0;
  overflow: auto; overscroll-behavior: contain;
}
/* narrow popover (600px app column): facet columns side by side, sort as one wrapping row of options underneath */
@media (min-width: 700px) {
  @container lxp (max-width: 699px) {
    .site .lx-set--sort { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
    .site .lx-set.lx-set--sort { border-inline-start: 0; }
    .site .lx-set--sort .lx-opts { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; max-height: none; }
    .site .lx-set--sort .lx-opt { padding-inline: 12px 10px; }
    .site .lx-set--sort .lx-ck { margin-inline-start: 0; }
  }
}
.site .lx-set { min-width: 0; margin: 0; padding: 16px 12px 14px; border: 0; }
.site .lx-set + .lx-set { border-inline-start: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.site .lx-set legend { float: left; width: 100%; margin: 0 0 8px; padding: 0 10px; color: var(--mut); font-size: .8125rem; font-weight: 600; }
.site .lx-opts { clear: both; display: flex; flex-direction: column; max-height: 300px; overflow: auto; overscroll-behavior: contain; }
.site .lx-opt {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; border-radius: 8px;
  font-size: .9375rem; cursor: pointer;
}
.site .lx-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.site .lx-opt-l { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.site .lx-opt .lx-opt-n { margin-inline-start: auto; }
.site .lx-opt .lx-opt-n + .lx-ck { margin-inline-start: 0; }
.site .lx-in:checked ~ .lx-opt-l { color: var(--accent-text, var(--brand)); font-weight: 700; }
.site .lx-in:checked ~ .lx-ck { visibility: visible; }
.site .lx-opt:has(.lx-in:checked) { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.site .lx-opt:has(.lx-in:focus-visible) { outline: 2px solid var(--border, var(--brand)); outline-offset: -2px; }
@media (hover: hover) { .site .lx-opt:hover { background: var(--ui-hover, var(--soft)); } }
.site .lx-panel-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--surface);
}
.site .lx-foot-reset, .site .lx-apply {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--radius-btn, 8px);
  font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.site .lx-foot-reset { border: 1px solid var(--line); background: var(--surface); color: var(--fg); white-space: nowrap; }
.site .lx-apply { border: 1px solid var(--brand); background: var(--brand); color: var(--accent-fg, #fff); min-width: 120px; }
@media (hover: hover) {
  .site .lx-apply:hover { background: var(--solid-hover, var(--brand)); }
  .site .lx-foot-reset:hover { border-color: var(--border-hover, var(--line)); }
}

/* ---------------------------------------------------------- 3. tokens · count */
.site .lx-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin-top: 8px; min-height: 44px; }
.site .lx-tokens { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin: 0; padding: 0; list-style: none; }
.site .lx-token {
  display: inline-flex; align-items: center; gap: 3px; min-height: 40px; color: var(--accent-text, var(--brand));
  font-size: .9375rem; text-decoration: none;
}
.site .lx-token > span { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site .lx-token .rb-ico { color: var(--mut); }
@media (hover: hover) { .site .lx-token:hover > span { text-decoration: underline; text-underline-offset: 3px; } }
.site .lx-reset {
  display: inline-flex; align-items: center; min-height: 40px; color: var(--mut); font-size: .875rem;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .site .lx-reset:hover { color: var(--fg); } }
.site .lx-count { margin: 0 0 0 auto; margin-inline: auto 0; color: var(--mut); font-size: .8125rem; white-space: nowrap; }

/* ---------------------------------------------------------- 4. grid (cols from the layout's card-min, airy rows) */
.site .lx-grid { margin-top: 10px; row-gap: max(24px, calc(var(--gap, 14px) * 1.6)); }
@container main (min-width: 700px) {
  .site .lx-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(220px, var(--card-min, 260px), 280px)), 1fr));
    column-gap: max(16px, var(--gap, 16px)); row-gap: 40px; margin-top: 16px;
  }
}
@container main (min-width: 1100px) { .site .lx-grid { row-gap: 56px; } }
.site.card-horizontal .lx-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap, 14px); }
@container main (min-width: 700px) {
  .site.card-horizontal .lx-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 560px)), 1fr)); }
}
.site.card-ranked .lx-grid { row-gap: 0; }
@container main (min-width: 860px) { .site.card-ranked .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.site .lx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site .lx-empty p { margin: 0; }

/* ---------------------------------------------------------- 5. minimal number pager (44px targets, mirrored chevrons) */
.site .lx-pager { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: 44px; padding-bottom: 8px; }
.site .lx-pg {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
  padding: 0 6px; border-radius: 999px; color: var(--fg); font-size: 1rem; font-weight: 400; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.site .lx-pg.is-current { font-weight: 700; }
.site .lx-pg.is-current::after {
  content: ""; position: absolute; bottom: 7px; left: 50%; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px;
  background: var(--accent-2, var(--brand));
}
.site .lx-pg--arrow .rb-ico { width: 18px; height: 18px; }
.site .lx-pg.is-off { color: color-mix(in srgb, var(--fg) 25%, var(--bg)); }
.site .lx-gap { min-width: 20px; color: var(--mut); text-align: center; }
.site .lx-gap--narrow { display: none; }
@media (hover: hover) { .site a.lx-pg:hover { background: var(--ui-hover, var(--soft)); } }
.site .lx-pg:focus-visible { outline: 2px solid var(--border, var(--brand)); outline-offset: -2px; }
@container main (max-width: 559px) {
  .site .lx-pager { gap: 0; }
  .site .lx-pg--wide { display: none; }
  .site .lx-gap--narrow { display: inline-block; }
}

/* ---------------------------------------------------------- 6. phones: scrolling pill row + bottom sheets */
@media (max-width: 699px) {
  .site .lx-bar {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--pad, 16px) * -1); padding: 2px var(--pad, 16px);
  }
  .site .lx-bar::-webkit-scrollbar { display: none; }
  .site .lx-pop { flex: none; }
  .site .lx-btn, .site .lx-pill { font-size: .875rem; }
  .site .lx-pill { padding-inline: 14px 10px; }
  .site .lx-btn { padding-inline: 14px 16px; }

  /* scrim = the open summary's ::before (a click on it toggles the <details> closed, no JS needed) */
  .site .lx-pop[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(16, 14, 22, .44); cursor: default;
  }
  .site .lx-pop > .rb-pop-panel {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 81; width: auto; min-width: 0; max-width: none;
    max-height: min(84vh, 680px); padding: 0 0 env(safe-area-inset-bottom); overflow: auto; overscroll-behavior: contain;
    border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  }
  .site .lx-pop > .rb-pop-panel::before {     /* grab handle */
    content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px;
    background: color-mix(in srgb, var(--fg) 18%, var(--surface));
  }
  .site .lx-menu { padding: 0 8px 10px; }
  .site .lx-menu-title { display: block; margin: 0; padding: 12px 10px 8px; font-size: 1.0625rem; font-weight: 600; }
  .site .lx-panel { width: auto; overflow: auto; }
  .site .lx-panel::before { position: sticky; top: 0; }
  .site .lx-panel-head { position: sticky; top: 0; z-index: 1; min-height: 52px; background: var(--surface); }
  .site .lx-panel-body { display: block; }
  .site .lx-set { padding: 14px 16px 8px; }
  .site .lx-set + .lx-set { border-inline-start: 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .site .lx-set legend { padding: 0; }
  /* options become wrapping chips in the sheet */
  .site .lx-opts { flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: none; overflow: visible; }
  .site .lx-opt {
    min-height: 40px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem;
  }
  .site .lx-opt .lx-ck { display: none; }
  .site .lx-opt .lx-opt-n { margin-inline-start: 2px; font-size: .75rem; }
  .site .lx-opt:has(.lx-in:checked) { border-color: var(--accent-text, var(--brand)); }
  .site .lx-panel-foot { position: sticky; bottom: 0; padding: 10px 16px 12px; }
  .site .lx-foot-reset { flex: 0 0 auto; min-width: 33%; min-height: 50px; padding-inline: 18px; }   /* one line in every language */
  .site .lx-apply { flex: 1 1 auto; min-height: 50px; }
}
/* i18n */
html[lang="ko"] .site .lx :is(.lx-btn, .lx-pill, .lx-token, .lx-opt) { word-break: keep-all; }
html[lang="th"] .site .lx :is(.lx-opt-l, .lx-item, .lx-token) { line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .site .lx *, .site .lx *::before, .site .lx *::after { transition: none !important; } }