/* ===================================================
   공통 스타일시트 (전 페이지)
   디자인 토큰 · 리셋 · 베이스 · 공통 컴포넌트
   페이지 전용 클래스는 각 CSS에서 접두사 사용:
     search- (펀드검색) · detail- (펀드상세) · chart- (차트) · table- (테이블 헤더)
     perf- (성과분석) · portfolio- (포트폴리오분석) · filter- (검색 필터 · 공통)
   =================================================== */

@import url("fonts.css");

/* ── CSS 변수 (디자인 토큰) ── */
:root {
  --color-primary: #2d2864;
  --color-secondary: #6a41df;
  --color-tertiary: #b485ff;
  --color-offWhite: #f8f8f8;
  --color-softGray: #e6e6e6;
  --color-mediumGray: #999999;
  --color-slateGray: #67686c;
  --color-success: #21b497;
  --color-danger: #ff4a5f;
  --color-down: #2563eb;
  --color-warning: #fe8248;
  --color-info: #2b324b;
  --color-secondary-bg: #f5f2ff;
  --color-primary-bg: #efedf8;
  --color-danger-bg: #ffe1e5;
  --color-white: #fff;
  --color-black: #000;
  --shadow-default: 0 0 0.625rem 0 rgb(0 0 0/0.1);
}

/* ── html (rem 기준값) ──
   기본 12px, 주소에 ?embed 파라미터가 있으면 16px (iframe-height.js 에서 .is-embed 부여) */
html {
  font-size: 12px;
}

html.is-embed {
  font-size: 16px;
}

/* ── 전역 리셋 ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── body ── */
body {
  font-family: "Montserrat", "Pretendard", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--color-white);
  color: var(--color-black);
  letter-spacing: -0.03125rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 타이포그래피 ── */
strong,
b {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}
h1 {
  font-size: 2.25rem;
  line-height: 1.1;
}
h2 {
  font-size: 1.875rem;
  line-height: 1.2;
}
h3 {
  font-size: 1.5rem;
  line-height: 1.3;
}
h4 {
  font-size: 1.25rem;
  line-height: 1.4;
}
h5 {
  font-size: 1.125rem;
}

/* ── 링크 ── */
a {
  text-decoration: none;
  color: inherit;
}

/* ── 버튼 리셋 ── */
button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
}
button:disabled {
  cursor: not-allowed;
}

/* ── 입력 & 포커스 ── */
input::placeholder {
  color: var(--color-mediumGray);
}
:focus {
  outline: none;
}

/* ── 스크롤바 ── */
::-webkit-scrollbar {
  height: 0.625rem;
  width: 0.625rem;
}
::-webkit-scrollbar-thumb {
  height: 3rem;
  border-radius: 0.375rem;
  background-color: #bbbcc1;
}
::-webkit-scrollbar-track {
  background-color: var(--color-offWhite);
  height: 3rem;
  border-radius: 0.375rem;
}
::-webkit-scrollbar-corner {
  background-color: var(--color-offWhite);
  height: 3rem;
  border-radius: 0.375rem;
}

/* ????????????????????????????????????????????????????
   텍스트 유틸리티
   ???????????????????????????????????????????????????? */
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-danger {
  color: var(--color-danger);
}
.text-muted {
  color: var(--color-slateGray);
}
.text-sm {
  font-size: 0.875rem;
}
.font-semibold {
  font-weight: 600;
}
.font-normal {
  font-weight: 400;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

/* ????????????????????????????????????????????????????
   링크 (.link-hover)
   ???????????????????????????????????????????????????? */
.link-hover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
  transition: color 0.2s;
}

.link-hover:hover {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

/* 스크린리더 전용 숨김 텍스트 */
.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;
}

/* ????????????????????????????????????????????????????
   결과 메타 (.results-meta)
   ???????????????????????????????????????????????????? */
.results-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.results-meta__count strong {
  color: var(--color-secondary);
}

/* ????????????????????????????????????????????????????
   페이지네이션 (.pagination · .pagination__btn)
   ???????????????????????????????????????????????????? */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.875rem;
}

.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-width: 2rem;
  border: 1px solid var(--color-softGray);
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s,
    background-color 0.2s;
}

.pagination__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination__btn--active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

.pagination__btn--active:hover {
  color: var(--color-white) !important;
}

.pagination__btn--disabled {
  background-color: var(--color-offWhite);
  color: var(--color-slateGray);
  cursor: default;
}

.pagination__btn--disabled:hover {
  border-color: var(--color-softGray);
  color: var(--color-slateGray);
}

.pagination__btn--prev {
  margin-right: 0.5rem;
}

.pagination__btn--next {
  margin-left: 0.5rem;
}

/* ????????????????????????????????????????????????????
   파일 다운로드 버튼 (.file-btn)
   ???????????????????????????????????????????????????? */
.file-btn {
  cursor: pointer;
  transition: all 0.3s;
}

.file-btn:hover {
  color: var(--color-secondary);
}

/* 수익률 · 수치 양수(상승) · 음수(하락) */
.value-pos::before {
  content: "▲";
  margin-right: 0.25rem;
  font-size: 0.625rem;
}
.value-neg::before {
  content: "▼";
  margin-right: 0.25rem;
  font-size: 0.625rem;
}
.value-pos {
  color: var(--color-danger);
}
.value-neg {
  color: var(--color-down);
}

/* ????????????????????????????????????????????????????
   버튼 (.btn)
   ???????????????????????????????????????????????????? */
.btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3.125rem;
  min-width: 7.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  word-break: break-all;
  transition: all 0.4s;
}

.btn:disabled {
  cursor: auto;
}

.btn.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.btn.primary:hover {
  background-color: #3a337a;
}
.btn.primary:active {
  background-color: #221e4f;
}
.btn.primary:disabled {
  background-color: #b8b5d0;
}

.btn.secondary {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}
.btn.secondary:hover {
  background-color: #e0dcf0;
}
.btn.secondary:active {
  background-color: #c9c2e0;
}
.btn.secondary:disabled {
  background-color: #f7f6fc;
  color: #9a96b8;
}

.btn.tertiary {
  background-color: #ededed;
  color: var(--color-slateGray);
}
.btn.tertiary:hover {
  background-color: var(--color-softGray);
}
.btn.tertiary:active {
  background-color: #d9d9d9;
}
.btn.tertiary:disabled {
  color: var(--color-mediumGray);
}

.btn.line {
  background-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.btn.line:hover {
  background-color: var(--color-primary-bg);
}
.btn.line:active {
  background-color: #e0dcf0;
}
.btn.line:disabled {
  color: var(--color-mediumGray);
  box-shadow: inset 0 0 0 1px var(--color-softGray);
}

.btn.danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}
.btn.danger:hover {
  background-color: #e03e51;
}
.btn.danger:active {
  background-color: #d13548;
}

.btn.sm {
  min-height: unset;
  min-width: unset;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  gap: 0.5rem;
}

/* ????????????????????????????????????????????????????
   필터 선택 항목 (.selection-item) ? 체크박스 · 라디오
   ???????????????????????????????????????????????????? */
.selection-item {
  position: relative;
  display: inline-block;
}

.selection-item input {
  position: absolute;
  top: 0.125rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-softGray);
  cursor: pointer;
  transition: all 0.4s;
}
.selection-item input:hover {
  border-color: var(--color-primary);
}
.selection-item input:checked {
  border-color: var(--color-primary);
}
.selection-item input:disabled {
  background-color: var(--color-softGray);
  border-color: var(--color-softGray);
  cursor: auto;
}
.selection-item input:disabled:checked {
  border-color: var(--color-primary);
}

.selection-item input[type="checkbox"] {
  border-radius: 0.25rem;
  background-position: center;
  background-repeat: no-repeat;
}
.selection-item input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  background-image: url("https://dev-hygood.funddoctor.co.kr/w2b2026/images/form/check-line.svg");
  background-size: 0.875rem;
}

.selection-item input[type="radio"] {
  border-radius: 50%;
}
.selection-item input[type="radio"]:checked {
  border-width: 0.3125rem;
}
.selection-item input[type="radio"]:disabled:checked {
  background-color: var(--color-white);
}

.selection-item input:checked + label {
  color: var(--color-primary);
}
.selection-item input:disabled + label {
  color: var(--color-slateGray);
  cursor: auto;
}
.selection-item label {
  display: inline-block;
  flex: 1;
  padding-left: 1.875rem;
  cursor: pointer;
  word-break: break-all;
}

.selection-item.selection-label-hidden {
  width: 1.3125rem;
  height: 1.3125rem;
  vertical-align: middle;
}

/* ????????????????????????????????????????????????????
   컬럼 정렬 버튼 (.search-sort-btn)
   ???????????????????????????????????????????????????? */
.search-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: var(--color-slateGray);
}
.search-sort-btn--active {
  color: var(--color-black);
  font-weight: 600;
}

/* ????????????????????????????????????????????????????
   표 (.table-default)
   ???????????????????????????????????????????????????? */
.table-default {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--color-softGray);
  text-align: center;
}
.table-default caption {
  position: absolute;
  left: -624.9375rem;
  font-size: 0;
}
.table-default thead th,
.table-default tbody th {
  height: 3rem;
  padding: 0.875rem;
  background-color: var(--color-offWhite);
  border-right: 1px solid var(--color-softGray);
  border-bottom: 1px solid var(--color-softGray);
  font-weight: 600;
}
.table-default thead th span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-slateGray);
}
.table-default tbody td {
  height: 3rem;
  padding: 0.875rem;
  background-color: var(--color-white);
  border-right: 1px solid var(--color-softGray);
  border-bottom: 1px solid var(--color-softGray);
}

.table-default thead th:last-child,
.table-default tbody th:last-child,
.table-default tbody td:last-child {
  border-right: none;
}

/* ????????????????????????????????????????????????????
   게시판 목록 테이블 (.board-list-table)
   ???????????????????????????????????????????????????? */
.table-x-scroll {
  width: 100%;
  overflow-x: auto;
}

.table-x-scroll .board-list-table {
  min-width: 75rem;
}

.board-list-table {
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid var(--color-softGray);
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
}

.board-list-table caption {
  position: absolute;
  left: -624.9375rem;
}

.board-list-table thead th {
  height: 3rem;
  padding: 0.875rem;
  background-color: var(--color-offWhite);
  border-bottom: 1px solid var(--color-softGray);
  font-weight: 600;
}

.board-list-table tbody td {
  height: 3rem;
  padding: 0.875rem;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-softGray);
}

/* ????????????????????????????????????????????????????
   태그 (.fund-tags · .tag)
   ???????????????????????????????????????????????????? */
.fund-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tag {
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.tag-primary {
  background-color: var(--color-offWhite);
  color: var(--color-slateGray);
}
.tag-secondary {
  background-color: var(--color-secondary-bg);
  color: var(--color-secondary);
}
.tag-tertiary {
  background-color: rgb(14 165 233 / 0.1);
  color: #0284c7;
}
.tag-danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ????????????????????????????????????????????????????
   탭 네비게이션 (.tab-nav · .tab-btn)
   ???????????????????????????????????????????????????? */
.tab-nav {
  display: flex;
  margin-bottom: 2.5rem;
  border: 1px solid var(--color-secondary);
  border-radius: 0.5rem;
}
.tab-btn {
  display: flex;
  flex: 1;
  min-height: 3.375rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-align: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--color-secondary);
  transition: color 0.2s;
  color: var(--color-slateGray);
}
.tab-btn:first-child {
  border-left: none;
  border-radius: 0.5rem 0 0 0.5rem;
}
.tab-btn:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}
.tab-btn:hover {
  color: var(--color-secondary);
}

.tab-btn.tab-btn-active {
  background-color: var(--color-secondary-bg);
  color: var(--color-secondary);
  font-weight: 600;
}

/* ????????????????????????????????????????????????????
   콘텐츠 탭 (.detail-content-tab-nav)
   ???????????????????????????????????????????????????? */
.detail-content-tab-nav {
  display: flex;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-softGray);
}

.detail-content-tab-btn {
  position: relative;
  padding: 0.875rem 0.875rem;
  border-bottom: 0.125rem solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
  color: var(--color-slateGray);
}
.detail-content-tab-btn:hover {
  color: var(--color-secondary);
}

.detail-content-tab-btn--active {
  color: var(--color-secondary);
  font-weight: 600;
  border-bottom-color: var(--color-secondary);
}

.detail-content-tab-panel {
  display: none;
}
.detail-content-tab-panel--active {
  display: block;
}
.detail-content-tab-panel[hidden] {
  display: none !important;
}

/* ????????????????????????????????????????????????????
   불릿 목록 (.bullet-list · .bullet-item · .bullet-dot)
   ???????????????????????????????????????????????????? */
.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bullet-item {
  display: flex;
  gap: 0.5rem;
}

.bullet-dot {
  flex-shrink: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  margin-top: 0.5625rem;
}

/* ????????????????????????????????????????????????????
   아이콘 목록 (.icon-list · .icon-item · .icon-item__icon · .icon-item__content)
   - 아이콘을 자유롭게 넣는 공통 리스트
   ???????????????????????????????????????????????????? */
.icon-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.icon-list--nested {
  margin-top: 0.625rem;
}

.icon-item {
  display: flex;
  gap: 0.25rem;
}

.icon-item__icon {
  flex-shrink: 0;
  margin-top: -0.0625rem;
}

.icon-item__content {
  flex: 1;
  min-width: 0;
}

/* ????????????????????????????????????????????????????
   하위 섹션 (.subsection-header · .subsection-title · .subsection-content)
   ???????????????????????????????????????????????????? */
.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.subsection-title {
  position: relative;
  padding-left: 0.875rem;
  flex: 1;
  min-width: 0;
}
.subsection-title::before {
  content: "";
  position: absolute;
  top: 0.625rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.subsection-content {
  padding-left: 0.875rem;
}

/* ????????????????????????????????????????????????????
   섹션 스택 (.detail-section-stack) ? 상세 · 성과분석 공통
   ???????????????????????????????????????????????????? */
.detail-section-stack {
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
}
.detail-section-stack--sub {
  gap: 4.375rem;
}

/* ????????????????????????????????????????????????????
   섹션 헤더 (.section-header) ? 상세 · 성과분석 공통
   ???????????????????????????????????????????????????? */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

/* ????????????????????????????????????????????????????
   차트 (.chart-*) ? 성과분석 · 기준가 공통
   ???????????????????????????????????????????????????? */
.chart-box {
  background-color: var(--color-offWhite);
  border-radius: 0.5rem;
  padding: 1.875rem;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.chart-container {
  position: relative;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  padding: 1.875rem;
}

.chart-legend-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.chart-legend-wrap--bottom {
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-softGray);
}

.chart-check-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--color-black);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.chart-check-label:has(.chart-check-input:not(:checked)) {
  opacity: 0.35;
}

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

.chart-series-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.chart-series-icon--line {
  position: relative;
  width: 1.75rem;
  height: 0.125rem;
  border-radius: 1px;
}
.chart-series-icon--line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.chart-series-icon--fund {
  background-color: #2d2864;
}
.chart-series-icon--fund::before {
  background-color: #2d2864;
}

.chart-series-icon--benchmark {
  background-color: #6a41df;
}
.chart-series-icon--benchmark::before {
  background-color: #6a41df;
}

.chart-series-icon--average {
  background-color: #b485ff;
}
.chart-series-icon--average::before {
  background-color: #b485ff;
}

.chart-period-btns {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem;
  background-color: var(--color-white);
  border-radius: 62.4375rem;
}

.chart-period-btn {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: 62.4375rem;
  font-size: 0.875rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.chart-period-btn:hover {
  color: var(--color-secondary);
}
.chart-period-btn--active {
  color: var(--color-secondary);
  background-color: var(--color-secondary-bg);
  border-color: var(--color-secondary);
  font-weight: 600;
}

.chart-tooltip {
  position: absolute;
  z-index: 1;
  min-width: 11.25rem;
  padding: 0.875rem;
  border-radius: 0.5rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-default);
  font-size: 0.875rem;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.75rem));
  transition: opacity 0.15s;
}
.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip__title {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.chart-tooltip__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.chart-tooltip__marker {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.chart-tooltip__label {
  flex: 1;
}

.chart-tooltip__value {
  font-weight: 600;
}

/* ????????????????????????????????????????????????????
   테이블 헤더 컨트롤 (.table-controls · .table-period · .table-download-btn)
   ???????????????????????????????????????????????????? */
.table-controls {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.table-period {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 62.4375rem;
  background-color: var(--color-offWhite);
}

.table-period-label {
  font-size: 0.875rem;
}

.table-period-bar {
  width: 1px;
  height: 0.75rem;
  flex-shrink: 0;
  background-color: var(--color-mediumGray);
}

.table-period-select {
  padding-right: 1.75rem;
  border: transparent;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("https://dev-hygood.funddoctor.co.kr/w2b2026/images/form/arrow-down-s-line.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 1.125rem;
  cursor: pointer;
}

.table-download-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 62.4375rem;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.table-download-btn--excel {
  background-color: #21b497;
  color: var(--color-white);
}
.table-download-btn--excel:hover {
  background-color: #1ca885;
}
.table-download-btn--excel:active {
  background-color: #189678;
}

.table-download-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}

.table-download-btn--excel span {
  background-color: #fff;
  color: #21b497;
}

/* ????????????????????????????????????????????????????
   검색 필터 (.filter-*)
   ???????????????????????????????????????????????????? */
.filter-card {
  padding: 1.875rem 3.75rem;
  background-color: var(--color-offWhite);
  border-radius: 0.5rem;
  margin-bottom: 4.375rem;
}

.filter-rows {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.filter-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.filter-label {
  width: 5rem;
}

.filter-select-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.125rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-softGray);
  background-color: var(--color-white);
  transition: all 0.4s;
}

.filter-select-wrap:focus-within {
  border-color: var(--color-primary);
}

.filter-select-wrap select {
  flex: 0 1 auto;
  min-width: 10rem;
  height: 100%;
  padding: 0 2.5rem 0 0.875rem;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("https://dev-hygood.funddoctor.co.kr/w2b2026/images/form/arrow-down-s-line.svg");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

.filter-select-wrap select:only-child {
  flex: 1;
  width: 100%;
}

.filter-select-wrap span {
  width: 1px;
  height: 1rem;
  background-color: var(--color-softGray);
}

.filter-select-wrap input {
  width: 100%;
  height: 100%;
  padding: 0 0.875rem;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
}

.filter-date-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.filter-date-inputs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.125rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-softGray);
  background-color: var(--color-white);
  padding: 0 0.875rem;
  transition: all 0.4s;
}

.filter-date-inputs:focus-within {
  border-color: var(--color-primary);
}

.filter-date-field {
  flex: 1;
  display: flex;
  align-items: center;
}

.filter-date-input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
}

.filter-date-sep {
  color: var(--color-slateGray);
}

.filter-period-btns {
  display: flex;
  gap: 0.375rem;
}

.filter-period-btn--active {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.filter-bar-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-softGray);
}

/* ????????????????????????????????????????????????????
   모달 팝업 (.modal)
   ???????????????????????????????????????????????????? */
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal__dialog {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: calc(100vw - 2.5rem);
  max-height: calc(100vh - 2.5rem);
  background-color: var(--color-white);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-default);
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-softGray);
}

.modal__body {
  overflow-y: auto;
}

.modal .detail-fund-hero {
  margin-bottom: 0;
}

.modal__actions {
  display: flex;
  gap: 0.625rem;
  padding-top: 1.25rem;
}

.modal__actions a,
.modal__actions button {
  flex: 1;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-offWhite);
  color: var(--color-slateGray);
  font-size: 1.25rem;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.modal__close:hover {
  background-color: var(--color-softGray);
  color: var(--color-black);
}

/* ????????????????????????????????????????????????????
   빈 상태 박스 (.empty-box · .empty-box-icon)
   ???????????????????????????????????????????????????? */
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.875rem;
  border-radius: 0.5rem;
  background-color: var(--color-offWhite);
  text-align: center;
}

.empty-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: var(--color-secondary-bg);
  color: var(--color-secondary);
  font-size: 1.875rem;
}

.empty-box h3 {
  margin: 1.25rem 0 0.5rem;
}

.empty-box p {
  color: var(--color-slateGray);
}

/* ????????????????????????????????????????????????????
   데이터 없음 (.empty-state · .empty-state__icon · .empty-state__message)
   ???????????????????????????????????????????????????? */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  height: 15.625rem;
  border: 1px solid var(--color-softGray);
  border-radius: 0.5rem;
  background-color: var(--color-white);
}

.empty-state__icon {
  flex-shrink: 0;
  width: 5.625rem;
  height: 5.625rem;
  border-radius: 50%;
  background: var(--color-secondary-bg) url("../images/common/empty-default.png") center / 3.75rem no-repeat;
}

.empty-state__message {
  color: var(--color-slateGray);
}

/* ????????????????????????????????????????????????????
   정보 카드 (.info-card-* · .info-card__list--numbered)
   ???????????????????????????????????????????????????? */
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.info-card {
  padding: 1.25rem;
  border-radius: 0.5rem;
  background-color: var(--color-offWhite);
}

.info-card__title {
  display: block;
}

.info-card__list {
  list-style: none;
  margin-top: 0.625rem;
  padding: 1.25rem;
  border-radius: 0.5rem;
  background-color: var(--color-white);
  overflow-y: auto;
  /* 항목 5개 높이 (첫 항목 상단 패딩 0 반영) */
  max-height: calc(1.25rem + 5 * 4rem);
}

.info-card__item {
  display: flex;
  gap: 0.625rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-softGray);
}

.info-card__item:first-child {
  padding-top: 0;
}

.info-card__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.info-card__item > button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.info-card__item > button:hover,
.info-card__item > button:focus-visible {
  color: var(--color-secondary);
}

.info-card__label {
  flex: 1;
  min-width: 0;
}

.info-card__value {
  flex-shrink: 0;
  font-weight: 600;
}

.info-card__list--numbered {
  counter-reset: info-card-num;
}

.info-card__list--numbered .info-card__item {
  counter-increment: info-card-num;
}

.info-card__list--numbered .info-card__label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.info-card__list--numbered .info-card__label::before {
  content: counter(info-card-num);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.375rem;
  font-size: 0.75rem;
  background-color: var(--color-secondary-bg);
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-weight: 600;
}