/* ─────────────────────────────────────────────────────────────────────────
   개인사업자재무(fss) 전용 스타일 — "Clean White" 시안 적용.
   공용 레이아웃(상단바/사이드바/푸터)은 건드리지 않도록 모든 규칙을
   .fss-page 이하 + fss- 접두 클래스로만 스코프한다.
   ───────────────────────────────────────────────────────────────────────── */

.fss-page {
  --fss-surface:   #FFFFFF;
  --fss-bg:        #FCFCFD;
  --fss-border:    #EDEFF2;
  --fss-border2:   #EAECEF;
  --fss-text:      #16181D;
  --fss-muted:     #6B7280;
  --fss-muted2:    #4A5160;
  --fss-accent:    #2563EB;
  --fss-accent-hv: #1D4ED8;
  --fss-input-bd:  #DFE3E8;
  --fss-row-line:  #F0F2F5;
  --fss-pill-bg:   #F4F6F8;
  --fss-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 시안(참조 HTML)은 사이드바를 제외한 본문 전체 폭을 그대로 쓰는 레이아웃.
   기본 .container 의 max-width:1100px + margin:0 auto(가운데 정렬)를 이 페이지에서만 해제해
   사이드바 옆 남은 폭 전체를 채운다. 아래 breakpoint 값들은 참조 HTML의 .app-content 패딩과 동일. */
.fss-page .container {
  max-width: none;
  margin: 0;
  padding: 28px 36px 60px;
  background: var(--fss-bg);
}

@media (min-width: 1400px) {
  .fss-page .container { padding: 32px 48px 64px; }
}

/* ── 페이지 헤더 (컨테이너 패딩만큼 좌우/위로 확장해 폭 전체 밴드처럼 보이게) ── */
.fss-head {
  margin: -28px -36px 24px;
  padding: 22px 36px;
  background: var(--fss-surface);
  border-bottom: 1px solid var(--fss-border2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.fss-head-crumb { font-size: 12px; color: var(--fss-muted); margin-bottom: 6px; }
.fss-head-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--fss-text);
}
.fss-head-desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--fss-muted);
  max-width: 560px;
  line-height: 1.5;
}
.fss-head-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--fss-bg);
  border: 1px solid var(--fss-border2);
  color: var(--fss-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.fss-head-cta:hover { background: var(--fss-pill-bg); text-decoration: none; }

/* ── 본문 스택 ── */
.fss-body { display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }

/* ── 탭 바 ── */
.fss-tabs {
  display: inline-flex;
  background: var(--fss-pill-bg);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  width: fit-content;
}
.fss-tab {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--fss-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fss-tab:hover { color: var(--fss-text); }
.fss-tab.is-active {
  background: var(--fss-surface);
  color: var(--fss-accent);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.08);
}

/* ── KPI 카드 ── */
.fss-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fss-kpi {
  background: var(--fss-surface);
  border: 1px solid var(--fss-border2);
  border-radius: 12px;
  padding: 18px 20px;
}
.fss-kpi-label { font-size: 12.5px; color: var(--fss-muted); font-weight: 600; margin-bottom: 10px; }
.fss-kpi-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fss-kpi-value {
  font-family: var(--fss-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--fss-text);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.fss-kpi-tag {
  font-family: var(--fss-mono);
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--fss-pill-bg);
  color: var(--fss-muted);
}
.fss-kpi-tag.up   { background: #E8F6EE; color: #127C4A; }
.fss-kpi-tag.down { background: #FDEEEE; color: #C93B3B; }

/* ── 조회 조건 카드 ── */
.fss-card {
  background: var(--fss-surface);
  border: 1px solid var(--fss-border2);
  border-radius: 12px;
  padding: 22px 24px;
}
.fss-card-title { font-size: 14px; font-weight: 700; color: var(--fss-text); margin-bottom: 16px; }
.fss-filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fss-field label {
  display: block;
  font-size: 12px;
  color: var(--fss-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.fss-field input,
.fss-field select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--fss-input-bd);
  font-family: inherit;
  font-size: 13px;
  color: var(--fss-text);
  background: var(--fss-surface);
}
.fss-field input:focus,
.fss-field select:focus {
  outline: none;
  border-color: var(--fss-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* 최소~최대 한 쌍 */
.fss-range { display: flex; align-items: center; gap: 6px; }
.fss-range span { color: var(--fss-muted); font-size: 12px; flex-shrink: 0; }
.fss-range input { min-width: 0; }

.fss-actions { display: flex; gap: 10px; margin-top: 16px; }
.fss-btn-primary {
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  background: var(--fss-accent);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.fss-btn-primary:hover { background: var(--fss-accent-hv); }
.fss-btn-ghost {
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--fss-input-bd);
  background: var(--fss-surface);
  color: var(--fss-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.fss-btn-ghost:hover { background: var(--fss-pill-bg); }

/* ── 결과 카드 ── */
.fss-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.fss-results-title { font-size: 14px; font-weight: 700; color: var(--fss-text); }
.fss-results-meta { font-size: 12.5px; color: var(--fss-muted); }
.fss-results-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
/* 컬럼이 많은 모드(재무정보조회) 등 한 줄 배치일 때는 차트를 표 아래로 내린다 */
.fss-results-body.is-single { grid-template-columns: minmax(0, 1fr); }
.fss-results-body.is-single > .fss-chart-slot {
  max-width: 620px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--fss-row-line);
}

/* ── 테이블 ── */
.fss-table-wrap { overflow-x: auto; min-width: 0; }
.fss-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fss-table th {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--fss-muted);
  font-weight: 700;
  background: #FAFBFC;
  border-bottom: 1px solid var(--fss-border2);
  white-space: nowrap;
  text-align: left;
}
.fss-table th.num { text-align: right; }
.fss-table td { padding: 11px 12px; color: var(--fss-text); white-space: nowrap; }
.fss-table td.num { text-align: right; font-family: var(--fss-mono); }
.fss-table tbody tr { border-top: 1px solid var(--fss-row-line); }
.fss-table tbody tr:hover { background: #FAFBFC; }

.fss-note { font-size: 13px; color: var(--fss-muted); margin: 0; padding: 26px 0; text-align: center; }
.fss-note.err { color: #C93B3B; }

/* ── 페이지네이션 ── */
.fss-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.fss-page-btn {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--fss-input-bd);
  background: var(--fss-surface);
  color: var(--fss-muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.fss-page-btn:hover:not(:disabled) { background: var(--fss-pill-bg); color: var(--fss-text); }
.fss-page-btn:disabled { opacity: 0.45; cursor: default; }
.fss-page-num {
  padding: 6px 11px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--fss-muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.fss-page-num:hover { background: var(--fss-pill-bg); color: var(--fss-text); }
.fss-page-num.is-active { background: var(--fss-accent); color: #FFFFFF; font-weight: 700; }
.fss-page-num.is-active:hover { background: var(--fss-accent); color: #FFFFFF; }

/* ── 차트 ── */
.fss-chart-label { font-size: 12.5px; color: var(--fss-muted); font-weight: 600; margin-bottom: 14px; }
.fss-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 180px;
  padding: 0 4px;
  border-bottom: 1px solid var(--fss-row-line);
}
.fss-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  min-width: 0;
}
.fss-chart-val { font-family: var(--fss-mono); font-size: 11px; color: var(--fss-muted); font-weight: 600; }
.fss-chart-fill {
  width: 100%;
  max-width: 34px;
  background: var(--fss-accent);
  border-radius: 5px 5px 0 0;
}
.fss-chart-labels { display: flex; gap: 14px; padding: 8px 4px 0; }
.fss-chart-labels > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--fss-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ 반응형 ═══ */
@media (max-width: 1024px) {
  .fss-page .container { padding: 20px 20px 40px; }
  .fss-head { margin: -20px -20px 24px; padding: 18px 20px; }

  .fss-kpis { grid-template-columns: repeat(2, 1fr); }
  .fss-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .fss-results-body { grid-template-columns: minmax(0, 1fr); }
  .fss-results-body > .fss-chart-slot {
    max-width: 620px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--fss-row-line);
  }
}

@media (max-width: 640px) {
  .fss-page .container { padding: 16px 12px 32px; }
  .fss-head { margin: -16px -12px 16px; padding: 16px 12px; flex-direction: column; gap: 12px; }
  .fss-head-title { font-size: 18px; }
  .fss-head-desc { font-size: 12.5px; }
  .fss-head-cta { width: 100%; justify-content: center; }

  .fss-body { gap: 16px; }
  .fss-tabs { width: 100%; }
  .fss-tab { flex: 1; text-align: center; padding: 9px 10px; font-size: 12px; }

  .fss-kpis { grid-template-columns: 1fr; }
  .fss-kpi-value { font-size: 22px; }

  .fss-filter-grid { grid-template-columns: 1fr; }
  .fss-actions { flex-direction: column; }
  .fss-actions .fss-btn-primary,
  .fss-actions .fss-btn-ghost { width: 100%; }

  .fss-card { padding: 16px 14px; }
  .fss-table { font-size: 12px; }
  .fss-table th, .fss-table td { padding: 8px; }

  .fss-chart-bars { height: 140px; gap: 8px; }
  .fss-chart-fill { max-width: 28px; }
  .fss-chart-labels { gap: 8px; }
  .fss-chart-labels > div { font-size: 10.5px; }
}