assets/styles.css

/* ===== Flat Minimal theme (no shadows, no glass, no gradients) ===== */

/* 페이지 기본톤 */
:root{
  --bg: #f6f7fb;
  --card-bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --grid: #e5e7eb;
  --radius: 12px;
}

/* 전체 페이지 */
html, body{
  background: var(--bg) !important;
  color: var(--text);
  font-family: Inter, Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* 헤더/컨트롤/카드: 그림자·블러 제거, 플랫 보더만 */
.header,
.control-card,
.chart-card,
.datacard{
  background: var(--card-bg) !important;
  border: 1px solid #eaecef !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Plotly 그래프 컨테이너: 플랫 카드 */
.js-plotly-plot{
  background: var(--card-bg) !important;
  border: 1px solid #eaecef !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 8px !important;
}

/* Sankey 높이 락(필요 시 유지) */
#fig-sankey .js-plotly-plot,
#fig-sankey .plot-container,
#fig-sankey .main-svg{
  height: 420px !important;
}

/* Dash DataTable */
.dash-table-container{
  background: var(--card-bg) !important;
  border: 1px solid #eaecef !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
}
.dash-table-container .dash-spreadsheet-container{
  border: none !important;
}

/* Tabs (워터폴/PPC) */
.tab, .tab--selected{
  background: var(--card-bg) !important;
  border: 1px solid #eaecef !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin-right: 8px;
}

/* 선택/드롭다운 등(사용 중이면) */
.continent-select .mantine-Select-input,
.country-select .mantine-Select-input{
  background: #fff !important;
  border: 1px solid #eaecef !important;
  color: var(--text) !important;
}
.mantine-Select-dropdown{
  background: #fff !important;
  border: 1px solid #eaecef !important;
}

/* 반응형 여백 */
@media (max-width: 768px){
  .control-card, .chart-card{ margin: 10px 0 !important; }
}

/* ---- Clean Tabs (워터폴/PPC) : 보더/외곽선 제거 + 밑줄형 선택 표시 ---- */
#tab-right{               /* dcc.Tabs(id="tab-right") */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 개별 탭 버튼: 보더/배경 제거, 텍스트만 */
#tab-right .tab{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  padding: 10px 14px !important;
  margin-right: 8px !important;
  border-bottom: 2px solid transparent !important;  /* 기본은 밑줄 없음 */
}

/* 선택된 탭: 진한 밑줄만 */
#tab-right .tab--selected{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid #0f172a !important;
  font-weight: 600 !important;
}

/* 포커스 외곽선(회색 링) 제거 – 접근성은 focus-visible로 대체 */
#tab-right .tab:focus{ outline: none !important; box-shadow: none !important; }
#tab-right .tab:focus-visible{ outline: 2px solid #2563eb !important; outline-offset: 2px; }

/* 탭 컨텐츠 박스 보더 제거 */
#tab-right .tab-content{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Plotly 컨테이너 외곽선/그림자 제거 */
.js-plotly-plot{
  border: none !important;
  box-shadow: none !important;
  padding: 8px !important; /* 내부 여백만 유지 */
}

/* 카드 컨테이너(혹시 클래스로 쓰면) */
.chart-card, .control-card, .datacard{
  border: none !important;
  box-shadow: none !important;
}