/**
 * PreSignal UI Kit (Step 603)
 * Design Source: G:\내 드라이브\ai-workspace\projects\presignal\design\bid-screens-sim-v3\
 * Principles:
 *  - All component classes prefixed with .ui-
 *  - Zero dependency on Bootstrap (.btn, .card, .form-select etc. NOT used)
 *  - Minimum font-size 12px throughout (strictly enforced)
 *  - Colors and dimensions defined exclusively via CSS tokens (--ui-*)
 *  - High contrast ratio (WCAG AA >= 4.5:1 for all text/background pairs)
 */

/* ==========================================================================
   1. Design Tokens (CSS Variables)
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Surfaces & Backgrounds */
  --ui-bg: #F6F5F9;
  --ui-header-top-height: 64px;
  --ui-header-nav-height: 52px;
  --ui-header-height: calc(var(--ui-header-top-height) + var(--ui-header-nav-height));
  --ui-surface: #FFFFFF;
  --ui-surface-2: #FAF9FC;
  --ui-surface-hover: #F3F1F8;

  /* Borders */
  --ui-border: #E6E3EE;
  --ui-border-2: #EFEDF4;
  --ui-control-border: #D3CFDF;
  --ui-control-border-hover: #9A96AB;

  /* Typography Colors */
  --ui-text: #1C1A24;
  --ui-text-2: #3A3846;
  --ui-text-3: #55525F;
  --ui-muted: #6B6879;
  --ui-disabled: #A9A5B8;

  /* Accent (Primary Purple) */
  --ui-accent: #5B3FD6;
  --ui-accent-hover: #452BB8;
  --ui-accent-strong: #3D27A8;
  --ui-accent-weak: #F1EDFF;
  --ui-accent-ring: rgba(91, 63, 214, 0.18);
  --ui-accent-text-on: #FFFFFF;
  --ui-toast-accent: #5B3FD6;
  --ui-toast-danger: #A3261D;
  --ui-toast-text: #FFFFFF;
  --ui-toast-hover: rgba(255, 255, 255, 0.2);

  /* Point Strip */
  --ui-point-bg: #F4F1FF;
  --ui-point-border: #DCD3FF;
  --ui-point-title: #3D27A8;

  /* Status Colors */
  --ui-success-bg: #E9F6EF;
  --ui-success-text: #17663F;
  --ui-neutral-bg: #EEF0F4;
  --ui-neutral-text: #3E4452;
  --ui-danger-bg: #FDECEB;
  --ui-danger-text: #A3261D;
  --ui-warn-bg: #FFF3E2;
  --ui-warn-text: #8A4B00;
  --ui-info-bg: #E8F3FF;
  --ui-info-text: #1F5AA6;
  --ui-urgent-text: #B3261E;
  --ui-bizdiv-goods-bg: transparent;
  --ui-bizdiv-goods-text: #8A4B00;
  --ui-bizdiv-goods-border: #E7C28A;
  --ui-bizdiv-cnstwk-bg: transparent;
  --ui-bizdiv-cnstwk-text: #1F5AA6;
  --ui-bizdiv-cnstwk-border: #A8CBEF;
  --ui-bizdiv-servc-bg: transparent;
  --ui-bizdiv-servc-text: #17663F;
  --ui-bizdiv-servc-border: #A6D8BC;

  /* Typography Scales (Minimum 12px) */
  --ui-fs-12: 12px;
  --ui-fs-13: 13px;
  --ui-fs-14: 14px;
  --ui-fs-15: 15px;
  --ui-fs-16: 16px;
  --ui-fs-17: 17px;
  --ui-fs-18: 18px;
  --ui-fs-20: 20px;
  --ui-fs-24: 24px;
  --ui-fs-28: 28px;
  --ui-fs-34: 34px;

  /* Font Weights */
  --ui-fw-regular: 400;
  --ui-fw-medium: 500;
  --ui-fw-semibold: 600;
  --ui-fw-bold: 700;

  /* Border Radii */
  --ui-r-sm: 4px;
  --ui-r-md: 8px;
  --ui-r-lg: 12px;
  --ui-r-xl: 16px;
  --ui-r-pill: 999px;

  /* Spacing */
  --ui-sp-1: 4px;
  --ui-sp-2: 8px;
  --ui-sp-3: 12px;
  --ui-sp-4: 16px;
  --ui-sp-5: 20px;
  --ui-sp-6: 24px;
  --ui-sp-8: 32px;
  --ui-sp-10: 40px;

  /* Shadows */
  --ui-shadow-sm: 0 1px 2px rgba(28, 26, 36, 0.08);
  --ui-shadow-md: 0 4px 14px rgba(28, 26, 36, 0.08);
  --ui-shadow-pop: 0 12px 28px rgba(28, 26, 36, 0.14);
  --ui-shadow-sheet: 0 -10px 30px rgba(28, 26, 36, 0.18);
  --ui-backdrop: rgba(18, 17, 24, 0.55);
}

[data-theme="dark"] {
  /* Surfaces & Backgrounds */
  --ui-bg: #121118;
  --ui-surface: #1B1A22;
  --ui-surface-2: #201E28;
  --ui-surface-hover: #26232F;

  /* Borders */
  --ui-border: #433E55;
  --ui-border-2: #38334A;
  --ui-control-border: #3A3647;
  --ui-control-border-hover: #6F6B80;

  /* Typography Colors */
  --ui-text: #ECEBF2;
  --ui-text-2: #CFCCD9;
  --ui-text-3: #B3AFC3;
  --ui-muted: #B3AFC3;
  --ui-disabled: #555166;

  /* Accent (Primary Purple in Dark) */
  --ui-accent: #7D63FF;
  --ui-accent-hover: #937EFF;
  --ui-accent-strong: #C9BBFF;
  --ui-accent-weak: #2A2344;
  --ui-accent-ring: rgba(125, 99, 255, 0.25);
  --ui-accent-text-on: #FFFFFF;
  --ui-toast-accent: #5B3FD6;
  --ui-toast-danger: #A3261D;
  --ui-toast-text: #FFFFFF;
  --ui-toast-hover: rgba(255, 255, 255, 0.2);

  /* Point Strip */
  --ui-point-bg: #231F36;
  --ui-point-border: #3A3258;
  --ui-point-title: #C9BBFF;

  /* Status Colors */
  --ui-success-bg: #153023;
  --ui-success-text: #57D695;
  --ui-neutral-bg: #252430;
  --ui-neutral-text: #CFCCD9;
  --ui-danger-bg: #381E20;
  --ui-danger-text: #F87171;
  --ui-warn-bg: #362714;
  --ui-warn-text: #FBBF24;
  --ui-info-bg: #192A45;
  --ui-info-text: #60A5FA;
  --ui-urgent-text: #F87171;
  --ui-bizdiv-goods-bg: transparent;
  --ui-bizdiv-goods-text: #FBBF24;
  --ui-bizdiv-goods-border: #80621A;
  --ui-bizdiv-cnstwk-bg: transparent;
  --ui-bizdiv-cnstwk-text: #60A5FA;
  --ui-bizdiv-cnstwk-border: #315A8C;
  --ui-bizdiv-servc-bg: transparent;
  --ui-bizdiv-servc-text: #57D695;
  --ui-bizdiv-servc-border: #2F7653;

  /* Shadows */
  --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --ui-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ui-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.65);
  --ui-shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.70);
  --ui-backdrop: rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   2. Base Utilities for UI Kit Components
   ========================================================================== */

.ui-tabular {
  font-variant-numeric: tabular-nums;
}

.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Component 1: Page Tabs (ui-tabs)
   ========================================================================== */

.ui-tabs {
  display: flex;
  gap: var(--ui-sp-6);
  border-bottom: 1px solid var(--ui-border);
  box-sizing: border-box;
}

.ui-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 0 var(--ui-sp-3);
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-muted);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ui-tab:hover {
  color: var(--ui-text);
}

.ui-tab.is-active,
.ui-tab[aria-current="page"] {
  color: var(--ui-text);
  border-bottom-color: var(--ui-accent);
}

.ui-tab:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   4. Component 2: Segmented Control (ui-seg)
   ========================================================================== */

.ui-seg {
  display: inline-flex;
  background: var(--ui-border-2);
  border-radius: var(--ui-r-lg);
  padding: 3px;
  box-sizing: border-box;
}

.ui-seg__btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-3);
  padding: 7px var(--ui-sp-3);
  border-radius: var(--ui-r-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ui-seg__btn:hover {
  color: var(--ui-text);
}

.ui-seg__btn.is-active,
.ui-seg__btn[aria-checked="true"] {
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}

.ui-seg__btn:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.ui-seg__choice { position: relative; cursor: pointer; }
.ui-seg__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-seg__choice span { display: block; font-size: var(--ui-fs-13); font-weight: var(--ui-fw-semibold); color: var(--ui-text-3); padding: 7px var(--ui-sp-3); border-radius: var(--ui-r-md); }
.ui-seg__choice input:checked + span { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sm); }
.ui-seg__choice input:focus-visible + span { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

/* ==========================================================================
   5. Component 3: Check Chips (ui-chip)
   ========================================================================== */

.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-sp-2);
  align-items: center;
}

/* Step 605-A1: 긴 칩 줄 — 상위 N + 선택 칩만 기본 노출 */
.ui-chip.is-overflow {
  display: none !important;
}

.ui-chips.is-expanded .ui-chip.is-overflow {
  display: inline-flex !important;
}

.ui-chips__more {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--ui-control-border);
  border-radius: var(--ui-r-md);
  background: transparent;
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-accent-strong);
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

.ui-chips__more:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-weak);
}

.ui-chips__more[hidden] {
  display: none !important;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--ui-sp-3);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.ui-chip:hover {
  border-color: var(--ui-control-border-hover);
}

.ui-chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.ui-chip__box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ui-control-border-hover);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.ui-chip__box svg {
  display: none;
}

.ui-chip.is-checked,
.ui-chip:has(.ui-chip__input:checked) {
  border-color: var(--ui-accent);
  background: var(--ui-accent-weak);
  color: var(--ui-accent-strong);
  font-weight: var(--ui-fw-semibold);
}

.ui-chip.is-checked .ui-chip__box,
.ui-chip:has(.ui-chip__input:checked) .ui-chip__box {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

.ui-chip.is-checked .ui-chip__box svg,
.ui-chip:has(.ui-chip__input:checked) .ui-chip__box svg {
  display: block;
}

.ui-chip:has(.ui-chip__input:focus-visible) {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui-chip.is-disabled,
.ui-chip:has(.ui-chip__input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   6. Component 4: Custom Selectbox (ui-select, ui-listbox, ui-option)
   ========================================================================== */

.ui-select {
  position: relative;
  display: inline-block;
  font-family: inherit;
  box-sizing: border-box;
}

.ui-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-sp-2);
  min-width: 160px;
  height: 38px;
  padding: 0 var(--ui-sp-3);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  font-size: var(--ui-fs-14);
  color: var(--ui-text);
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-select__trigger:hover:not(:disabled) {
  border-color: var(--ui-control-border-hover);
}

.ui-select__trigger:disabled,
.ui-select.is-disabled .ui-select__trigger {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--ui-control-border);
}

.ui-select.is-open .ui-select__trigger,
.ui-select__trigger:focus-visible {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
  outline: none;
}

.ui-select__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ui-select.is-open .ui-select__chevron {
  transform: rotate(180deg);
}

.ui-select__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-pop);
  padding: 6px;
  box-sizing: border-box;
  z-index: 1000;
  display: none;
}

.ui-select.is-open .ui-select__menu {
  display: block;
}

.ui-select.is-dropup .ui-select__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.ui-select__search {
  width: 100%;
  height: 34px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface-2);
  color: var(--ui-text);
  font-size: var(--ui-fs-13);
  font-family: inherit;
  padding: 0 var(--ui-sp-2);
  box-sizing: border-box;
  margin-bottom: 6px;
  outline: none;
}

.ui-select__search:focus {
  border-color: var(--ui-accent);
}

.ui-select__list {
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-select__group-label {
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-muted);
  padding: 6px var(--ui-sp-2) 4px;
}

.ui-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding: 0 var(--ui-sp-2);
  border-radius: var(--ui-r-sm);
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}

.ui-option:hover,
.ui-option.is-focused {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.ui-option.is-selected,
.ui-option[aria-selected="true"] {
  color: var(--ui-accent-strong);
  font-weight: var(--ui-fw-semibold);
}

.ui-option__check {
  font-size: var(--ui-fs-12);
  color: var(--ui-accent);
  visibility: hidden;
}

.ui-option.is-selected .ui-option__check,
.ui-option[aria-selected="true"] .ui-option__check {
  visibility: visible;
}

/* ==========================================================================
   7. Component 5: Switch (ui-switch)
   ========================================================================== */

.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-sp-2);
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
  cursor: pointer;
  user-select: none;
}

.ui-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.ui-switch__track {
  width: 36px;
  height: 20px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-control-border);
  position: relative;
  display: inline-block;
  transition: background 0.2s ease;
  box-sizing: border-box;
}

.ui-switch__thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui-surface);
  transition: transform 0.2s ease;
  box-shadow: var(--ui-shadow-sm);
}

.ui-switch.is-on .ui-switch__track,
.ui-switch:has(.ui-switch__input:checked) .ui-switch__track {
  background: var(--ui-accent);
}

.ui-switch.is-on .ui-switch__thumb,
.ui-switch:has(.ui-switch__input:checked) .ui-switch__thumb {
  transform: translateX(16px);
}

.ui-switch:has(.ui-switch__input:focus-visible) .ui-switch__track {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui-switch__state { color: var(--ui-text-3); font-weight: var(--ui-fw-semibold); }
.ui-switch__state.is-active { color: var(--ui-accent-strong); }

/* ==========================================================================
   8. Component 6: Applied Filters & Pills (ui-applied, ui-applied-pill)
   ========================================================================== */

.ui-applied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ui-applied-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 10px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-text);
  color: var(--ui-surface);
  font-size: var(--ui-fs-12);
  font-family: inherit;
  box-sizing: border-box;
}

.ui-applied-pill__remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  font-size: var(--ui-fs-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}

.ui-applied-pill__remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

.ui-applied__clear {
  height: 28px;
  padding: 0 var(--ui-sp-2);
  border: 0;
  background: none;
  color: var(--ui-muted);
  font-size: var(--ui-fs-12);
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.ui-applied__clear:hover {
  color: var(--ui-text);
}

/* ==========================================================================
   9. Component 7: Buttons (ui-btn)
   ========================================================================== */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-sp-2);
  height: 38px;
  padding: 0 var(--ui-sp-4);
  border-radius: var(--ui-r-md);
  border: 1px solid transparent;
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-semibold);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui-btn--primary {
  background: var(--ui-accent);
  color: var(--ui-accent-text-on);
  border-color: var(--ui-accent);
}

.ui-btn--primary:hover {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
  color: var(--ui-accent-text-on);
}

.ui-btn--outline {
  background: var(--ui-surface);
  border-color: var(--ui-control-border);
  color: var(--ui-text);
}

.ui-btn--outline:hover {
  border-color: var(--ui-control-border-hover);
  background: var(--ui-surface-hover);
}

.ui-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--ui-text-3);
  padding: 0 var(--ui-sp-2);
}

.ui-btn--text:hover {
  color: var(--ui-text);
}
.ui-btn--ghost { border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text-2) !important; }
.ui-btn--ghost:hover { border-color: var(--ui-accent); color: var(--ui-accent-strong) !important; background: var(--ui-accent-weak); }
.ui-btn--xs { min-height: 22px; padding: 2px var(--ui-sp-2); font-size: var(--ui-fs-12); }

.ui-btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ui-control-border);
  background: var(--ui-surface);
  color: var(--ui-text-3);
  border-radius: var(--ui-r-md);
}

.ui-btn--icon:hover {
  border-color: var(--ui-control-border-hover);
  color: var(--ui-text);
}

.ui-btn:disabled,
.ui-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   10. Component 8: Status Badges (ui-badge)
   ========================================================================== */

.ui-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--ui-sp-2);
  border-radius: var(--ui-r-sm);
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-semibold);
  box-sizing: border-box;
  white-space: nowrap;
}

.ui-badge--success {
  background: var(--ui-success-bg);
  color: var(--ui-success-text);
}

.ui-badge--neutral {
  background: var(--ui-neutral-bg);
  color: var(--ui-neutral-text);
}

.ui-badge--danger {
  background: var(--ui-danger-bg);
  color: var(--ui-danger-text);
}

.ui-badge--warn {
  background: var(--ui-warn-bg);
  color: var(--ui-warn-text);
}

.ui-badge--accent {
  background: var(--ui-accent-weak);
  color: var(--ui-accent-strong);
}

.ui-badge--info {
  background: var(--ui-info-bg);
  color: var(--ui-info-text);
}

/* ==========================================================================
   11. Component 9: Disclosure (ui-disclosure)
   ========================================================================== */

.ui-disclosure {
  display: block;
  font-family: inherit;
}

.ui-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--ui-r-md);
  border: 1px solid var(--ui-control-border);
  background: var(--ui-surface);
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ui-disclosure__trigger svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ui-disclosure__trigger:hover {
  border-color: var(--ui-control-border-hover);
}

.ui-disclosure__trigger:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui-disclosure__chevron,
.ui-disclosure__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ui-disclosure.is-open .ui-disclosure__chevron,
.ui-disclosure.is-open .ui-disclosure__icon,
.ui-disclosure.is-expanded .ui-disclosure__chevron,
.ui-disclosure.is-expanded .ui-disclosure__icon {
  transform: rotate(180deg);
}

.ui-disclosure__panel {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  padding: 12px 14px;
  box-sizing: border-box;
}

.ui-disclosure.is-open .ui-disclosure__panel,
.ui-disclosure.is-expanded .ui-disclosure__panel {
  display: block;
}

.ui-disclosure__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
}

.ui-disclosure__grid div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   12. Component 10: Term Popover & Dialog (ui-tip, ui-dialog)
   ========================================================================== */

.ui-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ui-tip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--ui-r-sm);
  border: 1px solid var(--ui-control-border);
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-bold);
  font-family: inherit;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}

.ui-tip__trigger:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.ui-tip__popover,
.ui-tip__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--ui-surface);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-pop);
  padding: 14px 16px;
  font-size: var(--ui-fs-13);
  line-height: 1.6;
  color: var(--ui-text-2);
  z-index: 1050;
  display: none;
  box-sizing: border-box;
  white-space: normal;
  word-break: keep-all;
}

.ui-tip.is-open .ui-tip__popover,
.ui-tip.is-open .ui-tip__pop {
  display: block;
}

.ui-tip__popover b,
.ui-tip__pop strong {
  display: block;
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin-bottom: 4px;
}

.ui-tip__source {
  margin-top: 8px;
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
}

/* Dialog (Long explanation modal) */
.ui-dialog-backdrop,
.ui-dialog__backdrop {
  position: fixed;
  inset: 0;
  background: var(--ui-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--ui-sp-4);
  box-sizing: border-box;
}

.ui-dialog-backdrop.is-open,
.ui-dialog__backdrop.is-open {
  display: flex;
}

.ui-dialog {
  width: 100%;
  max-width: 440px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-xl);
  box-shadow: var(--ui-shadow-pop);
  padding: var(--ui-sp-5);
  box-sizing: border-box;
  position: relative;
}

.ui-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ui-sp-3);
}

.ui-dialog__title {
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin: 0;
}

.ui-dialog__close {
  background: transparent;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-16);
  color: var(--ui-muted);
  cursor: pointer;
  border-radius: var(--ui-r-sm);
  transition: all 0.15s ease;
}

.ui-dialog__close:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.ui-dialog__body {
  font-size: var(--ui-fs-13);
  line-height: 1.65;
  color: var(--ui-text-2);
}

.ui-dialog--participants { max-width: 760px; max-height: min(85vh, 760px); }
.ui-flow__step-link { display: flex; flex-direction: column; gap: var(--ui-sp-1); min-height: 100%; color: inherit; text-decoration: none; border-radius: var(--ui-r-sm); padding: var(--ui-sp-3); }
.ui-flow__step-link:hover, .ui-flow__step-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-flow__actions { display: flex; align-items: center; gap: var(--ui-sp-1); margin-top: auto; padding-top: var(--ui-sp-2); min-height: 24px; }
.ui-flow__step-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-flow__step-note { display: block; min-height: 17px; font-size: var(--ui-fs-12); color: var(--ui-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-source-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px var(--ui-sp-2); border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); color: var(--ui-text-2); font-size: var(--ui-fs-12); text-decoration: none; white-space: nowrap; }
.ui-source-chip:hover, .ui-source-chip:focus-visible { border-color: var(--ui-accent); color: var(--ui-accent-strong); }
.ui-source-chip.is-disabled { color: var(--ui-muted); opacity: .65; }
.ui-participants-toolbar { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ui-sp-3); align-items: center; margin-bottom: var(--ui-sp-3); }
.ui-participants-toolbar #participantsFilterCount { text-align: right; }
.ui-participants-invalid-row td { color: var(--ui-muted); font-size: var(--ui-fs-12); text-align: center; }
.ui-participants-scroll { max-height: min(60vh, 560px); overflow: auto; }
.ui-participants-summary { margin-bottom: var(--ui-sp-3); }
.ui-participants-fragment { min-width: 0; }
.ui-field { display: block; }
.ui-field__label { display: block; margin-bottom: var(--ui-sp-1); font-size: var(--ui-fs-12); color: var(--ui-text-2); }
@media (max-width: 600px) { .ui-dialog--participants { max-width: 100%; } .ui-participants-scroll { max-height: 58vh; overflow-x: auto; } }

.ui-dialog__foot,
.ui-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-sp-2);
  margin-top: var(--ui-sp-4);
  padding-top: var(--ui-sp-3);
  border-top: 1px solid var(--ui-border);
}

/* ==========================================================================
   13. Component 11: Toast (ui-toast)
   ========================================================================== */

.ui-toast-container {
  position: fixed;
  right: var(--ui-sp-6);
  bottom: var(--ui-sp-6);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: var(--ui-sp-2);
  pointer-events: none;
}

.ui-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 420px;
  padding: var(--ui-sp-3) var(--ui-sp-4);
  background: var(--ui-toast-accent);
  border: 0;
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-pop);
  color: var(--ui-toast-text);
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-medium);
  display: flex;
  align-items: center;
  gap: var(--ui-sp-2);
  animation: ui-toast-fade-in 0.2s ease-out;
}

@keyframes ui-toast-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ui-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }

.ui-toast--success {
  background: var(--ui-toast-accent);
}

.ui-toast--danger {
  background: var(--ui-toast-danger);
}

.ui-toast--info {
  background: var(--ui-toast-accent);
}

.ui-toast__icon {
  font-size: var(--ui-fs-16);
  flex-shrink: 0;
}

.ui-toast__message {
  flex-grow: 1;
  font-size: var(--ui-fs-13);
  line-height: 1.4;
}

.ui-toast__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ui-toast-text);
  cursor: pointer;
  font-size: var(--ui-fs-14);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--ui-r-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.ui-toast__close:hover {
  color: var(--ui-toast-text);
  background: var(--ui-toast-hover);
}

@media (max-width: 767px) {
  .ui-toast-container { right: var(--ui-sp-3); left: var(--ui-sp-3); bottom: 84px; align-items: center; }
  .ui-toast { min-width: 0; width: min(100%, 420px); }
}

/* ==========================================================================
   14. Component 12: Sticky Action Bar (ui-actionbar)
   ========================================================================== */

.ui-actionbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--ui-sp-2);
  padding: 0 var(--ui-sp-3);
  box-shadow: var(--ui-shadow-md);
  box-sizing: border-box;
}

.ui-actionbar a {
  text-decoration: none;
}

.ui-actionbar__spacer {
  flex-grow: 1;
}

/* ==========================================================================
   15. Component 13: Summary Tiles & Point Strip (ui-tiles, ui-point)
   ========================================================================== */

.ui-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ui-sp-3);
}

.ui-tiles--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-point__title-sub { color: var(--ui-text-3); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-regular); }
.ui-flow__connector-text { color: var(--ui-text-3); font-size: var(--ui-fs-12); line-height: 1.4; }
.ui-anchors__guide { color: var(--ui-text-3); font-size: var(--ui-fs-12); }
.ui-kv__span4 { grid-column: span 4; }
.ui-license-list { padding-left: var(--ui-sp-5); margin: var(--ui-sp-2) 0; }
.ui-lock { color: var(--ui-text-3); font-size: var(--ui-fs-12); }
.ui-participants-panel { padding: var(--ui-sp-3); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); }
.ui-help-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ui-border); color: var(--ui-text-3); font-size: var(--ui-fs-12); }
.ui-text { color: var(--ui-text); }
.ui-fs-16 { font-size: var(--ui-fs-16); }

@media (max-width: 767px) {
  .ui-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ui-tile {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  padding: var(--ui-sp-3) var(--ui-sp-4);
  box-sizing: border-box;
}

.ui-tile__label {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
}

.ui-tile__value,
.ui-tile__val {
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin-top: 4px;
}

.ui-tile__value--two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ui-tile__sub {
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-urgent-text);
  margin-top: 2px;
}

.ui-tile--urgent {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-text);
}

.ui-tile--urgent .ui-tile__label {
  color: var(--ui-danger-text);
}

.ui-tile--urgent .ui-tile__value,
.ui-tile--urgent .ui-tile__val {
  color: var(--ui-urgent-text);
}

.ui-point {
  border-radius: var(--ui-r-lg);
  background: var(--ui-point-bg);
  border: 1px solid var(--ui-point-border);
  padding: var(--ui-sp-4) var(--ui-sp-5);
  box-sizing: border-box;
  margin-top: var(--ui-sp-5);
}

.ui-point__head,
.ui-point__title {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-point-title);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ui-sp-3);
}

.ui-point__sub {
  font-size: var(--ui-fs-12);
  color: var(--ui-text-3);
}

.ui-point__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-sp-3);
}

.ui-point__item {
  display: flex;
  flex-direction: column;
}

.ui-point__label,
.ui-point__metric-k {
  font-size: var(--ui-fs-12);
  color: var(--ui-text-3);
}

.ui-point__value,
.ui-point__metric-v {
  font-size: var(--ui-fs-20);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin-top: 2px;
}

.ui-point__sub,
.ui-point__metric-s {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-top: 2px;
}

/* ==========================================================================
   16. Component 14: Lifecycle Flow & Progress Steps (ui-flow, ui-steps)
   ========================================================================== */

.ui-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
}

.ui-flow__step {
  flex: 1;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  padding: var(--ui-sp-2) var(--ui-sp-3);
  background: var(--ui-surface);
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ui-flow__step-sub {
  display: block;
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  font-weight: var(--ui-fw-semibold);
  margin-bottom: 2px;
}

.ui-flow__step-name {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
}

.ui-flow__step.is-here,
.ui-flow__step.is-current {
  border-color: var(--ui-accent);
  background: var(--ui-accent-weak);
  color: var(--ui-accent-strong);
}

.ui-flow__step.is-here .ui-flow__step-name,
.ui-flow__step.is-current .ui-flow__step-name {
  color: var(--ui-accent-strong);
}

.ui-flow__step.is-none,
.ui-flow__step.is-upcoming {
  background: var(--ui-surface-2);
  color: var(--ui-muted);
}

.ui-flow__step.is-none .ui-flow__step-name,
.ui-flow__step.is-upcoming .ui-flow__step-name {
  color: var(--ui-muted);
}

.ui-flow__connector,
.ui-flow__arrow {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-14);
  color: var(--ui-muted);
  text-align: center;
  flex-shrink: 0;
}

.ui-steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.ui-steps__item,
.ui-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  text-align: center;
  flex-shrink: 0;
}

.ui-steps__dot,
.ui-step__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ui-control-border);
  background: var(--ui-surface);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-12);
  line-height: 1;
}

.ui-steps__item.is-done .ui-steps__dot,
.ui-step__dot.is-done {
  background: var(--ui-control-border-hover);
  border-color: var(--ui-control-border-hover);
  color: var(--ui-surface);
}

.ui-steps__item.is-current .ui-steps__dot,
.ui-step__dot.is-now {
  width: 20px;
  height: 20px;
  border: 4px solid var(--ui-accent);
  background: var(--ui-surface);
}

.ui-steps__name {
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-medium);
  color: var(--ui-text-2);
}

.ui-steps__date {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
}

.ui-steps__line {
  flex: 1;
  height: 2px;
  background: var(--ui-border);
  position: relative;
  margin: 0 var(--ui-sp-2);
}

.ui-steps__line.is-done {
  background: var(--ui-control-border-hover);
}

.ui-steps__duration {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--ui-fs-12);
  color: var(--ui-accent);
  font-weight: var(--ui-fw-semibold);
  white-space: nowrap;
}

/* ==========================================================================
   17. Component 15: Section Anchor Tabs (ui-anchors)
   ========================================================================== */

.ui-anchors {
  display: inline-flex;
  gap: 4px;
  background: var(--ui-border-2);
  border-radius: var(--ui-r-lg);
  padding: 4px;
  box-sizing: border-box;
}

.ui-anchors a,
.ui-anchors__item,
.ui-anchor-tab {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-3);
  padding: 7px var(--ui-sp-3);
  border-radius: var(--ui-r-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}

.ui-anchors a:hover,
.ui-anchors__item:hover,
.ui-anchor-tab:hover {
  color: var(--ui-text);
}

.ui-anchors a.is-active,
.ui-anchors a.on,
.ui-anchors__item.is-active,
.ui-anchors__item.on,
.ui-anchor-tab.is-active {
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}

/* ==========================================================================
   18. Component 16: Key-Value Grid (ui-kv)
   ========================================================================== */

.ui-kv {
  display: block;
  border-top: 1px solid var(--ui-border);
  box-sizing: border-box;
}

.ui-kv__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  border-bottom: 1px solid var(--ui-border-2);
  box-sizing: border-box;
}

.ui-kv__key,
.ui-kv__cell--label {
  padding: 10px var(--ui-sp-3);
  font-size: var(--ui-fs-13);
  background: var(--ui-surface-2);
  color: var(--ui-text-3);
  font-weight: var(--ui-fw-medium);
  border-right: 1px solid var(--ui-border-2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.ui-kv__value,
.ui-kv__cell--val {
  padding: 10px var(--ui-sp-3);
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ui-sp-2);
  word-break: break-word;
}

.ui-kv__value:not(:last-child) {
  border-right: 1px solid var(--ui-border-2);
}

.ui-kv__empty,
.ui-kv__empty--absent {
  color: var(--ui-muted);
}

.ui-kv__pending,
.ui-kv__empty--pending {
  color: var(--ui-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   19. Component 17: List Data Table (ui-table)
   ========================================================================== */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-fs-13);
  box-sizing: border-box;
}

.ui-table th {
  background: var(--ui-surface-2);
  color: var(--ui-text-3);
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  padding: 11px var(--ui-sp-2);
  border-bottom: 1px solid var(--ui-border);
  text-align: left;
  white-space: nowrap;
}

.ui-table th.is-sorted {
  background: var(--ui-accent-weak);
  color: var(--ui-accent-strong);
}

.ui-table th.is-sortable,
.ui-table th.ui-table__th--sortable {
  cursor: pointer;
  user-select: none;
}

.ui-table td {
  padding: 12px var(--ui-sp-2);
  border-bottom: 1px solid var(--ui-border-2);
  color: var(--ui-text);
  vertical-align: middle;
}

.ui-table tr:hover td {
  background: var(--ui-surface-hover);
}

.ui-table tr.is-selected td {
  background: var(--ui-accent-weak);
}

.ui-table__title {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
  line-height: 1.4;
}

.ui-table__sub {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-top: 2px;
}

.ui-table__sort-icon {
  margin-left: 4px;
  font-size: var(--ui-fs-12);
}

/* ==========================================================================
   20. Component 18: Filter Panel & Rows (ui-filter)
   ========================================================================== */

.ui-filter {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  overflow: hidden;
  box-sizing: border-box;
}

.ui-filter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--ui-border-2);
}

.ui-filter__row:last-child {
  border-bottom: 0;
}

.ui-filter__row--full {
  grid-template-columns: 1fr;
}

.ui-filter__cell {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--ui-sp-3);
  align-items: center;
  padding: 8px var(--ui-sp-4);
  box-sizing: border-box;
}

.ui-filter__cell + .ui-filter__cell {
  border-left: 1px solid var(--ui-border-2);
}

.ui-filter__label {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ui-filter__cell--start {
  align-items: start;
}

.ui-filter__label {
  padding-top: 7px;
}

.ui-filter__cell:not(.ui-filter__cell--start) .ui-filter__label {
  padding-top: 0;
}

.ui-filter__quick {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 8px;
  font-size: var(--ui-fs-12);
  color: var(--ui-text-3);
  border-radius: 6px;
  background: var(--ui-surface-hover);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.ui-filter__quick:hover {
  color: var(--ui-accent-strong);
}

.ui-filter__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ui-input {
  height: 32px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-md);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-sizing: border-box;
  font-family: inherit;
}

.ui-input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

/* Step 605-A: 목록 페이지 틀 · 검색 줄 · 표 래퍼 */
.ui-page {
  box-sizing: border-box;
  min-width: 1270px;
  max-width: 1440px;
  margin: 0 auto;
  /* layout container my-4(24px) + 여기 8px ≈ 시안 머리~제목 32px */
  padding: 8px var(--ui-sp-6) var(--ui-sp-10);
}

.ui-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ui-sp-4);
  margin: 0 0 14px;
}

.ui-filter__cell--full {
  grid-column: 1 / -1;
}

.ui-select--narrow {
  max-width: 280px;
}

.ui-filter__basis {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 2px;
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-2);
  white-space: nowrap;
}

.ui-filter__sep {
  color: var(--ui-muted);
}

.ui-filter__inline--switches {
  padding-top: 5px;
  gap: 26px;
}

.ui-applied--after-search {
  margin-top: 14px;
}

.ui-resultbar__help {
  height: 30px;
  font-size: var(--ui-fs-13);
  list-style: none;
  cursor: pointer;
}

.ui-resultbar__help-body {
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  line-height: 1.6;
}

.ui-table__sort-link {
  color: inherit;
  text-decoration: none;
}

.ui-table__title-link {
  color: inherit;
  text-decoration: none;
}

.ui-table__badge-gap {
  margin-right: 6px;
}

.ui-table__sub {
  display: block;
  color: var(--ui-muted);
}

.ui-table__strong {
  font-weight: var(--ui-fw-semibold);
}

.ui-table__cell-center {
  text-align: center;
}

.ui-table__empty {
  text-align: center;
  padding: 40px 16px;
}

.ui-table__empty .ui-btn {
  margin-top: 12px;
}

.ui-page__title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  line-height: 1.2;
}

.ui-page__meta {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-hint {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ui-control-border-hover);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-3);
  cursor: help;
  flex-shrink: 0;
}

.ui-searchbar {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  padding: 8px 12px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  margin-top: 8px;
}

.ui-searchbar__input {
  height: 40px;
  flex: 1 1 auto;
  min-width: 160px;
  width: auto;
}

.ui-searchbar__btn,
.ui-searchbar .ui-btn {
  height: 40px;
  flex: 0 0 auto;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Step 605-A1b: 조건저장 트리거가 width:100% 로 검색칸을 밀어내지 않게 */
.ui-searchbar .ps-savedfilter-trigger {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ui-r-md);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-searchbar .ps-savedfilter-trigger-label {
  flex: none;
  text-align: center;
  white-space: nowrap;
}

.ui-searchbar .ps-savedfilter-trigger-count {
  flex: none;
}

.ui-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-sp-3);
  margin: 10px 0 8px;
  flex-wrap: wrap;
}

.ui-resultbar__count {
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
}

.ui-resultbar__count em {
  color: var(--ui-accent);
  font-style: normal;
}

.ui-table-wrap {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  overflow: auto;
  box-sizing: border-box;
}

.ui-table--bid {
  min-width: 1180px;
  table-layout: fixed;
}

.ui-table--bid th:nth-child(1),
.ui-table--bid td:nth-child(1) {
  width: auto;
}

.ui-table--bid th:nth-child(2),
.ui-table--bid td:nth-child(2) { width: 116px; }
.ui-table--bid th:nth-child(3),
.ui-table--bid td:nth-child(3) { width: 112px; }
.ui-table--bid th:nth-child(4),
.ui-table--bid td:nth-child(4) { width: 104px; }
.ui-table--bid th:nth-child(5),
.ui-table--bid td:nth-child(5) { width: 84px; }
.ui-table--bid th:nth-child(6),
.ui-table--bid td:nth-child(6) { width: 96px; }
.ui-table--bid th:nth-child(7),
.ui-table--bid td:nth-child(7) { width: 96px; }
.ui-table--bid th:nth-child(8),
.ui-table--bid td:nth-child(8) { width: 118px; }
.ui-table--bid th:nth-child(9),
.ui-table--bid td:nth-child(9) { width: 64px; }

.ui-table--bid td { vertical-align: middle; }
.ui-table__cell-middle,
.ui-table__conditions { vertical-align: middle; }
.ui-table--bid td.ui-table__favorite { padding: 12px; text-align: center; }
.ui-resultbar__tag-help { flex: none; }
.ui-tip--right > .ui-tip__popover { left: auto; right: 0; }

/* Step 619: saved condition summaries and controls share stable table columns. */
.ps-savedfilter-table { table-layout: fixed; }
.ps-savedfilter-table th:nth-child(1) { width: 88px; }
.ps-savedfilter-table th:nth-child(2) { width: 116px; }
.ps-savedfilter-table th:nth-child(4) { width: 72px; }
.ps-savedfilter-table th:nth-child(5) { width: 164px; }
.ps-savedfilter-table td { vertical-align: middle; }
.ui-savedfilter__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ui-savedfilter__actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ui-savedfilter__actions > button { margin-right: 0; }

/* Step 616-B: notification inbox */
.ui-header__badge-count { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--ui-danger-text); color: var(--ui-accent-text-on); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-bold); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ui-inbox { position: relative; min-height: 760px; padding: 24px 0 48px; }
.ui-inbox__crumb { color: var(--ui-text-3); font-size: var(--ui-fs-13); margin-bottom: 8px; }
.ui-inbox__heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.ui-inbox__title { margin: 0; font-size: var(--ui-fs-28); color: var(--ui-text); }
.ui-inbox__subtitle { margin: 6px 0 0; color: var(--ui-text-3); font-size: var(--ui-fs-13); }
.ui-inbox__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-inbox__tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--ui-border); }
.ui-inbox__tab { border: 0; background: transparent; color: var(--ui-text-3); padding: 12px 18px; font: inherit; font-size: var(--ui-fs-15); font-weight: var(--ui-fw-semibold); cursor: pointer; }
.ui-inbox__tab.is-active { color: var(--ui-text); box-shadow: inset 0 -3px var(--ui-accent); }
.ui-inbox__tab b { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; align-items: center; justify-content: center; background: var(--ui-accent); color: var(--ui-accent-text-on); font-size: var(--ui-fs-12); }
.ui-inbox__tab-help { margin: 0 0 0 auto; max-width: 48%; color: var(--ui-text-3); font-size: var(--ui-fs-12); line-height: 1.45; text-align: right; }
.ui-inbox__filters { width: calc(100% - 320px); margin: 14px 0 10px; }
.ui-inbox__search-cell { display: flex; align-items: center; gap: 10px; }
.ui-inbox__search { flex: 1; min-width: 0; }
.ui-inbox__bizchips { flex-wrap: nowrap; }
.ui-inbox__applied { width: calc(100% - 320px); margin: 8px 0 12px; }
.ui-inbox__toolbar { width: calc(100% - 320px); display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0; }
.ui-segmented { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--ui-r-md); background: var(--ui-surface-2); }
.ui-segmented button { border: 0; background: transparent; color: var(--ui-text-3); padding: 7px 12px; border-radius: var(--ui-r-sm); font: inherit; font-size: var(--ui-fs-13); cursor: pointer; }
.ui-segmented button.is-active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sm); }
.is-hidden { display: none !important; }
.ui-inbox__list { margin-right: 320px; }
.ui-inbox__day { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; color: var(--ui-text-2); font-size: var(--ui-fs-13); }
.ui-inbox__day::after { content: ''; height: 1px; flex: 1; background: var(--ui-border); }
.ui-inbox__card { overflow: hidden; }
.ui-inbox__row { width: 100%; display: grid; grid-template-columns: 14px 130px minmax(0,1fr) 300px 96px; gap: 14px; align-items: center; padding: 14px 18px; border: 0; border-top: 1px solid var(--ui-border-2); background: transparent; color: var(--ui-text); text-align: left; font: inherit; cursor: pointer; }
.ui-inbox__row:first-child { border-top: 0; }
.ui-inbox__row.is-unread { background: color-mix(in srgb, var(--ui-accent) 4%, var(--ui-surface)); }
.ui-inbox__row:hover { background: var(--ui-surface-2); }
.ui-inbox__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.ui-inbox__row.is-unread .ui-inbox__dot { background: var(--ui-accent); }
.ui-inbox__event { display: inline-flex; align-items: center; justify-self: start; width: max-content; min-height: 24px; padding: 0 9px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-bold); white-space: nowrap; }
.ui-inbox__event--result,.ui-inbox__event--opening_result { background: var(--ui-accent-weak); color: var(--ui-accent-strong); }
.ui-inbox__event--result_late { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
.ui-inbox__event--award { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-inbox__event--today { background: var(--ui-info-bg); color: var(--ui-info-text); }
.ui-inbox__event--closed_no_result { background: var(--ui-surface-2); color: var(--ui-text-3); }
.ui-inbox__main { min-width: 0; }
.ui-inbox__main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-15); }
.ui-inbox__main small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-3); font-size: var(--ui-fs-12); }
.ui-bizdiv { display: inline-flex; align-items: center; border: 1px solid; border-radius: var(--ui-r-sm); padding: 2px 6px; font-size: var(--ui-fs-12); font-style: normal; font-weight: var(--ui-fw-semibold); }
.ui-bizdiv--goods { background: var(--ui-bizdiv-goods-bg); color: var(--ui-bizdiv-goods-text); border-color: var(--ui-bizdiv-goods-border); }
.ui-bizdiv--cnstwk { background: var(--ui-bizdiv-cnstwk-bg); color: var(--ui-bizdiv-cnstwk-text); border-color: var(--ui-bizdiv-cnstwk-border); }
.ui-bizdiv--servc { background: var(--ui-bizdiv-servc-bg); color: var(--ui-bizdiv-servc-text); border-color: var(--ui-bizdiv-servc-border); }
.ui-inbox__division { margin-right: 6px; }
.ui-inbox__result { color: var(--ui-text-2); font-size: var(--ui-fs-13); line-height: 1.45; }
.ui-inbox__result-line { display: block; }
.ui-inbox__result-sub { display: block; margin-top: 2px; color: var(--ui-text-3); }
.ui-inbox__result-number { display: inline-block; margin-left: 3px; font-variant-numeric: tabular-nums; }
.ui-inbox__participant { color: var(--ui-info-text); font-style: normal; font-weight: var(--ui-fw-bold); }
.ui-inbox__amount { color: var(--ui-text); font-weight: var(--ui-fw-semibold); font-variant-numeric: tabular-nums; }
.ui-inbox__winner { color: var(--ui-text) !important; font-size: var(--ui-fs-15); font-weight: var(--ui-fw-bold); }
.ui-inbox__rank-label, .ui-inbox__rate-label { color: var(--ui-text-3); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-regular); }
.ui-inbox__result strong { color: var(--ui-accent-strong); font-variant-numeric: tabular-nums; }
.ui-inbox__result--danger { color: var(--ui-danger-text); }
.ui-inbox__result small { color: var(--ui-text-3); }
.ui-inbox__time { color: var(--ui-text-3); font-size: var(--ui-fs-12); line-height: 1.5; text-align: right; }
.ui-inbox__time small { display: block; margin-top: 3px; color: var(--ui-text-3); white-space: nowrap; }
.ui-inbox__side { position: absolute; top: 224px; right: 0; width: 300px; display: grid; gap: 12px; }
.ui-inbox__side-card { padding: 16px 18px; }
.ui-inbox__side-card h3 { margin: 0 0 10px; font-size: var(--ui-fs-14); }
.ui-inbox__side-card p { margin: 0; color: var(--ui-text-2); font-size: var(--ui-fs-13); line-height: 1.75; }
.ui-inbox__side-card a { display: inline-block; margin-top: 8px; color: var(--ui-accent-strong); font-size: var(--ui-fs-13); }
.ui-inbox__more { display: block; margin: 16px auto 0; }
@media (max-width: 1350px) { .ui-inbox__filters, .ui-inbox__applied, .ui-inbox__toolbar { width: 100%; } .ui-inbox__side { position: static; width: auto; margin-top: 20px; } .ui-inbox__list { margin-right: 0; } }
@media (max-width: 700px) { .ui-inbox { padding: 16px 0 110px; } .ui-inbox__heading { display: block; } .ui-inbox__title { font-size: var(--ui-fs-24); } .ui-inbox__actions { margin-top: 12px; } .ui-inbox__actions .ui-btn { font-size: var(--ui-fs-12); padding: 7px 9px; } .ui-inbox__tabs { overflow-x: auto; } .ui-inbox__tab-help { display: none; } .ui-inbox__filters, .ui-inbox__applied, .ui-inbox__toolbar { width: 100%; } .ui-inbox__filters .ui-filter__row { display: block; } .ui-inbox__filters .ui-filter__cell { display: block; padding: 8px 12px; } .ui-inbox__filters .ui-filter__label { display: block; padding: 0; margin-bottom: 6px; white-space: nowrap; } .ui-inbox__search-cell { display: flex !important; flex-wrap: nowrap; align-items: center; } .ui-inbox__search-cell .ui-filter__label { margin: 0; } .ui-inbox__search-cell .ui-btn { flex: 0 0 auto; } .ui-inbox__bizchips { overflow: visible; flex-wrap: nowrap; padding-bottom: 2px; } .ui-inbox__bizchips .ui-chip { flex: 1 1 0; justify-content: center; min-width: 0; } .ui-inbox__filters [data-alert-days] { display: flex; width: 100%; } .ui-inbox__filters [data-alert-days] button { flex: 1 1 0; min-width: 0; white-space: nowrap; } .ui-inbox__toolbar { display: block; } .ui-inbox__toolbar .ui-segmented { max-width: 100%; overflow-x: auto; margin-bottom: 10px; } .ui-inbox__row { grid-template-columns: 10px 1fr 22px; gap: 8px; padding: 13px 12px; } .ui-inbox__event { grid-column: 2; grid-row: 1; justify-self: start; } .ui-inbox__main { grid-column: 2; grid-row: 2; } .ui-inbox__result { grid-column: 2; grid-row: 3; } .ui-inbox__time { grid-column: 2; grid-row: 4; text-align: left; } .ui-inbox__row::after { content: '›'; grid-column: 3; grid-row: 1 / span 4; align-self: center; color: var(--ui-text-3); font-size: 24px; } .ui-inbox__side { display: none; } }
.nt-settings-inbox-link { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--ui-surface-2); color: var(--ui-text-2); font-size: var(--ui-fs-13); }
.nt-settings-inbox-link a { margin-left: 8px; color: var(--ui-accent-strong); font-weight: var(--ui-fw-semibold); }

.ui-table__dday {
  font-weight: var(--ui-fw-bold);
  font-size: var(--ui-fs-15);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

.ui-table__dday.is-urgent {
  color: var(--ui-urgent-text);
}

.ui-table td.ui-table__cell-top {
  vertical-align: top;
}

.ui-empty {
  color: var(--ui-muted);
}

.ui-pending {
  color: var(--ui-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ui-tabs--bid {
  margin-bottom: 0;
}

.ui-tabs + .ui-tabs {
  margin-top: var(--ui-sp-2);
}

.ui-filter + .ui-searchbar,
.ui-tabs + .ui-filter {
  margin-top: 10px;
}

.ui-page__head {
  margin-bottom: 10px;
}

/* ==========================================================================
   21. Component 19: Header, GNB & Mega Menu (ui-header, ui-gnb, ui-megamenu)
   ========================================================================== */

.ui-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ui-surface);
  box-sizing: border-box;
  font-family: inherit;
}

.ui-header__top {
  height: var(--ui-header-top-height);
  background: var(--ui-surface);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--ui-sp-6);
  border-bottom: 1px solid var(--ui-border-2);
  box-sizing: border-box;
}

.ui-header__brand,
.ui-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--ui-fw-bold);
  font-size: var(--ui-fs-18);
  color: var(--ui-text);
  text-decoration: none;
}

.ui-header__logo-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ui-accent);
  color: var(--ui-accent-text-on);
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
}

.ui-header__brand-name {
  font-size: var(--ui-fs-18);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
}

.ui-header__search-form {
  margin: 0;
}

.ui-header__search-wrap {
  width: 440px;
  max-width: 100%;
  height: 40px;
  border-radius: 10px;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: var(--ui-fs-13);
  color: var(--ui-muted);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.ui-header__search-wrap:focus-within {
  border-color: var(--ui-accent);
}

.ui-header__search-input {
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
  width: 100%;
}

.ui-header__search-input::placeholder {
  color: var(--ui-muted);
}

.ui-header__search-wrap svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--ui-muted);
}

.ui-header__spacer {
  flex-grow: 1;
}

.ui-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-3);
  margin-left: auto;
}

.ui-header__icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ui-text-3);
  font-family: inherit;
  font-size: var(--ui-fs-14);
  box-sizing: border-box;
  transition: all 0.15s ease;
  text-decoration: none;
  position: relative;
}

.ui-header__icon-btn:hover {
  border-color: var(--ui-control-border-hover);
  color: var(--ui-text);
}

.ui-header__icon-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ui-header__icon-btn.is-active,
.ui-header__icon-btn.on {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.ui-header__badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-danger-text);
}

.ui-header__user-wrap {
  position: relative;
}

.ui-header__user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.ui-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: var(--ui-accent-text-on);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-bold);
  flex-shrink: 0;
}

.ui-header__user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 160px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-pop);
  padding: var(--ui-sp-2);
  display: none;
  z-index: 1010;
  box-sizing: border-box;
}

.ui-header__user-dropdown.is-open {
  display: block;
}

.ui-header__user-item {
  display: block;
  padding: 8px 12px;
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  text-decoration: none;
  border-radius: var(--ui-r-sm);
  transition: background 0.15s ease;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.ui-header__user-item:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.ui-header__login-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--ui-accent);
  color: var(--ui-accent-text-on);
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: background 0.15s ease;
}

.ui-header__login-btn:hover {
  background: var(--ui-accent-hover);
  color: var(--ui-accent-text-on);
}

/* Header Row 2: GNB */
.ui-gnb {
  height: var(--ui-header-nav-height);
  background: var(--ui-surface);
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0 var(--ui-sp-6);
  border-bottom: 1px solid var(--ui-border);
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-2);
  box-sizing: border-box;
  position: relative;
}

.ui-gnb__item {
  height: 52px;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.ui-gnb__link {
  color: var(--ui-text-2);
  text-decoration: none;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
  cursor: pointer;
}

.ui-gnb__link:hover {
  color: var(--ui-accent);
}

.ui-gnb__item.is-active > .ui-gnb__link,
.ui-gnb__link.is-active {
  color: var(--ui-accent);
  box-shadow: inset 0 -3px 0 var(--ui-accent);
}

.ui-gnb__lock {
  font-size: var(--ui-fs-12);
  opacity: 0.6;
}

.ui-gnb__spacer {
  flex-grow: 1;
}

.ui-gnb__all-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ui-gnb__all-btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.ui-gnb__all-btn.is-active {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* GNB 2-level panel — JS .is-open only (Step 610: one panel, motion) */
.ui-gnb__panel {
  position: absolute;
  left: 0;
  top: 52px;
  min-width: 240px;
  width: max-content;
  max-width: min(420px, 90vw);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-pop);
  padding: var(--ui-sp-3);
  z-index: 1000;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out,
    visibility 0s linear 100ms;
}

.ui-gnb__panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.ui-gnb__item.is-open .ui-gnb__panel,
.ui-gnb__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out,
    visibility 0s linear 0s;
}

.ui-gnb__panel-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-gnb__panel-title {
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-muted);
  padding: 4px 8px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--ui-border-2);
  white-space: nowrap;
}

.ui-gnb__panel-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--ui-r-sm);
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
  text-decoration: none;
  font-weight: var(--ui-fw-regular);
  transition: background 0.15s ease;
  white-space: nowrap;
}

.ui-gnb__panel-link:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.ui-gnb__panel-link.is-current {
  background: var(--ui-accent-weak);
  color: var(--ui-accent-strong);
  font-weight: var(--ui-fw-semibold);
}

/* Mega Menu (전체 메뉴 ≡) */
.ui-megamenu {
  position: absolute;
  top: var(--ui-header-height); /* Row 1 (64px) + Row 2 (52px) */
  left: 0;
  right: 0;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 16px 32px rgba(28, 26, 36, 0.10);
  padding: 28px 48px 22px;
  z-index: 1050;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out,
    visibility 0s linear 100ms;
}

.ui-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out,
    visibility 0s linear 0s;
}

.ui-megamenu__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.ui-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 260px;
  gap: 0;
}

.ui-megamenu__col {
  padding: 0 18px;
  border-right: 1px solid var(--ui-border-2);
  box-sizing: border-box;
}

.ui-megamenu__col:nth-child(6) {
  border-right: 0;
}

.ui-megamenu__cat {
  margin: 0 0 14px;
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border-2);
  color: var(--ui-text);
}

.ui-megamenu__cat small {
  font-size: var(--ui-fs-12);
  color: var(--ui-accent);
  font-weight: var(--ui-fw-bold);
}

.ui-megamenu__link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--ui-fs-14);
  padding: 7px 0;
  color: var(--ui-text-2);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ui-megamenu__link:hover {
  color: var(--ui-accent);
}

.ui-megamenu__link-title {
  font-size: var(--ui-fs-14);
  color: inherit;
}

.ui-megamenu__link-sub,
.ui-megamenu__link small,
.ui-megamenu__link span.sub,
.ui-megamenu__link > span:not(.ui-megamenu__link-title) {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-left: 4px;
}

.ui-megamenu__side {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ui-megamenu__promo {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  padding: 14px 16px;
  font-size: var(--ui-fs-13);
  color: var(--ui-text-3);
  line-height: 1.55;
  background: var(--ui-surface-2);
}

.ui-megamenu__promo b {
  display: block;
  font-size: var(--ui-fs-14);
  color: var(--ui-text);
  margin-bottom: 4px;
}

.ui-megamenu__promo a {
  color: var(--ui-accent);
  text-decoration: none;
}

.ui-megamenu__promo a:hover {
  text-decoration: underline;
}

.ui-megamenu__tools {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-2);
  font-size: var(--ui-fs-13);
  color: var(--ui-muted);
  flex-wrap: wrap;
}

.ui-megamenu__tool-pill {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-md);
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-2);
  font-weight: var(--ui-fw-medium);
  background: var(--ui-surface);
  text-decoration: none;
  font-size: var(--ui-fs-13);
  transition: all 0.15s ease;
}

.ui-megamenu__tool-pill:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* Mobile Header (ui-header-mobile) */
.ui-header-mobile {
  height: 56px;
  background: var(--ui-surface);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.ui-header-mobile__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.ui-header-mobile__logo-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ui-accent);
  color: var(--ui-accent-text-on);
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
}

.ui-header-mobile__search {
  flex-grow: 1;
  height: 36px;
  border-radius: 10px;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: var(--ui-fs-13);
  color: var(--ui-muted);
  text-decoration: none;
  box-sizing: border-box;
}

.ui-header-mobile__search svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--ui-muted);
}

.ui-header-mobile__menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-15);
  color: var(--ui-text-2);
  cursor: pointer;
  box-sizing: border-box;
}

.ui-header-mobile__menu-btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* ==========================================================================
   22. Component 20: Mobile Bottom Sheet (ui-sheet)
   ========================================================================== */

.ui-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ui-backdrop);
  z-index: 2500;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 100ms ease-out,
    visibility 0s linear 100ms;
}

.ui-sheet-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 150ms ease-out,
    visibility 0s linear 0s;
}

.ui-sheet {
  width: 100%;
  max-height: 85vh;
  background: var(--ui-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--ui-shadow-sheet);
  padding: var(--ui-sp-3) var(--ui-sp-4) var(--ui-sp-6);
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-sheet-backdrop.is-open .ui-sheet {
  transform: translateY(0);
}

@keyframes ui-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.ui-sheet__handle,
.ui-sheet__grab {
  width: 40px;
  height: 5px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-control-border);
  margin: 0 auto var(--ui-sp-3);
}

.ui-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ui-sp-3);
}

.ui-sheet__title {
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin: 0;
}

.ui-sheet__close {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--ui-fs-16);
  color: var(--ui-muted);
  cursor: pointer;
}

.ui-sheet__body {
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
}

/* ==========================================================================
   23. Component 21: Bid Calculator Frame (ui-calc)
   ========================================================================== */

.ui-calc {
  border: 2px solid var(--ui-accent);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  padding: var(--ui-sp-4) var(--ui-sp-5);
  box-sizing: border-box;
}

.ui-calc__header {
  margin-bottom: var(--ui-sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-sp-2);
}

.ui-calc__badge { color: var(--ui-accent-strong); background: var(--ui-accent-weak); border-radius: var(--ui-r-pill); padding: var(--ui-sp-1) var(--ui-sp-2); font-size: var(--ui-fs-12); }

.ui-calc__title {
  margin: 0 0 var(--ui-sp-2);
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-calc__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ui-sp-2) 0;
  border-bottom: 1px solid var(--ui-border-2);
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
}

.ui-calc__row-label {
  font-size: var(--ui-fs-13);
  color: var(--ui-text-2);
}

.ui-calc__row-val {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
}

.ui-calc__field {
  margin: var(--ui-sp-3) 0;
}

.ui-calc__field-label {
  display: block;
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-2);
  margin-bottom: var(--ui-sp-1);
}

.ui-calc__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-2);
  height: 40px;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-r-md);
  padding: 0 var(--ui-sp-3);
  margin: var(--ui-sp-1) 0;
  box-sizing: border-box;
  background: var(--ui-surface);
}

.ui-calc__input {
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-bold);
  width: 100%;
  font-family: inherit;
  outline: none;
}

.ui-calc__unit {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent);
}

.ui-calc__result {
  margin-top: var(--ui-sp-3);
  background: var(--ui-point-bg);
  border-radius: var(--ui-r-md);
  padding: var(--ui-sp-3) var(--ui-sp-4);
  box-sizing: border-box;
}

.ui-calc__result-label {
  font-size: var(--ui-fs-12);
  color: var(--ui-text-3);
  margin-bottom: 2px;
}

.ui-calc__result-val {
  font-size: var(--ui-fs-24);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent-strong);
}

.ui-calc__result-sub {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-top: 2px;
}

.ui-calc__result-val + .ui-calc__result-sub { white-space: nowrap; }
.ui-calc__result-sub .ui-em--xl { font-size: var(--ui-fs-16); }

/* Step 610: reduced motion — open/close without fade/slide */
@media (prefers-reduced-motion: reduce) {
  .ui-gnb__panel,
  .ui-gnb__item.is-open .ui-gnb__panel,
  .ui-gnb__panel.is-open,
  .ui-megamenu,
  .ui-megamenu.is-open,
  .ui-sheet-backdrop,
  .ui-sheet-backdrop.is-open,
  .ui-sheet,
  .ui-sheet-backdrop.is-open .ui-sheet {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   24. Responsive Media Queries
   ========================================================================== */

@media (max-width: 768px) {
  .ui-filter__row {
    grid-template-columns: 1fr;
  }
  .ui-filter__cell + .ui-filter__cell {
    border-left: 0;
    border-top: 1px solid var(--ui-border-2);
  }
  .ui-kv__row {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .ui-kv__key:nth-child(3) {
    border-top: 1px solid var(--ui-border-2);
  }
  .ui-kv__value:nth-child(2) {
    border-right: 0;
  }
  .ui-point__grid {
    grid-template-columns: 1fr 1fr;
  }
  .ui-megamenu__grid,
  .ui-megamenu .cols {
    grid-template-columns: 1fr;
    gap: var(--ui-sp-4);
  }
  .ui-megamenu__col,
  .ui-megamenu .col {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border-2);
    padding-bottom: var(--ui-sp-3);
  }
}
/* Step 605-A2-1: mobile list layout */
.ui-mobile-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--ui-sp-3) var(--ui-sp-6);
}

.ui-mobile-list__toolbar,
.ui-mobile-list__search {
  display: flex;
  gap: var(--ui-sp-2);
  align-items: center;
  margin: var(--ui-sp-3) 0;
}

.ui-mobile-list__toolbar {
  flex-wrap: wrap;
}

.ui-mobile-list__toolbar .ui-select {
  flex: 1;
}

.ui-mobile-list__toolbar .ps-savedfilter-trigger {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ui-mobile-list__toolbar .ps-savedfilter-trigger-label {
  flex: none;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ps-savedfilter-backdrop,
  .ps-savedfilter-backdrop.is-open {
    align-items: flex-end;
    justify-content: stretch;
  }
  .ps-savedfilter-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 18px 18px 0 0;
  }
  .ps-savedfilter-head,
  .ps-savedfilter-body {
    padding: 14px 16px;
  }
  .ps-savedfilter-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.ui-mobile-list__total {
  margin-left: auto;
  color: var(--ui-muted);
  font-size: var(--ui-fs-13);
}

.ui-mobile-list__search .ui-input {
  flex: 1;
  min-width: 0;
}

.ui-mobile-list__cards {
  display: grid;
  gap: var(--ui-sp-2);
}

.ui-mobile-card {
  padding: var(--ui-sp-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}

.ui-mobile-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.ui-mobile-card__favorite {
  padding: var(--ui-sp-1);
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 20px;
}

.ui-mobile-card__title {
  display: block;
  margin-top: var(--ui-sp-2);
  color: var(--ui-text);
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
  line-height: 1.45;
}

.ui-mobile-card__agency,
.ui-mobile-card__kind {
  margin-top: var(--ui-sp-1);
  color: var(--ui-muted);
  font-size: var(--ui-fs-12);
  line-height: 1.4;
}

.ui-mobile-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-sp-2) var(--ui-sp-3);
  margin-top: var(--ui-sp-3);
}

.ui-mobile-card__grid small {
  display: block;
  color: var(--ui-muted);
  font-size: var(--ui-fs-12);
}

.ui-mobile-card__grid strong {
  display: block;
  margin-top: var(--ui-sp-1);
  font-size: var(--ui-fs-13);
  line-height: 1.35;
}

.ui-mobile-list__empty {
  padding: var(--ui-sp-6) var(--ui-sp-3);
  color: var(--ui-muted);
  text-align: center;
}

.ui-applied--mobile {
  overflow-x: auto;
  white-space: nowrap;
}

.ui-sheet__footer {
  display: flex;
  gap: var(--ui-sp-2);
  position: sticky;
  bottom: 0;
  padding-top: var(--ui-sp-2);
  background: var(--ui-surface);
}

.ui-sheet__footer > * {
  flex: 1;
  text-align: center;
}

@media (max-width: 390px) {
  .ui-mobile-list {
    padding-right: var(--ui-sp-2);
    padding-left: var(--ui-sp-2);
  }

  .ui-mobile-card {
    padding: var(--ui-sp-2);
  }

  .ui-mobile-card__grid {
    gap: var(--ui-sp-2);
  }
}

.ui-mobile-sheet__body > .ui-chips > b {
  flex-basis: 100%;
  white-space: nowrap;
}

.ui-mobile-card__title {
  text-decoration: none;
}


.ui-chips > b {
  flex-basis: 100%;
  display: block;
  white-space: nowrap;
}


/* Step 605-A2-3: 모바일 조건 시트 필드 · 카드 머리(D-n) — 지시자 직접 수정 */
.ui-mobile-field {
  display: grid;
  gap: var(--ui-sp-2);
  padding: var(--ui-sp-3) 0;
  border-bottom: 1px solid var(--ui-border);
}

.ui-mobile-field:last-child {
  border-bottom: 0;
}

.ui-mobile-field__label {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
}

.ui-mobile-field__dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--ui-sp-2);
  align-items: center;
}

.ui-mobile-field__dates .ui-input {
  min-width: 0;
}

.ui-mobile-field__switches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-sp-4);
}

.ui-mobile-list__count {
  margin-left: var(--ui-sp-1);
  color: var(--ui-accent);
  font-weight: var(--ui-fw-bold);
}

.ui-mobile-card__title {
  text-decoration: none;
}

.ui-mobile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-sp-1);
}

.ui-mobile-card__right {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-1);
}

.ui-mobile-card__dday {
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

.ui-mobile-card__dday.is-urgent {
  color: var(--ui-urgent-text);
}

.ui-mobile-card__dday.is-closed {
  color: var(--ui-muted);
  font-weight: var(--ui-fw-semibold);
}

.ui-mobile-field__label small {
  margin-left: var(--ui-sp-1);
  font-size: var(--ui-fs-12);
  font-weight: normal;
  color: var(--ui-muted);
}

/* ==========================================================================
   25. Component 23: Detail Screen Frame & Components (Step 606-A)
   ========================================================================== */

.ui-detail {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.ui-detail__breadcrumb {
  font-size: var(--ui-fs-13);
  color: var(--ui-muted);
  margin-bottom: var(--ui-sp-3);
}

.ui-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--ui-sp-4);
  align-items: start;
  margin-top: var(--ui-sp-4);
}

.ui-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--ui-sp-3);
  min-width: 0;
}

.ui-detail__side {
  display: flex;
  flex-direction: column;
  gap: var(--ui-sp-3);
  position: sticky;
  top: calc(var(--ui-header-height) + 64px);
}

.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-sizing: border-box;
}

.ui-sec {
  padding: 18px 20px;
  box-sizing: border-box;
}

.ui-sech {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-2);
  font-size: var(--ui-fs-15);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
  margin-bottom: var(--ui-sp-3);
}

.ui-sech small,
.ui-sech .ui-sech__count {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-regular);
  color: var(--ui-muted);
}

.ui-banner,
.ui-banner--warn {
  margin-top: var(--ui-sp-3);
  padding: 10px 14px;
  border-radius: var(--ui-r-md);
  background: var(--ui-warn-bg);
  border: 1px solid var(--ui-warn-text);
  font-size: var(--ui-fs-13);
  color: var(--ui-warn-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-banner--info {
  margin-top: var(--ui-sp-3);
  padding: 10px 14px;
  border-radius: var(--ui-r-md);
  background: var(--ui-info-bg);
  border: 1px solid var(--ui-info-text);
  font-size: var(--ui-fs-13);
  color: var(--ui-info-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-banner--warn a {
  color: var(--ui-warn-text);
  font-weight: var(--ui-fw-bold);
  text-decoration: underline;
}

.ui-soon {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--ui-r-sm);
  background: var(--ui-neutral-bg);
  color: var(--ui-neutral-text);
  font-size: var(--ui-fs-12);
  font-weight: var(--ui-fw-semibold);
  margin-left: 6px;
  vertical-align: middle;
}

.ui-it {
  display: grid;
  grid-template-columns: 48px 160px minmax(0, 1fr);
  border-top: 1px solid var(--ui-border);
  box-sizing: border-box;
}

.ui-it > div {
  padding: 9px 10px;
  font-size: var(--ui-fs-13);
  border-bottom: 1px solid var(--ui-border-2);
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
  box-sizing: border-box;
}

.ui-it > .ui-it__h,
.ui-it > .h {
  background: var(--ui-surface-2);
  color: var(--ui-text-3);
  font-weight: var(--ui-fw-semibold);
  font-size: var(--ui-fs-12);
}

.ui-memo-area {
  width: 100%;
  height: 80px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: inherit;
  font-size: var(--ui-fs-13);
  padding: var(--ui-sp-2);
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}

.ui-memo-area:focus {
  border-color: var(--ui-accent);
}

.ui-anchors-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--ui-sp-5) 0 var(--ui-sp-3);
  position: sticky;
  top: var(--ui-header-height);
  z-index: 95;
  background: var(--ui-bg);
  padding: var(--ui-sp-2) 0;
}

.ui-kv--grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  border-top: 1px solid var(--ui-border);
  box-sizing: border-box;
}

.ui-kv--grid > div {
  padding: 9px 12px;
  font-size: var(--ui-fs-13);
  border-bottom: 1px solid var(--ui-border-2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ui-text);
}

.ui-kv--grid > .ui-kv__l,
.ui-kv--grid > .l {
  background: var(--ui-surface-2);
  color: var(--ui-text-3);
  font-weight: var(--ui-fw-medium);
}

.ui-kv--grid > .ui-kv__span3 {
  grid-column: span 3;
}

/* Detail Component 23 Utilities and Layout Elements */
.ui-detail__header-card {
  margin-top: 14px;
  padding: 22px 24px;
}

.ui-detail__badge-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-detail__badge-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.ui-detail__badge-status {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (max-width: 600px) {
  .ui-participants-toolbar { grid-template-columns: 1fr; gap: var(--ui-sp-2); }
  .ui-participants-toolbar #participantsFilterCount { text-align: left; }
}

.ui-detail__dday-text {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text-2);
  font-variant-numeric: tabular-nums;
}

.ui-detail__dday-text.is-urgent { color: var(--ui-urgent-text); }

.ui-detail__title {
  margin: 12px 0 4px;
  font-size: var(--ui-fs-24);
  font-weight: var(--ui-fw-bold);
  line-height: 1.35;
  color: var(--ui-text);
}

.ui-detail__meta {
  font-size: var(--ui-fs-13);
  color: var(--ui-muted);
}

.ui-detail__section-title {
  font-size: var(--ui-fs-13);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
}

.ui-detail__section-desc {
  font-weight: normal;
  color: var(--ui-muted);
  font-size: var(--ui-fs-12);
}

.ui-process-guide {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--ui-surface-2);
  border-left: 3px solid var(--ui-accent);
}

.ui-process-guide__title {
  font-weight: var(--ui-fw-bold);
  font-size: var(--ui-fs-13);
  color: var(--ui-text);
}

.ui-process-guide__change {
  margin-top: 4px;
  font-size: var(--ui-fs-12);
  color: var(--ui-accent);
}

.ui-process-guide__body {
  margin-top: 4px;
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  white-space: pre-line;
}

.ui-side-card__title {
  margin: 0 0 10px;
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-text);
}

.ui-side-card__fact {
  font-size: var(--ui-fs-13);
  line-height: 1.75;
  color: var(--ui-text);
}

.ui-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.ui-hint-text {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-top: 8px;
}

.ui-sub-text {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
}

.ui-sub-link {
  font-size: var(--ui-fs-12);
  color: var(--ui-accent);
}

.ui-attachments {
  font-size: var(--ui-fs-13);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-cibl-box {
  background: var(--ui-surface-2);
  padding: 6px 10px;
  border-radius: var(--ui-r-sm);
  margin: 6px 0;
}

.ui-elig {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-elig--ok {
  color: var(--ui-text);
}

.ui-elig--no {
  color: var(--ui-danger-text);
}

.ui-elig--info {
  color: var(--ui-text);
}

.ui-elig__matches {
  margin: 4px 0;
  padding-left: 18px;
  font-size: var(--ui-fs-12);
  color: var(--ui-text);
}

.ui-elig__profile {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  margin-top: 4px;
}

.ui-sibling-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ui-sibling-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-sibling-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-text);
  text-decoration: none;
}

.ui-sibling-link.is-current {
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent);
}

.ui-sibling-ord {
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-accent);
}

.ui-sibling-title {
  color: var(--ui-text-2);
}

/* Detail Utility Classes */
.ui-fs-12 { font-size: var(--ui-fs-12); }
.ui-fs-13 { font-size: var(--ui-fs-13); }
.ui-fs-14 { font-size: var(--ui-fs-14); }
.ui-fs-15 { font-size: var(--ui-fs-15); }

.ui-fw-bold { font-weight: var(--ui-fw-bold); }
.ui-fw-semibold { font-weight: var(--ui-fw-semibold); }
.ui-fw-normal { font-weight: normal; }

.ui-muted { color: var(--ui-muted); }
.ui-accent { color: var(--ui-accent); }
.ui-text-2 { color: var(--ui-text-2); }
.ui-success-text { color: var(--ui-success-text); }
.ui-danger-text { color: var(--ui-danger-text); }
.ui-urgent-text { color: var(--ui-urgent-text); }

.ui-mt-2 { margin-top: 2px; }
.ui-mt-4 { margin-top: 4px; }
.ui-mt-6 { margin-top: 6px; }
.ui-mt-8 { margin-top: 8px; }
.ui-mt-10 { margin-top: 10px; }
.ui-mt-12 { margin-top: 12px; }
.ui-mt-14 { margin-top: 14px; }
.ui-mt-16 { margin-top: 16px; }
.ui-mt-20 { margin-top: 20px; }
.ui-mt-22 { margin-top: 22px; }
.ui-mt-24 { margin-top: 24px; }

.ui-mb-8 { margin-bottom: 8px; }
.ui-mb-10 { margin-bottom: 10px; }

.ui-flex-1 { flex: 1; justify-content: center; }
.ui-btn-group { display: flex; gap: 6px; margin-top: 10px; }
.ui-inline-block { display: inline-block; }
.ui-block { display: block; }
.ui-underline { text-decoration: underline; }

.ui-line-12 { line-height: 1.2; }
.ui-line-14 { line-height: 1.4; }
.ui-line-15 { line-height: 1.5; }
.ui-line-16 { line-height: 1.6; }
.ui-line-175 { line-height: 1.75; }

.ui-pad-y-6 { padding: 6px 0; }
.ui-list-pad { margin: 0; padding-left: 18px; }

/* ==========================================================================
   Emphasis & Stat Components (Step 606-A-1 §1-9)
   ========================================================================== */

.ui-em {
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent);
}

.ui-em--lg {
  font-size: var(--ui-fs-18);
}

.ui-em--xl {
  font-size: var(--ui-fs-24);
}

.ui-em--hero {
  font-size: var(--ui-fs-28);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent);
  line-height: 1.2;
}

.ui-em--urgent {
  color: var(--ui-urgent-text);
}

.ui-em--success { color: var(--ui-success-text); }
.ui-em--info { color: var(--ui-info-text); }

.ui-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ui-sp-3);
  margin-bottom: var(--ui-sp-3);
}

.ui-stat {
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-stat__label {
  font-size: var(--ui-fs-12);
  color: var(--ui-muted);
  font-weight: var(--ui-fw-medium);
}

.ui-stat__value {
  font-size: var(--ui-fs-24);
  font-weight: var(--ui-fw-bold);
  color: var(--ui-accent);
  line-height: 1.2;
}

.ui-stat__unit {
  font-size: var(--ui-fs-14);
  font-weight: var(--ui-fw-regular);
  color: var(--ui-text-3);
  margin-left: 2px;
}


/* Step 615-B: reusable disclosure, term/value help and attachment table. */
.ui-dropdown { position: relative; display: inline-flex; }
.ui-dropdown__trigger { white-space: nowrap; }
.ui-dropdown__menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 168px; padding: 6px; background: var(--ui-surface); border: 1px solid var(--ui-control-border); border-radius: var(--ui-r-md); box-shadow: var(--ui-shadow-pop); z-index: 1060; }
.ui-dropdown.is-open .ui-dropdown__menu { display: grid; }
.ui-dropdown__item { padding: 10px 12px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-text); text-align: left; font: inherit; font-size: var(--ui-fs-13); cursor: pointer; white-space: nowrap; }
.ui-dropdown__item:hover, .ui-dropdown__item:focus-visible { background: var(--ui-surface-hover); }
.ui-detail__notice-number { font-size: var(--ui-fs-17); font-weight: var(--ui-fw-bold); color: var(--ui-text); }
.ui-tile__value--two-lines { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 4px; overflow: visible; }
.ui-tile__value--two-lines > span { min-width: 0; max-width: 100%; }
.ui-tile__value--two-lines .ui-tip__trigger--value,
.ui-tile__value--two-lines > span:not(.ui-tip) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-copy-buffer { position: fixed; left: -10000px; }
.ui-tip__trigger--term { width: 20px; height: 20px; border-radius: 50%; padding: 0; font-size: var(--ui-fs-12); }
.ui-tip__trigger--value { border: 0; border-bottom: 1px dotted currentColor; border-radius: 0; height: auto; padding: 0; background: transparent; color: inherit !important; -webkit-text-fill-color: inherit; font: inherit; text-align: left; }
.ui-tip--value .ui-tip__popover { font-weight: var(--ui-fw-regular); }
.ui-file-table { width: 100%; table-layout: fixed; border: 1px solid var(--ui-border); border-collapse: separate; border-spacing: 0; border-radius: var(--ui-r-md); overflow: hidden; font-size: var(--ui-fs-13); }
.ui-file-table th { background: var(--ui-surface-2); color: var(--ui-text-2); font-weight: var(--ui-fw-semibold); }
.ui-file-table th, .ui-file-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ui-border); }
.ui-file-table th:first-child { width: 82px; }
.ui-file-table th:last-child { width: 132px; }
.ui-file-table tr:last-child td { border-bottom: 0; }
.ui-file-table__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); }
.ui-file-table__footer { display: flex; justify-content: flex-end; margin-top: var(--ui-sp-3); }
.ui-kv--grid > .ui-kv__l, .ui-kv--grid > .l { color: var(--ui-text-2); }

/* Long metadata can wrap when a page opts in; list headers keep their scrollable line. */
.ps-page-head:has(.ui-page-head-meta-wrap) {
  max-height: none;
}
.ps-page-head__meta:has(> .ui-page-head-meta-wrap) {
  overflow: visible;
  white-space: normal;
  align-items: flex-start;
}
.ps-page-head__meta > .ui-page-head-meta-wrap {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
}
.ui-page-head-meta-wrap > a {
  display: inline-block;
  margin-inline-start: 0.5em;
  white-space: nowrap;
}




/* Step 606-M-1: mobile detail uses the shared UI kit components. */
.ui-detail--mobile { padding: 0 0 88px; }
.ui-mbar {
  position: sticky; top: 0; z-index: 110;
  display: flex; align-items: center; gap: 6px;
  min-height: 56px; padding: 8px 12px;
  background: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border);
}
.ui-mbar__title {
  flex: 1; min-width: 0;
  font-size: var(--ui-fs-14); font-weight: var(--ui-fw-semibold);
  color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-mbar__icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ui-r-md);
}
.ui-dropdown--end .ui-dropdown__menu { left: auto; right: 0; }
.ui-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-flow--compact {
  display: flex; align-items: flex-start; gap: 6px;
  flex-wrap: wrap; overflow-x: hidden; padding: 0 16px 12px;
}
.ui-flow--compact .ui-flow__chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 8px;
  border-radius: 6px; font-size: var(--ui-fs-12); white-space: nowrap;
  background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text-2);
  text-decoration: none;
}
.ui-flow--compact .ui-flow__chip.is-current {
  background: var(--ui-accent-weak); border-color: var(--ui-accent);
  color: var(--ui-accent-strong); font-weight: var(--ui-fw-semibold);
}
.ui-flow--compact .ui-flow__chip.is-done { color: var(--ui-text); }
.ui-flow--compact .ui-flow__chip.is-none { color: var(--ui-muted); }
.ui-detail--mobile .ui-detail__section-title { padding: 4px 16px 8px; font-size: var(--ui-fs-13); font-weight: var(--ui-fw-bold); }
.ui-detail--mobile .ui-detail__header-card { margin: 12px 16px 10px; padding: 16px; }
.ui-detail--mobile .ui-point { margin: 12px 0 0; padding: 12px 14px; }
.ui-detail--mobile .ui-tiles { margin-top: 12px; }
.ui-notice-no {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px 10px; background: var(--ui-surface-2); border-radius: var(--ui-r-md);
}
.ui-notice-no__k { font-size: var(--ui-fs-12); color: var(--ui-text-2); flex-shrink: 0; }
.ui-detail--mobile .ui-notice-no { flex-wrap: nowrap; align-items: flex-start; }
.ui-detail--mobile .ui-notice-no .ui-detail__notice-number {
  min-width: 0; flex: 1 1 auto;
  overflow-wrap: anywhere; word-break: break-all; white-space: normal;
}
.ui-detail--mobile .ui-notice-no__copy {
  flex-shrink: 0; width: 48px; white-space: nowrap;
}
.ui-detail--mobile .ui-tile__amount { display: block; white-space: nowrap; }
.ui-detail--mobile .ui-tile__budget { display: block; white-space: nowrap; }
.ui-detail--mobile .ui-point__value.ui-tabular,
.ui-detail--mobile .ui-point__value .ui-em--lg {
  white-space: nowrap;
  font-size: var(--ui-fs-15);
}
.ui-detail--mobile .ui-tile__method {
  display: flex; flex-direction: column; gap: 2px;
  word-break: keep-all; overflow-wrap: break-word; line-height: 1.35;
}
.ui-detail--mobile .ui-sheet .ui-calc__title { display: none; }
.ui-detail--mobile .ui-file-table th:first-child,
.ui-detail--mobile .ui-file-table td:first-child { width: 52px; }
.ui-detail--mobile .ui-file-table th:last-child,
.ui-detail--mobile .ui-file-table td:last-child { width: 52px; }
.ui-detail--mobile .ui-file-table__name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-detail--mobile .ui-file-table__dl {
  width: 100%; padding: 6px 4px; white-space: nowrap; font-size: var(--ui-fs-12);
}
.ui-detail--mobile .ui-disclosure__chevron {
  display: inline-flex; align-items: center; justify-content: center;
}
.ui-detail--mobile .ui-disclosure { margin: 0 16px 8px; padding: 13px 14px; }
.ui-detail--mobile .ui-disclosure > summary {
  display: flex; width: 100%; height: auto; min-height: 34px;
  align-items: center; justify-content: space-between; gap: 8px;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  font-weight: var(--ui-fw-semibold); font-size: var(--ui-fs-14); color: var(--ui-text); list-style: none;
}
.ui-detail--mobile .ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-detail--mobile .ui-disclosure__meta { font-size: var(--ui-fs-12); font-weight: var(--ui-fw-medium); color: var(--ui-text-2); margin-left: 6px; }
.ui-detail--mobile .ui-disclosure[open] > summary .ui-disclosure__chevron { transform: rotate(180deg); }
.ui-detail--mobile .ui-disclosure[open] > .ui-disclosure__panel { display: block; }
.ui-detail--mobile .ui-disclosure__panel {
  border: 0;
  padding: 10px 0 2px;
  margin-top: 8px;
  border-top: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
}
.ui-detail--mobile .ui-kv--grid { grid-template-columns: 110px minmax(0, 1fr); }
.ui-detail--mobile .ui-kv--grid > .ui-kv__span3 { grid-column: auto; }
.ui-detail--mobile .ui-kv--grid > .ui-kv__span4 { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .ui-detail--mobile .ui-kv--grid {
    grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  }
  .ui-detail--mobile .ui-kv--grid > .ui-kv__span3 { grid-column: span 3; }
  .ui-detail--mobile .ui-kv--grid > .ui-kv__span4 { grid-column: span 4; }
}
.ui-detail--mobile .ui-kv--grid > div { padding: 8px 9px; }
.ui-detail--mobile .ui-side-card { margin: 0 16px 8px; }
.ui-actionbar--bottom {
  position: sticky; bottom: 0; z-index: 100;
  display: flex; gap: 8px;
  background: var(--ui-bg); border-top: 1px solid var(--ui-border);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--ui-text) 10%, transparent);
  padding: 10px 16px 16px;
}
.ui-actionbar--bottom .ui-btn { flex: 1; min-height: 48px; }
.ui-detail--mobile .ui-detail__title { font-size: var(--ui-fs-18); }
html[data-theme="dark"] .ui-mbar,
html[data-theme="dark"] .ui-actionbar--bottom { background: var(--ui-bg); }