Update assets/styles.css

assets/styles.css

@@ -84,3 +84,43 @@ html, body{
 @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;
+}
+