/* 스포트라이트유 감사결과 검색
   테마 색 토큰이 있으면 그것을 쓰고, 없으면 기본값으로 떨어진다.
   → 어떤 테마에서도 어색하지 않게 보인다. */

.sua {
  --sua-ink:   var(--ink, #12161C);
  --sua-navy:  var(--navy, #0F2A47);
  --sua-mark:  var(--spotlight, #E2952B);
  --sua-gray:  var(--gray-700, #4A5561);
  --sua-line:  var(--gray-300, #D7DDE4);
  --sua-soft:  var(--gray-100, #F3F5F8);
  --sua-bg:    var(--white, #FFFFFF);
  --sua-radius: var(--radius, 6px);

  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 검색 상자 */
.sua-intro {
  background: var(--sua-soft);
  border: 1px solid var(--sua-line);
  border-radius: var(--sua-radius);
  padding: 32px 24px;
  margin: 0 0 24px;
  text-align: center;
}
.sua-intro__title {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em;
  margin: 0 0 20px; color: var(--sua-ink);
}
.sua-form { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sua-form__input {
  flex: 1 1 320px; max-width: 440px;
  padding: 13px 14px; font-size: 1rem;
  border: 1px solid var(--sua-line); border-radius: var(--sua-radius);
  background: var(--sua-bg); color: var(--sua-ink);
}
.sua-form__input:focus { outline: 2px solid var(--sua-mark); outline-offset: 1px; }
.sua-form__button {
  padding: 13px 24px; font-size: 1rem; font-weight: 600;
  background: var(--sua-navy); color: #fff;
  border: 0; border-radius: var(--sua-radius); cursor: pointer;
}
.sua-form__button:hover { opacity: .92; }
.sua-intro__hint { font-size: .8125rem; color: var(--sua-gray); margin: 3px 0; line-height: 1.6; }

/* 결과 요약 */
.sua-summary {
  font-size: .9375rem; color: var(--sua-ink);
  padding: 12px 0; margin-bottom: 8px;
  border-bottom: 2px solid var(--sua-ink);
}
.sua-summary__note { font-size: .8125rem; color: var(--sua-gray); font-weight: 400; }

/* 결과 카드 */
.sua-results { display: grid; gap: 14px; margin: 16px 0 28px; }
.sua-card {
  background: var(--sua-bg);
  border: 1px solid var(--sua-line);
  border-radius: var(--sua-radius);
  padding: 18px 20px;
}
.sua-card__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 1rem; margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sua-soft);
  letter-spacing: -.02em;
}
.sua-card__tag {
  font-size: .75rem; font-weight: 700; padding: 3px 9px;
  background: var(--sua-navy); color: #fff; border-radius: 3px;
}
.sua-card__org { font-weight: 700; color: var(--sua-ink); }
.sua-card__year { font-size: .8125rem; color: var(--sua-gray); font-weight: 400; }

.sua-card__row { display: flex; gap: 12px; padding: 5px 0; font-size: .9375rem; line-height: 1.7; }
.sua-card__label {
  flex: 0 0 68px; font-weight: 700; font-size: .8125rem;
  color: var(--sua-gray); padding-top: 3px;
}
.sua-card__value { flex: 1; min-width: 0; color: var(--sua-ink); }
.sua mark { background: rgba(226,149,43,.28); color: inherit; padding: 0 2px; border-radius: 2px; }

/* 페이지 넘김 */
.sua-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0; }
.sua-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--sua-line); border-radius: var(--sua-radius);
  font-size: .875rem; color: var(--sua-ink); text-decoration: none;
}
.sua-page:hover { background: var(--sua-soft); }
.sua-page.is-current { background: var(--sua-navy); border-color: var(--sua-navy); color: #fff; }
.sua-page--gap { border: 0; min-width: 20px; color: var(--sua-gray); }

/* 배너 · 광고 */
.sua-banner { margin: 0 0 28px; }
.sua-banner__label {
  display: block; text-align: right; font-size: .6875rem;
  color: var(--sua-gray); margin-bottom: 5px; letter-spacing: .08em;
}
.sua-banner a { display: block; overflow: hidden; border-radius: var(--sua-radius); background: var(--sua-soft); }
.sua-banner img { display: block; width: 100%; height: auto; }
.sua-ad { margin: 24px 0; text-align: center; }

.sua-empty {
  text-align: center; padding: 48px 20px;
  color: var(--sua-gray); font-size: .9375rem;
}

@media (max-width: 600px) {
  .sua-intro { padding: 24px 16px; }
  .sua-form__input { flex: 1 1 100%; max-width: none; }
  .sua-form__button { flex: 1 1 100%; }
  .sua-card__row { flex-direction: column; gap: 2px; }
  .sua-card__label { flex: none; }
}

/* ==========================================================================
   대시보드
   ========================================================================== */

.sudl {
  --sudl-ink:  var(--ink, #12161C);
  --sudl-navy: var(--navy, #0F2A47);
  --sudl-mark: var(--spotlight, #E2952B);
  --sudl-gray: var(--gray-700, #4A5561);
  --sudl-line: var(--gray-300, #D7DDE4);
  --sudl-soft: var(--gray-100, #F3F5F8);
  --sudl-bg:   var(--white, #FFFFFF);
  --sudl-radius: var(--radius, 6px);
  word-break: keep-all;
}

.sudl-dash__head { margin-bottom: 20px; }
.sudl-dash__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 6px; }
.sudl-dash__sub { font-size: .9375rem; color: var(--sudl-gray); margin: 0; }

.sudl-status {
  padding: 48px 20px; text-align: center;
  color: var(--sudl-gray); font-size: .9375rem;
  background: var(--sudl-soft); border-radius: var(--sudl-radius);
}

/* 필터 */
.sudl-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.sudl-filters label { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--sudl-gray); }
.sudl-filters select {
  padding: 7px 10px; font-size: .875rem;
  border: 1px solid var(--sudl-line); border-radius: 4px;
  background: var(--sudl-bg); color: var(--sudl-ink);
}

/* 지표 카드 */
.sudl-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.sudl-card {
  background: var(--sudl-bg); border: 1px solid var(--sudl-line);
  border-radius: var(--sudl-radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.sudl-card__label { font-size: .75rem; color: var(--sudl-gray); }
.sudl-card__value { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sudl-card__note { font-size: .6875rem; color: var(--sudl-gray); opacity: .8; }

/* 탭 */
.sudl-tabs__nav {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--sudl-line); margin-bottom: 18px;
}
.sudl-tabs__nav button {
  border: 0; background: none; cursor: pointer;
  padding: 10px 15px; font-size: .875rem; color: var(--sudl-gray);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sudl-tabs__nav button:hover { color: var(--sudl-ink); }
.sudl-tabs__nav button.is-active {
  color: var(--sudl-navy); font-weight: 700; border-bottom-color: var(--sudl-mark);
}
.sudl-panel { display: none; }
.sudl-panel.is-active { display: block; }

/* 차트 */
.sudl-charts2 { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 16px; }
@media (max-width: 960px) { .sudl-charts2 { grid-template-columns: minmax(0,1fr); } }

.sudl-chart {
  position: relative; background: var(--sudl-bg);
  border: 1px solid var(--sudl-line); border-radius: var(--sudl-radius);
  padding: 14px 16px; margin-bottom: 16px;
}
.sudl-chart h3, .sudl-chart h4 { font-size: .9375rem; margin: 0 0 4px; letter-spacing: -.02em; }
.sudl-chart__desc { font-size: .75rem; color: var(--sudl-gray); margin: 0 0 10px; }
.sudl-chart canvas { width: 100% !important; height: 320px !important; display: block; }
.sudl-chart--stacked canvas { height: 280px !important; }

/* 표 */
.sudl-table {
  background: var(--sudl-bg); border: 1px solid var(--sudl-line);
  border-radius: var(--sudl-radius); padding: 14px 16px;
  overflow-x: auto; margin-bottom: 16px;
}
.sudl-table h3 { font-size: .9375rem; margin: 0 0 10px; letter-spacing: -.02em; }
.sudl-table table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.sudl-table th, .sudl-table td {
  border-bottom: 1px solid var(--sudl-soft);
  padding: 7px 9px; text-align: right; white-space: nowrap;
}
.sudl-table th {
  position: sticky; top: 0; background: var(--sudl-soft);
  font-size: .75rem; font-weight: 700; border-bottom: 2px solid var(--sudl-line);
}
.sudl-table th:first-child, .sudl-table td:first-child { text-align: left; }
.sudl-table tbody tr:hover { background: var(--sudl-soft); }

.sudl-section { margin-bottom: 32px; }
.sudl-section__title { font-size: 1.125rem; margin: 0 0 6px; letter-spacing: -.02em; }
.sudl-section__desc { font-size: .875rem; color: var(--sudl-gray); margin: 0 0 12px; }
.sudl-nodata { font-size: .8125rem; color: var(--sudl-gray); padding: 16px 0; text-align: center; }

@media (max-width: 600px) {
  .sudl-chart canvas { height: 260px !important; }
  .sudl-filters label { flex: 1 1 45%; }
  .sudl-filters select { flex: 1; min-width: 0; }
}