:root {
  --fdc-panel-scrollbar-gutter: stable;
  --fdc-dropdown-scrollbar-reserve: var(--fdc-shared-scrollbar-size, var(--fdc-scrollbar-size, 8px));
  --fdc-sort-trigger-fixed-width-compact: 96px;
  --fdc-sort-trigger-fixed-width-default: 108px;
  --fdc-sort-panel-min-width-compact: 96px;
  --fdc-sort-panel-min-width-default: 116px;
}

.toolbar-sort-dropdown {
  position: relative;
  min-width: 0;
  max-width: none;
  width: fit-content;
  flex: 0 0 auto;
  --fdc-sort-trigger-fixed-width: var(--fdc-sort-trigger-fixed-width-default);
  --fdc-sort-panel-min-width: var(--fdc-sort-panel-min-width-default);
  --fdc-sort-pristine-direction-width: 0px;
  --fdc-sort-pristine-direction-display: none;
}

.toolbar-sort-dropdown[data-fdc-sort-size='compact'] {
  --fdc-sort-trigger-fixed-width: var(--fdc-sort-trigger-fixed-width-compact);
  --fdc-sort-panel-min-width: var(--fdc-sort-panel-min-width-compact);
  --fdc-sort-trigger-padding-x: 7px;
  --fdc-sort-trigger-pristine-min-width: 64px;
  --fdc-sort-trigger-column-gap: 4px;
  --fdc-sort-direction-width: 12px;
  --fdc-sort-direction-font-size: 13px;
  --fdc-sort-caret-width: 8px;
  --fdc-sort-caret-font-size: 10px;
}

.toolbar-sort-dropdown[data-fdc-sort-size='default'] {
  --fdc-sort-trigger-fixed-width: var(--fdc-sort-trigger-fixed-width-default);
  --fdc-sort-panel-min-width: var(--fdc-sort-panel-min-width-default);
}

.toolbar-sort-dropdown[data-fdc-sort-width='fixed'] {
  width: var(--fdc-sort-trigger-fixed-width);
  min-width: var(--fdc-sort-trigger-fixed-width);
  max-width: var(--fdc-sort-trigger-fixed-width);
}

.toolbar-sort-button,
#sortFilterButton.toolbar-sort-button,
.toolbar-sort-dropdown #sortFilterButton {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--fdc-sort-direction-width)
    var(--fdc-sort-caret-width);
  align-items: center;
  column-gap: var(--fdc-sort-trigger-column-gap);
  min-height: 44px;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0 var(--fdc-sort-trigger-padding-x);
  border: 1px solid var(--fdc-sort-trigger-border-color, var(--line, #cbd5e1));
  border-radius: var(--fdc-sort-trigger-radius, 10px);
  text-align: left;
  background: var(--fdc-sort-trigger-bg, #fff);
  color: var(--fdc-sort-trigger-text-color, #1e293b);
  box-shadow: none;
  overflow: visible;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fdc-sort-trigger-font-size, 15px);
  font-weight: var(--fdc-sort-trigger-font-weight, 700);
  line-height: 1.2;
  cursor: pointer;
}

.toolbar-sort-dropdown[data-fdc-sort-width='fixed'] > .toolbar-sort-button,
.toolbar-sort-dropdown[data-fdc-sort-width='fixed'] > #sortFilterButton,
.toolbar-sort-dropdown[data-fdc-sort-width='fixed'] > #sortBtn {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.toolbar-sort-button.is-pristine,
#sortFilterButton.is-pristine {
  grid-template-columns: minmax(0, 1fr) var(--fdc-sort-pristine-direction-width) var(--fdc-sort-caret-width);
  min-width: var(--fdc-sort-trigger-pristine-min-width, 72px);
}

:root[data-theme='dark'] .toolbar-sort-button,
:root[data-theme='dark'] #sortFilterButton.toolbar-sort-button,
:root[data-theme='dark'] .toolbar-sort-dropdown #sortFilterButton {
  background: var(--fdc-sort-trigger-dark-bg, var(--panel, #111827));
  color: var(--fdc-sort-trigger-dark-text-color, var(--text, #e5edf8));
  border-color: var(--fdc-sort-trigger-border-color, var(--line, rgba(148, 163, 184, 0.28)));
}

:root[data-theme='dark'] .toolbar-sort-button:hover,
:root[data-theme='dark'] #sortFilterButton.toolbar-sort-button:hover,
:root[data-theme='dark'] .toolbar-sort-dropdown #sortFilterButton:hover,
:root[data-theme='dark'] #sortFilterButton[aria-expanded='true'] {
  background: color-mix(in srgb, var(--panel, #111827) 86%, white 14%);
}

.comment-sort-trigger,
.modal-comments-sort-trigger {
  border-radius: 999px;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.comment-sort-trigger:hover,
.comment-sort-trigger:focus-visible,
.comment-sort-dropdown.is-open .comment-sort-trigger,
.comment-sort-trigger[aria-expanded='true'],
.modal-comments-sort-trigger:hover,
.modal-comments-sort-trigger:focus-visible,
.modal-comments-sort-dropdown.is-open .modal-comments-sort-trigger,
.modal-comments-sort-trigger[aria-expanded='true'] {
  background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 8%, white);
  color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 16%, transparent);
  transform: translateY(-1px);
}

:root[data-theme='dark'] .toolbar-sort-button .filter-trigger-label,
:root[data-theme='dark'] #sortFilterButton .filter-trigger-label,
:root[data-theme='dark'] #sortFilterButtonLabel {
  color: inherit;
}

.toolbar-sort-button.is-pristine .sort-direction-indicator,
#sortFilterButton.is-pristine .sort-direction-indicator {
  display: var(--fdc-sort-pristine-direction-display);
  cursor: default;
  pointer-events: none;
}

.toolbar-sort-button .filter-trigger-label,
#sortFilterButton .filter-trigger-label,
#sortFilterButtonLabel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar-sort-button .sort-direction-indicator,
#sortFilterButton .sort-direction-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fdc-sort-direction-width);
  width: var(--fdc-sort-direction-width);
  color: var(--fdc-sort-direction-color, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))));
  font-size: var(--fdc-sort-direction-font-size, 14px);
  font-weight: var(--fdc-sort-direction-font-weight, 800);
  font-family: inherit;
  line-height: 1;
  letter-spacing: -0.03em;
  cursor: pointer;
  flex: 0 0 auto;
}

.toolbar-sort-button .filter-trigger-caret,
#sortFilterButton .filter-trigger-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fdc-sort-caret-width);
  flex: 0 0 auto;
  color: var(--fdc-dropdown-caret-color);
  font-size: var(--fdc-sort-caret-font-size, 12px);
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  transition: color 0.18s ease, transform 0.18s ease;
}

.toolbar-sort-dropdown.is-open .toolbar-sort-button .filter-trigger-caret,
.toolbar-sort-dropdown.is-open #sortFilterButton .filter-trigger-caret,
#sortFilterButton[aria-expanded='true'] .filter-trigger-caret {
  color: var(--fdc-dropdown-caret-active-color);
}

.toolbar-sort-dropdown .filter-panel,
.toolbar-sort-panel.filter-panel,
#sortFilterPanel.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 40;
  display: none;
  min-width: var(--fdc-sort-panel-min-width, 0px);
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(320px, calc(100dvh - 180px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: var(--fdc-panel-scrollbar-gutter, stable);
  padding: var(--fdc-sort-panel-padding);
  border-radius: var(--fdc-dropdown-panel-radius);
  background: var(--fdc-dropdown-panel-bg);
  box-shadow: var(--fdc-dropdown-panel-shadow);
}

.toolbar-sort-dropdown.is-open .filter-panel,
#sortFilterDropdown.is-open #sortFilterPanel.filter-panel {
  display: grid;
  gap: 4px;
}

#sortFilterDropdown {
  position: relative;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel),
.color-filter-dropdown .color-filter-panel,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-panel {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: var(--fdc-panel-scrollbar-gutter, stable);
  padding: var(--fdc-sort-panel-padding);
  border-radius: var(--fdc-dropdown-panel-radius);
  background: var(--fdc-dropdown-panel-bg);
  box-shadow: var(--fdc-dropdown-panel-shadow);
}

.filter-dropdown.is-open .filter-panel:not(.toolbar-sort-panel),
.color-filter-dropdown.is-open .color-filter-panel,
body.trade-market-page .trade-market-custom-select.is-open .trade-market-dropdown-panel:not(.toolbar-sort-panel) {
  display: grid;
  gap: 4px;
}

.toolbar-sort-panel .filter-option-btn,
#sortFilterPanel .filter-option-btn,
#sortFilterPanel .color-filter-option,
#sortByFilterPanel .filter-option-btn,
#boardSortByFilterPanel .filter-option-btn,
.news-filter-menu .filter-option-btn,
.posts-filter-menu .filter-option-btn,
.post-write-filter-menu .filter-option-btn {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding:
    var(--fdc-sort-option-padding-y)
    var(--fdc-sort-option-padding-right)
    var(--fdc-sort-option-padding-y)
    var(--fdc-sort-option-padding-left);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.toolbar-sort-panel .filter-option-btn::after,
#sortFilterPanel .filter-option-btn::after,
#sortFilterPanel .color-filter-option::after,
#sortByFilterPanel .filter-option-btn::after,
#boardSortByFilterPanel .filter-option-btn::after,
.news-filter-menu .filter-option-btn::after,
.posts-filter-menu .filter-option-btn::after,
.post-write-filter-menu .filter-option-btn::after {
  display: none;
  content: none;
}

.toolbar-sort-panel .filter-option-main,
#sortFilterPanel .filter-option-main,
#sortFilterPanel .color-filter-option-main,
#sortByFilterPanel .filter-option-main,
#boardSortByFilterPanel .filter-option-main,
.news-filter-menu .filter-option-main,
.posts-filter-menu .filter-option-main,
.post-write-filter-menu .filter-option-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
  width: 100%;
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.toolbar-sort-panel .filter-option-btn:hover,
#sortFilterPanel .filter-option-btn:hover,
#sortFilterPanel .color-filter-option:hover,
#sortByFilterPanel .filter-option-btn:hover,
#boardSortByFilterPanel .filter-option-btn:hover,
.news-filter-menu .filter-option-btn:hover,
.posts-filter-menu .filter-option-btn:hover,
.post-write-filter-menu .filter-option-btn:hover {
  background: #eef5ff;
  border-color: var(--fdc-border-panel-strong, var(--fdc-color-border-strong, #c3d4e8));
}

.toolbar-sort-panel .filter-option-btn.is-active,
#sortFilterPanel .filter-option-btn.is-active,
#sortFilterPanel .color-filter-option.is-active,
#sortByFilterPanel .filter-option-btn.is-active,
#boardSortByFilterPanel .filter-option-btn.is-active,
.news-filter-menu .filter-option-btn.is-active,
.posts-filter-menu .filter-option-btn.is-active,
.post-write-filter-menu .filter-option-btn.is-active {
  background: #dbeafe;
  border-color: #bfd0e7;
  color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
}

.toolbar-sort-panel .filter-option-btn.is-active::after,
#sortFilterPanel .filter-option-btn.is-active::after,
#sortFilterPanel .color-filter-option.is-active::after,
#sortByFilterPanel .filter-option-btn.is-active::after,
#boardSortByFilterPanel .filter-option-btn.is-active::after,
.news-filter-menu .filter-option-btn.is-active::after,
.posts-filter-menu .filter-option-btn.is-active::after,
.post-write-filter-menu .filter-option-btn.is-active::after {
  display: none;
  content: none;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn,
.color-filter-dropdown .color-filter-panel .color-filter-option,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  padding:
    var(--fdc-sort-option-padding-y)
    var(--fdc-sort-option-padding-right)
    var(--fdc-sort-option-padding-y)
    var(--fdc-sort-option-padding-left);
  gap: 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn::after,
.color-filter-dropdown .color-filter-panel .color-filter-option::after,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option::after {
  display: none;
  content: none;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-main,
.color-filter-dropdown .color-filter-panel .color-filter-option-main,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-count,
.color-filter-dropdown .color-filter-panel .color-filter-option-count {
  flex: 0 0 auto;
  margin-left: auto;
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn:hover,
.color-filter-dropdown .color-filter-panel .color-filter-option:hover,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option:hover {
  background: #eef5ff;
  border-color: var(--fdc-border-panel-strong, var(--fdc-color-border-strong, #c3d4e8));
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn.is-active,
.color-filter-dropdown .color-filter-panel .color-filter-option.is-active,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option.is-active {
  background: #dbeafe;
  border-color: #bfd0e7;
  color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
}

.filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn.is-active::after,
.color-filter-dropdown .color-filter-panel .color-filter-option.is-active::after,
body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option.is-active::after {
  display: none;
  content: none;
}

:root[data-theme='dark'] .toolbar-sort-panel .filter-option-btn,
:root[data-theme='dark'] #sortFilterPanel .filter-option-btn,
:root[data-theme='dark'] #sortFilterPanel .color-filter-option,
:root[data-theme='dark'] #sortByFilterPanel .filter-option-btn,
:root[data-theme='dark'] #boardSortByFilterPanel .filter-option-btn,
:root[data-theme='dark'] .news-filter-menu .filter-option-btn,
:root[data-theme='dark'] .posts-filter-menu .filter-option-btn,
:root[data-theme='dark'] .post-write-filter-menu .filter-option-btn {
  color: #e5edf8;
}

:root[data-theme='dark'] .toolbar-sort-panel .filter-option-btn:hover,
:root[data-theme='dark'] #sortFilterPanel .filter-option-btn:hover,
:root[data-theme='dark'] #sortFilterPanel .color-filter-option:hover,
:root[data-theme='dark'] #sortByFilterPanel .filter-option-btn:hover,
:root[data-theme='dark'] #boardSortByFilterPanel .filter-option-btn:hover,
:root[data-theme='dark'] .news-filter-menu .filter-option-btn:hover,
:root[data-theme='dark'] .posts-filter-menu .filter-option-btn:hover,
:root[data-theme='dark'] .post-write-filter-menu .filter-option-btn:hover {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.34);
}

:root[data-theme='dark'] .toolbar-sort-panel .filter-option-btn.is-active,
:root[data-theme='dark'] #sortFilterPanel .filter-option-btn.is-active,
:root[data-theme='dark'] #sortFilterPanel .color-filter-option.is-active,
:root[data-theme='dark'] #sortByFilterPanel .filter-option-btn.is-active,
:root[data-theme='dark'] #boardSortByFilterPanel .filter-option-btn.is-active,
:root[data-theme='dark'] .news-filter-menu .filter-option-btn.is-active,
:root[data-theme='dark'] .posts-filter-menu .filter-option-btn.is-active,
:root[data-theme='dark'] .post-write-filter-menu .filter-option-btn.is-active {
  background: color-mix(in srgb, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)) 22%, transparent);
  border-color: color-mix(in srgb, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)) 42%, transparent);
  color: var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6));
}

:root[data-theme='dark'] .filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn,
:root[data-theme='dark'] .color-filter-dropdown .color-filter-panel .color-filter-option,
:root[data-theme='dark'] body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option {
  color: #e5edf8;
}

:root[data-theme='dark'] .filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn:hover,
:root[data-theme='dark'] .color-filter-dropdown .color-filter-panel .color-filter-option:hover,
:root[data-theme='dark'] body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option:hover {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.34);
}

:root[data-theme='dark'] .filter-dropdown .filter-panel:not(.toolbar-sort-panel):not(#sortFilterPanel):not(#sortByFilterPanel):not(#boardSortByFilterPanel) .filter-option-btn.is-active,
:root[data-theme='dark'] .color-filter-dropdown .color-filter-panel .color-filter-option.is-active,
:root[data-theme='dark'] body.trade-market-page .trade-market-custom-select:not(.toolbar-sort-dropdown) .trade-market-dropdown-option.is-active {
  background: color-mix(in srgb, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)) 22%, transparent);
  border-color: color-mix(in srgb, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)) 42%, transparent);
  color: var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6));
}

:root[data-theme='dark'] .comment-sort-trigger:hover,
:root[data-theme='dark'] .comment-sort-trigger:focus-visible,
:root[data-theme='dark'] .comment-sort-dropdown.is-open .comment-sort-trigger,
:root[data-theme='dark'] .comment-sort-trigger[aria-expanded='true'],
:root[data-theme='dark'] .modal-comments-sort-trigger:hover,
:root[data-theme='dark'] .modal-comments-sort-trigger:focus-visible,
:root[data-theme='dark'] .modal-comments-sort-dropdown.is-open .modal-comments-sort-trigger,
:root[data-theme='dark'] .modal-comments-sort-trigger[aria-expanded='true'] {
  background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, transparent);
  color: #dbeafe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}