commit_diff.txt

commit 425b375665fa200aaaf9b34db7c4317885c1a4ca
Author: Hoya <jungch@naver.com>
Date:   Tue Feb 24 15:36:40 2026 +0900

    feat(etf_one): Enhance ETF app with KIS API, new metrics & clear-all feature

diff --git a/dashboard/src/app/page.tsx b/dashboard/src/app/page.tsx
index 905f373..331f4e6 100644
--- a/dashboard/src/app/page.tsx
+++ b/dashboard/src/app/page.tsx
@@ -33,17 +33,65 @@ export default function Home() {
   const [selectedDetailEtf, setSelectedDetailEtf] = useState<any>(null);
   const [popupPeriod, setPopupPeriod] = useState<string>('1Y');
 
+  const [showIntro, setShowIntro] = useState(true);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (showIntro && isClient) {
+      const timer = setTimeout(() => setShowIntro(false), 2800);
+      return () => clearTimeout(timer);
+    }
+  }, [showIntro, isClient]);
+
+  const handleReset = () => {
+    setSlots([
+      { search: "", code: "" },
+      { search: "", code: "" },
+      { search: "", code: "" },
+      { search: "", code: "" },
+      { search: "", code: "" },
+    ]);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem('etf_current_slots');
+    }
+    setGlobalSearch("");
+    setData(null);
+    setActiveTab('info');
+    setShowIntro(true);
+  };
+
   useEffect(() => {
     if (typeof window !== "undefined") {
-      const saved = localStorage.getItem('etf_favorites');
-      if (saved) {
-        try { setFavorites(JSON.parse(saved)); } catch (e) { }
+      const savedFavs = localStorage.getItem('etf_favorites');
+      if (savedFavs) {
+        try { setFavorites(JSON.parse(savedFavs)); } catch (e) { }
       } else {
         setFavorites([{ id: 'default', name: '내 관심종목', items: [] }]);
       }
+
+      const savedSlots = localStorage.getItem('etf_current_slots');
+      if (savedSlots) {
+        try {
+          const parsed = JSON.parse(savedSlots);
+          if (Array.isArray(parsed) && parsed.length === 5) {
+            setSlots(parsed);
+          }
+        } catch (e) { }
+      }
     }
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Don't save completely empty initial state if we just loaded
+      localStorage.setItem('etf_current_slots', JSON.stringify(slots));
+    }
+  }, [slots]);
+
   const saveFavorites = (favs: FavGroup[]) => {
     setFavorites(favs);
     if (typeof window !== "undefined") {
@@ -98,6 +146,12 @@ export default function Home() {
       { search: "", code: "" },
       { search: "", code: "" },
     ]);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem('etf_current_slots');
+    }
+    setGlobalSearch("");
+    setData(null);
+    setActiveTab('info');
   };
 
   const selectEtfGlobal = (code: string, name: string, isMulti: boolean = false) => {
@@ -442,10 +496,18 @@ export default function Home() {
       let baseBench = 0;
       let minYield = 0;
       let maxYield = 0;
+      let lastBenchVal = 0;
 
       oneYearGlimpse.forEach((d: any, idx: number) => {
         const price = d[etfKey] || d[`${etfKey}_raw`] || 0;
-        const benchVal = d[benchKey] || 0;
+        let benchVal = d[benchKey];
+
+        // Carry forward previous benchmark value on holidays where data is missing
+        if (benchVal === undefined || benchVal === null || benchVal === 0) {
+          benchVal = lastBenchVal;
+        } else {
+          lastBenchVal = benchVal;
+        }
 
         if (price > 0) {
           if (basePrice === 0) {
@@ -582,13 +644,76 @@ export default function Home() {
 
   return (
     <main className="flex min-h-screen flex-col items-center p-4 md:p-8 md:pb-16 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-[#0a0a0a] to-black text-gray-100 font-sans selection:bg-indigo-500/30 overflow-x-hidden relative">
+      {/* Elegant Deep Space Portal Intro */}
+      {showIntro && (
+        <div className="fixed inset-0 z-[1000] bg-[#030712] overflow-hidden pointer-events-none flex items-center justify-center transition-opacity duration-1000">
+          <style dangerouslySetInnerHTML={{
+            __html: `
+            @keyframes smooth-zoom {
+              0% { transform: scale(0.5); opacity: 0; filter: blur(20px); }
+              30% { opacity: 1; filter: blur(4px); }
+              70% { opacity: 1; filter: blur(0px); }
+              100% { transform: scale(30); opacity: 0; filter: blur(10px); }
+            }
+            @keyframes slow-spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+            @keyframes star-fly {
+              0% { transform: translate(-50%, -50%) translateZ(-500px) scale(0); opacity: 0; }
+              20% { opacity: 0.8; }
+              100% { transform: translate(-50%, -50%) translateZ(1000px) scale(3); opacity: 0; }
+            }
+            .perspective-wrap { perspective: 800px; transform-style: preserve-3d; }
+          `}} />
+
+          {/* Elegant Starfield */}
+          <div className="absolute inset-0 perspective-wrap">
+            {isClient && Array.from({ length: 60 }).map((_, i) => {
+              const angle = Math.random() * Math.PI * 2;
+              const radius = 10 + Math.random() * 50;
+              const startX = 50 + Math.cos(angle) * radius;
+              const startY = 50 + Math.sin(angle) * radius;
+              return (
+                <div key={i} className="absolute rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.9)]"
+                  style={{
+                    left: `${startX}%`,
+                    top: `${startY}%`,
+                    width: `${Math.random() * 2 + 1}px`,
+                    height: `${Math.random() * 2 + 1}px`,
+                    opacity: 0,
+                    animation: `star-fly ${1.5 + Math.random() * 1.5}s ease-in ${Math.random() * 0.5}s forwards`
+                  }}
+                />
+              );
+            })}
+          </div>
+
+          {/* Elegant Expanding Portal */}
+          <div className="absolute flex items-center justify-center animate-[smooth-zoom_2.8s_cubic-bezier(0.5,0,0.1,1)_forwards]">
+            {/* Outer Nebula Glow */}
+            <div className="absolute w-[40vh] h-[40vh] sm:w-[50vh] sm:h-[50vh] rounded-full border border-indigo-500/10 blur-md animate-[slow-spin_15s_linear_infinite]"
+              style={{ boxShadow: '0 0 150px rgba(79,70,229,0.3), inset 0 0 150px rgba(79,70,229,0.3)' }}>
+            </div>
+
+            {/* Inner Ring */}
+            <div className="absolute w-[25vh] h-[25vh] sm:w-[30vh] sm:h-[30vh] rounded-full border border-cyan-400/20 mix-blend-screen animate-[slow-spin_10s_linear_infinite_reverse]"
+              style={{ boxShadow: '0 0 80px rgba(34,211,238,0.4), inset 0 0 80px rgba(34,211,238,0.4)' }}>
+            </div>
+
+            {/* Core Lens */}
+            <Aperture className="w-[8vh] h-[8vh] sm:w-[12vh] sm:h-[12vh] text-white/90 drop-shadow-[0_0_30px_rgba(255,255,255,0.8)] animate-[slow-spin_6s_linear_infinite]" />
+          </div>
+        </div>
+      )}
+
       <header className="w-full max-w-[95vw] xl:max-w-[1400px] mb-6 flex flex-col md:flex-row justify-between items-center gap-4 relative z-10">
-        <div className="flex flex-col items-start w-full md:w-auto">
-          <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 drop-shadow-sm flex items-center gap-3">
-            <Aperture className="w-8 h-8 md:w-10 md:h-10 text-indigo-400" />
+        <div className="flex flex-col items-start w-full md:w-auto cursor-pointer group" onClick={handleReset}>
+          <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 drop-shadow-sm flex items-center gap-3 group-hover:opacity-80 transition-opacity">
+            <Aperture className="w-8 h-8 md:w-10 md:h-10 text-indigo-400 group-hover:rotate-180 transition-transform duration-700" />
             ETF Lens
           </h1>
-          <p className="text-xs md:text-sm text-gray-400 mt-1 font-medium tracking-wide">Understand ETFs, Through the Lens of Data.</p>
+          <p className="text-xs md:text-sm text-gray-400 mt-1 font-medium tracking-wide group-hover:text-gray-300 transition-colors">Understand ETFs, Through the Lens of Data.</p>
         </div>
         <div className="px-4 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-md shadow-[0_0_15px_rgba(79,70,229,0.1)] text-xs font-semibold text-indigo-300 tracking-wider">
           PRO EDITION
@@ -825,1038 +950,1044 @@ export default function Home() {
       </section>
 
       {/* Results Section */}
-      {data && data.data_payload && (
-        <div className="w-full max-w-[95vw] xl:max-w-[1400px] flex flex-col relative z-10 animate-in fade-in slide-in-from-bottom-5 duration-700">
-
-          {/* Tab Navigation and Period Selector Row */}
-          <div className="w-full z-40 relative">
-            <div className="flex bg-white/5 rounded-t-2xl p-1.5 border border-white/10 border-b-0 w-full shadow-2xl backdrop-blur-md relative">
-              <div className="flex w-full gap-1">
-                {[
-                  { id: 'info', label: '기본정보' },
-                  { id: 'chart', label: '차트' },
-                  { id: 'holdings', label: '구성종목' }
-                ].map(tab => (
-                  <div
-                    key={tab.id}
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onClick={() => setActiveTab(tab.id as any)}
-                    role="button"
-                    tabIndex={0}
-                    className={`flex-1 py-3 px-4 text-sm md:text-base font-bold rounded-xl transition-all border border-transparent flex items-center justify-center relative cursor-pointer ${activeTab === tab.id
-                      ? 'bg-indigo-600 border-indigo-400 text-white shadow-[0_0_20px_rgba(79,70,229,0.5)]'
-                      : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
-                      }`}
-                  >
-                    {activeTab === 'chart' && tab.id === 'chart' ? (
-                      <>
-                        <span className="hidden xl:block absolute left-6">{tab.label}</span>
-                        <span className="xl:hidden">{tab.label}</span>
-                        <div className="absolute right-2 top-1/2 -translate-y-1/2 hidden xl:flex bg-black/40 rounded-lg p-1 border border-white/10 overflow-x-auto shadow-2xl backdrop-blur-md z-50">
-                          {['1D', '1W', '1M', '6M', '1Y', '3Y', 'MAX'].map(p => (
-                            <button
-                              key={p}
-                              onClick={(e) => { e.stopPropagation(); setPeriod(p); }}
-                              className={`px-2 py-1 text-[11px] font-bold rounded-md transition-all whitespace-nowrap ${period === p
-                                ? 'bg-indigo-500/80 text-white shadow-md'
-                                : 'text-gray-300 hover:text-white hover:bg-white/10'
-                                }`}
-                            >
-                              {p}
-                            </button>
-                          ))}
-                        </div>
-                      </>
-                    ) : (
-                      <span>{tab.label}</span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Mobile Period Selector (shown below tabs on small screens) */}
-            {activeTab === 'chart' && (
-              <div className="xl:hidden w-full flex justify-end bg-white/5 px-2 pb-2 border-x border-white/10">
-                <div className="flex bg-black/40 rounded-lg p-1 overflow-x-auto shadow-2xl backdrop-blur-md z-50 max-w-full">
-                  {['1D', '1W', '1M', '6M', '1Y', '3Y', 'MAX'].map(p => (
-                    <button
-                      key={p}
-                      onClick={() => setPeriod(p)}
-                      className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all whitespace-nowrap ${period === p
-                        ? 'bg-indigo-500/80 text-white shadow-md'
-                        : 'text-gray-400 hover:text-white hover:bg-white/5'
+      {
+        data && data.data_payload && (
+          <div className="w-full max-w-[95vw] xl:max-w-[1400px] flex flex-col relative z-10 animate-in fade-in slide-in-from-bottom-5 duration-700">
+
+            {/* Tab Navigation and Period Selector Row */}
+            <div className="w-full z-40 relative">
+              <div className="flex bg-white/5 rounded-t-2xl p-1.5 border border-white/10 border-b-0 w-full shadow-2xl backdrop-blur-md relative">
+                <div className="flex w-full gap-1">
+                  {[
+                    { id: 'info', label: '기본정보' },
+                    { id: 'chart', label: '차트' },
+                    { id: 'holdings', label: '구성종목' }
+                  ].map(tab => (
+                    <div
+                      key={tab.id}
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      onClick={() => setActiveTab(tab.id as any)}
+                      role="button"
+                      tabIndex={0}
+                      className={`flex-1 py-3 px-4 text-sm md:text-base font-bold rounded-xl transition-all border border-transparent flex items-center justify-center relative cursor-pointer ${activeTab === tab.id
+                        ? 'bg-indigo-600 border-indigo-400 text-white shadow-[0_0_20px_rgba(79,70,229,0.5)]'
+                        : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                         }`}
                     >
-                      {p}
-                    </button>
+                      {activeTab === 'chart' && tab.id === 'chart' ? (
+                        <>
+                          <span className="hidden xl:block absolute left-6">{tab.label}</span>
+                          <span className="xl:hidden">{tab.label}</span>
+                          <div className="absolute right-2 top-1/2 -translate-y-1/2 hidden xl:flex bg-black/40 rounded-lg p-1 border border-white/10 overflow-x-auto shadow-2xl backdrop-blur-md z-50">
+                            {['1D', '1W', '1M', '6M', '1Y', '3Y', 'MAX'].map(p => (
+                              <button
+                                key={p}
+                                onClick={(e) => { e.stopPropagation(); setPeriod(p); }}
+                                className={`px-2 py-1 text-[11px] font-bold rounded-md transition-all whitespace-nowrap ${period === p
+                                  ? 'bg-indigo-500/80 text-white shadow-md'
+                                  : 'text-gray-300 hover:text-white hover:bg-white/10'
+                                  }`}
+                              >
+                                {p}
+                              </button>
+                            ))}
+                          </div>
+                        </>
+                      ) : (
+                        <span>{tab.label}</span>
+                      )}
+                    </div>
                   ))}
                 </div>
               </div>
-            )}
-          </div>
 
-          {activeTab === 'info' && (
-            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 animate-in fade-in slide-in-from-bottom-2 duration-500 bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] mt-0">
-              {/* Table Details */}
-              <section className="col-span-1 lg:col-span-3 overflow-hidden flex flex-col relative group">
-                <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                <h3 className="text-base md:text-lg font-bold mb-3 flex items-center gap-2 relative z-10">
-                  <span className="w-1.5 h-6 bg-gradient-to-b from-indigo-400 to-purple-500 rounded-full"></span>
-                  종합 매트릭스
-                </h3>
-
-                <div className="overflow-x-auto pb-6 relative z-10">
-                  <table className="w-full text-left border-collapse whitespace-nowrap">
-                    <thead>
-                      <tr className="border-b border-white/10">
-                        {data.data_payload.header.map((h: string, i: number) => (
-                          <th key={i} className="py-2 px-3 text-[11px] font-semibold text-gray-400 uppercase tracking-wider">{h}</th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-white/[0.05]">
-                      {data.data_payload.rows.map((row: string[], i: number) => {
-                        const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                        return (
-                          <tr key={i} className="hover:bg-white/[0.03] transition-colors group/row">
-                            {row.map((cell: string, j: number) => {
-                              const isNegative = cell.includes('-') && cell.includes('%');
-                              const isPositive = cell.includes('%') && !isNegative && parseFloat(cell) > 0;
-                              const matchedEtf = j === 0 && data.raw_data ? data.raw_data.find((e: any) => cell.includes(e.etf_name) || cell.includes(e.etf_code)) : null;
-                              return (
-                                <td key={j}
-                                  className={`py-3 px-3 text-xs xl:text-sm font-medium transition-colors ${j === 0 ? `font-bold max-w-[200px] truncate ${matchedEtf ? 'cursor-pointer hover:underline underline-offset-4' : ''}` :
-                                    isNegative ? 'text-rose-400' :
-                                      isPositive ? 'text-emerald-400' : 'text-gray-200'
-                                    }`}
-                                  style={j === 0 ? { color: glowColors[i % glowColors.length] } : undefined}
-                                  title={j === 0 ? cell : undefined}
-                                  onClick={() => {
-                                    if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                                  }}
-                                >
-                                  {cell}
-                                </td>
-                              )
-                            })}
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
+              {/* Mobile Period Selector (shown below tabs on small screens) */}
+              {activeTab === 'chart' && (
+                <div className="xl:hidden w-full flex justify-end bg-white/5 px-2 pb-2 border-x border-white/10">
+                  <div className="flex bg-black/40 rounded-lg p-1 overflow-x-auto shadow-2xl backdrop-blur-md z-50 max-w-full">
+                    {['1D', '1W', '1M', '6M', '1Y', '3Y', 'MAX'].map(p => (
+                      <button
+                        key={p}
+                        onClick={() => setPeriod(p)}
+                        className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all whitespace-nowrap ${period === p
+                          ? 'bg-indigo-500/80 text-white shadow-md'
+                          : 'text-gray-400 hover:text-white hover:bg-white/5'
+                          }`}
+                      >
+                        {p}
+                      </button>
+                    ))}
+                  </div>
                 </div>
+              )}
+            </div>
 
-                <div className="mt-auto pt-4 border-t border-white/10 relative z-10">
-                  <div className="p-4 bg-gradient-to-r from-indigo-900/40 via-purple-900/20 to-transparent rounded-xl border border-indigo-500/20 shadow-[inset_0_0_20px_rgba(79,70,229,0.05)] backdrop-blur-sm">
-                    <h4 className="font-bold text-indigo-300 text-xs mb-2 flex items-center gap-2 uppercase tracking-wider">✨ Quant Insight</h4>
-                    <p className="text-indigo-50 text-sm leading-relaxed font-light block">{data.data_payload.insight_comment}</p>
+            {activeTab === 'info' && (
+              <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 animate-in fade-in slide-in-from-bottom-2 duration-500 bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] mt-0">
+                {/* Table Details */}
+                <section className="col-span-1 lg:col-span-3 overflow-hidden flex flex-col relative group">
+                  <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  <h3 className="text-base md:text-lg font-bold mb-3 flex items-center gap-2 relative z-10">
+                    <span className="w-1.5 h-6 bg-gradient-to-b from-indigo-400 to-purple-500 rounded-full"></span>
+                    종합 매트릭스
+                  </h3>
+
+                  <div className="overflow-x-auto pb-6 relative z-10">
+                    <table className="w-full text-left border-collapse whitespace-nowrap">
+                      <thead>
+                        <tr className="border-b border-white/10">
+                          {data.data_payload.header.map((h: string, i: number) => (
+                            <th key={i} className="py-2 px-3 text-[11px] font-semibold text-gray-400 uppercase tracking-wider">{h}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-white/[0.05]">
+                        {data.data_payload.rows.map((row: string[], i: number) => {
+                          const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                          return (
+                            <tr key={i} className="hover:bg-white/[0.03] transition-colors group/row">
+                              {row.map((cell: string, j: number) => {
+                                const isNegative = cell.includes('-') && cell.includes('%');
+                                const isPositive = cell.includes('%') && !isNegative && parseFloat(cell) > 0;
+                                const matchedEtf = j === 0 && data.raw_data ? data.raw_data.find((e: any) => cell.includes(e.etf_name) || cell.includes(e.etf_code)) : null;
+                                return (
+                                  <td key={j}
+                                    className={`py-3 px-3 text-xs xl:text-sm font-medium transition-colors ${j === 0 ? `font-bold max-w-[200px] truncate ${matchedEtf ? 'cursor-pointer hover:underline underline-offset-4' : ''}` :
+                                      isNegative ? 'text-rose-400' :
+                                        isPositive ? 'text-emerald-400' : 'text-gray-200'
+                                      }`}
+                                    style={j === 0 ? { color: glowColors[i % glowColors.length] } : undefined}
+                                    title={j === 0 ? cell : undefined}
+                                    onClick={() => {
+                                      if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                                    }}
+                                  >
+                                    {cell}
+                                  </td>
+                                )
+                              })}
+                            </tr>
+                          )
+                        })}
+                      </tbody>
+                    </table>
                   </div>
-                </div>
-              </section>
-
-              {/* Radar Chart */}
-              <section className="bg-white/[0.02] backdrop-blur-3xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-5 border border-white/5 flex flex-col justify-center min-h-[300px] relative group lg:col-span-1">
-                <div className="absolute inset-0 bg-gradient-to-bl from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                <h3 className="text-lg md:text-xl font-bold mb-2 flex items-center gap-3 relative z-10">
-                  <span className="w-1.5 h-6 bg-gradient-to-b from-purple-400 to-pink-500 rounded-full"></span>
-                  팩터 밸런스
-                </h3>
-                <div className="flex-1 w-full min-h-[220px] relative z-10">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <RadarChart cx="50%" cy="50%" outerRadius="70%" data={radarData}>
-                      <PolarGrid stroke="rgba(255,255,255,0.05)" />
-                      <PolarAngleAxis dataKey="subject" tick={{ fill: '#a5b4fc', fontSize: 13, fontWeight: 500 }} />
-                      <PolarRadiusAxis angle={30} domain={[0, 10]} tick={false} axisLine={false} />
-                      {data.visual_data && data.visual_data.etf_keys && data.visual_data.etf_keys.map((etfName: string, idx: number) => {
-                        const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                        const c = glowColors[idx % glowColors.length];
-                        return (
-                          <Radar key={etfName} name={etfName} dataKey={etfName} stroke={c} strokeWidth={2} fill={c} fillOpacity={0.3} />
-                        );
-                      })}
-                      <Tooltip
-                        contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '16px', color: '#fff', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.5)' }}
-                        itemStyle={{ fontWeight: 'bold' }}
-                      />
-                    </RadarChart>
-                  </ResponsiveContainer>
-                </div>
-              </section>
-
-              {/* Detailed Basic Info Inverted Table */}
-              <section className="bg-white/[0.02] backdrop-blur-3xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-5 border border-white/5 lg:col-span-4 mt-2 overflow-x-auto">
-                <h3 className="text-lg md:text-xl font-bold mb-4 flex items-center gap-3">
-                  <span className="w-1.5 h-6 bg-gradient-to-b from-teal-400 to-emerald-500 rounded-full"></span>
-                  기본 정보
-                </h3>
-                <div className="w-full overflow-x-auto overflow-y-auto max-h-[65vh] border border-white/5 rounded-xl relative custom-scrollbar">
-                  <table className="w-full text-left border-collapse min-w-[800px]">
-                    <thead className="sticky top-0 z-30 backdrop-blur-xl bg-[#0B0F19]/95 shadow-md border-b border-white/10">
-                      <tr>
-                        <th className="py-3 px-4 text-sm font-bold text-gray-500 bg-white/5 w-48">항목</th>
-                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                        {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
+
+                  <div className="mt-auto pt-4 border-t border-white/10 relative z-10">
+                    <div className="p-4 bg-gradient-to-r from-indigo-900/40 via-purple-900/20 to-transparent rounded-xl border border-indigo-500/20 shadow-[inset_0_0_20px_rgba(79,70,229,0.05)] backdrop-blur-sm">
+                      <h4 className="font-bold text-indigo-300 text-xs mb-2 flex items-center gap-2 uppercase tracking-wider">✨ Quant Insight</h4>
+                      <p className="text-indigo-50 text-sm leading-relaxed font-light block">{data.data_payload.insight_comment}</p>
+                    </div>
+                  </div>
+                </section>
+
+                {/* Radar Chart */}
+                <section className="bg-white/[0.02] backdrop-blur-3xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-5 border border-white/5 flex flex-col justify-center min-h-[300px] relative group lg:col-span-1">
+                  <div className="absolute inset-0 bg-gradient-to-bl from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  <h3 className="text-lg md:text-xl font-bold mb-2 flex items-center gap-3 relative z-10">
+                    <span className="w-1.5 h-6 bg-gradient-to-b from-purple-400 to-pink-500 rounded-full"></span>
+                    팩터 밸런스
+                  </h3>
+                  <div className="flex-1 w-full min-h-[220px] relative z-10">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <RadarChart cx="50%" cy="50%" outerRadius="70%" data={radarData}>
+                        <PolarGrid stroke="rgba(255,255,255,0.05)" />
+                        <PolarAngleAxis dataKey="subject" tick={{ fill: '#a5b4fc', fontSize: 13, fontWeight: 500 }} />
+                        <PolarRadiusAxis angle={30} domain={[0, 10]} tick={false} axisLine={false} />
+                        {data.visual_data && data.visual_data.etf_keys && data.visual_data.etf_keys.map((etfName: string, idx: number) => {
                           const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                          const c = glowColors[idx % glowColors.length];
                           return (
-                            <th key={etf.etf_code} className="py-3 px-4 text-sm font-bold text-center group cursor-pointer hover:bg-white/[0.05] transition-colors" onClick={() => setSelectedDetailEtf(etf)} style={{ color: glowColors[idx % glowColors.length] }}>
-                              <span className="group-hover:underline underline-offset-4">{etf.etf_name}</span>
-                            </th>
+                            <Radar key={etfName} name={etfName} dataKey={etfName} stroke={c} strokeWidth={2} fill={c} fillOpacity={0.3} />
                           );
                         })}
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-white/[0.05]">
-                      {['운용사', '최초데이터(상장추정)', '순자산총액', '상장주식수', '52주 최고/최저', '거래량/거래대금', '20일평균 거래량/대금', '펀드보수', '최근 분배율(TTM)', '1M 수익률', '3M 수익률', '6M 수익률', '1Y 수익률'].map((key) => {
-                        const isNumericRow = !['운용사', '최초데이터(상장추정)'].includes(key);
-                        const isSplitRow = ['52주 최고/최저', '거래량/거래대금', '20일평균 거래량/대금'].includes(key);
-                        let maxVal1 = 1;
-                        let maxVal2 = 1;
-
-                        if (isNumericRow && data.raw_data) {
-                          const parsedVals = data.raw_data.map((e: any) => {
-                            const v = e.basic_info?.[key] || '';
-                            let raw = String(v).replace(/,/g, '');
-                            let n1 = 0;
-                            let n2 = 0;
-
-                            if (key === '순자산총액') {
-                              if (raw.includes("조") && raw.includes("억")) {
-                                const parts = raw.split("조");
-                                n1 = (parseFloat(parts[0]) || 0) * 10000 + (parseFloat(parts[1].replace("억", "")) || 0);
-                              } else if (raw.includes("조")) {
-                                n1 = (parseFloat(raw.replace("조", "")) || 0) * 10000;
+                        <Tooltip
+                          contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '16px', color: '#fff', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.5)' }}
+                          itemStyle={{ fontWeight: 'bold' }}
+                        />
+                      </RadarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </section>
+
+                {/* Detailed Basic Info Inverted Table */}
+                <section className="bg-white/[0.02] backdrop-blur-3xl rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-5 border border-white/5 lg:col-span-4 mt-2 overflow-x-auto">
+                  <h3 className="text-lg md:text-xl font-bold mb-4 flex items-center gap-3">
+                    <span className="w-1.5 h-6 bg-gradient-to-b from-teal-400 to-emerald-500 rounded-full"></span>
+                    기본 정보
+                  </h3>
+                  <div className="w-full overflow-x-auto overflow-y-auto max-h-[65vh] border border-white/5 rounded-xl relative custom-scrollbar">
+                    <table className="w-full text-left border-collapse min-w-[800px]">
+                      <thead className="sticky top-0 z-30 backdrop-blur-xl bg-[#0B0F19]/95 shadow-md border-b border-white/10">
+                        <tr>
+                          <th className="py-3 px-4 text-sm font-bold text-gray-500 bg-white/5 w-48">항목</th>
+                          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                          {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
+                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                            return (
+                              <th key={etf.etf_code} className="py-3 px-4 text-sm font-bold text-center group cursor-pointer hover:bg-white/[0.05] transition-colors" onClick={() => setSelectedDetailEtf(etf)} style={{ color: glowColors[idx % glowColors.length] }}>
+                                <span className="group-hover:underline underline-offset-4">{etf.etf_name}</span>
+                              </th>
+                            );
+                          })}
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-white/[0.05]">
+                        {['운용사', '최초데이터(상장추정)', '순자산총액', '상장주식수', '52주 최고/최저', '거래량/거래대금', '20일평균 거래량/대금', '펀드보수', '최근 분배율(TTM)', '1M 수익률', '3M 수익률', '6M 수익률', '1Y 수익률'].map((key) => {
+                          const isNumericRow = !['운용사', '최초데이터(상장추정)'].includes(key);
+                          const isSplitRow = ['52주 최고/최저', '거래량/거래대금', '20일평균 거래량/대금'].includes(key);
+                          let maxVal1 = 1;
+                          let maxVal2 = 1;
+
+                          if (isNumericRow && data.raw_data) {
+                            const parsedVals = data.raw_data.map((e: any) => {
+                              const v = e.basic_info?.[key] || '';
+                              let raw = String(v).replace(/,/g, '');
+                              let n1 = 0;
+                              let n2 = 0;
+
+                              if (key === '순자산총액') {
+                                if (raw.includes("조") && raw.includes("억")) {
+                                  const parts = raw.split("조");
+                                  n1 = (parseFloat(parts[0]) || 0) * 10000 + (parseFloat(parts[1].replace("억", "")) || 0);
+                                } else if (raw.includes("조")) {
+                                  n1 = (parseFloat(raw.replace("조", "")) || 0) * 10000;
+                                } else {
+                                  n1 = parseFloat(raw.replace("억", "")) || 0;
+                                }
+                              } else if (isSplitRow && raw.includes('/')) {
+                                const parts = raw.split('/');
+                                n1 = parseFloat(parts[0].replace(/[^0-9.]/g, '')) || 0;
+                                n2 = parseFloat(parts[1].replace(/[^0-9.]/g, '')) || 0;
                               } else {
-                                n1 = parseFloat(raw.replace("억", "")) || 0;
+                                n1 = parseFloat(raw.replace(/[^0-9.-]/g, '')) || 0;
                               }
-                            } else if (isSplitRow && raw.includes('/')) {
-                              const parts = raw.split('/');
-                              n1 = parseFloat(parts[0].replace(/[^0-9.]/g, '')) || 0;
-                              n2 = parseFloat(parts[1].replace(/[^0-9.]/g, '')) || 0;
-                            } else {
-                              n1 = parseFloat(raw.replace(/[^0-9.-]/g, '')) || 0;
-                            }
-                            return [Math.abs(n1), Math.abs(n2)];
-                          });
+                              return [Math.abs(n1), Math.abs(n2)];
+                            });
 
-                          maxVal1 = Math.max(...parsedVals.map((p: any) => p[0])) || 1;
-                          maxVal2 = Math.max(...parsedVals.map((p: any) => p[1])) || 1;
+                            maxVal1 = Math.max(...parsedVals.map((p: any) => p[0])) || 1;
+                            maxVal2 = Math.max(...parsedVals.map((p: any) => p[1])) || 1;
 
-                          // Shared maximum for same-unit metrics to preserve left > right proportions
-                          if (key === '52주 최고/최저') {
-                            const absoluteMax = Math.max(maxVal1, maxVal2);
-                            maxVal1 = absoluteMax;
-                            maxVal2 = absoluteMax;
+                            // Shared maximum for same-unit metrics to preserve left > right proportions
+                            if (key === '52주 최고/최저') {
+                              const absoluteMax = Math.max(maxVal1, maxVal2);
+                              maxVal1 = absoluteMax;
+                              maxVal2 = absoluteMax;
+                            }
                           }
-                        }
 
-                        return (
-                          <tr key={key} className="hover:bg-white/[0.03] transition-colors">
-                            <td className="py-3 px-4 text-xs font-semibold text-gray-400 bg-white/5 align-middle">{key}</td>
-                            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                            {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
-                              const val = etf.basic_info?.[key] || '-';
-                              const isYield = key.includes('수익률');
-                              const isPositive = isYield && typeof val === 'string' && val.includes('%') && !val.includes('-');
-                              const isNegative = isYield && typeof val === 'string' && val.includes('%') && val.includes('-');
-                              const textColor = isPositive ? 'text-rose-400' : isNegative ? 'text-blue-400' : 'text-gray-100';
-
-                              let num1 = 0;
-                              let num2 = 0;
-                              let val1Str = val;
-                              let val2Str = "";
-
-                              if (isNumericRow) {
-                                let raw = String(val).replace(/,/g, '');
-                                if (key === '순자산총액') {
-                                  if (raw.includes("조") && raw.includes("억")) {
-                                    const parts = raw.split("조");
-                                    num1 = (parseFloat(parts[0]) || 0) * 10000 + (parseFloat(parts[1].replace("억", "")) || 0);
-                                  } else if (raw.includes("조")) {
-                                    num1 = (parseFloat(raw.replace("조", "")) || 0) * 10000;
+                          return (
+                            <tr key={key} className="hover:bg-white/[0.03] transition-colors">
+                              <td className="py-3 px-4 text-xs font-semibold text-gray-400 bg-white/5 align-middle">{key}</td>
+                              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                              {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
+                                const val = etf.basic_info?.[key] || '-';
+                                const isYield = key.includes('수익률');
+                                const isPositive = isYield && typeof val === 'string' && val.includes('%') && !val.includes('-');
+                                const isNegative = isYield && typeof val === 'string' && val.includes('%') && val.includes('-');
+                                const textColor = isPositive ? 'text-rose-400' : isNegative ? 'text-blue-400' : 'text-gray-100';
+
+                                let num1 = 0;
+                                let num2 = 0;
+                                let val1Str = val;
+                                let val2Str = "";
+
+                                if (isNumericRow) {
+                                  let raw = String(val).replace(/,/g, '');
+                                  if (key === '순자산총액') {
+                                    if (raw.includes("조") && raw.includes("억")) {
+                                      const parts = raw.split("조");
+                                      num1 = (parseFloat(parts[0]) || 0) * 10000 + (parseFloat(parts[1].replace("억", "")) || 0);
+                                    } else if (raw.includes("조")) {
+                                      num1 = (parseFloat(raw.replace("조", "")) || 0) * 10000;
+                                    } else {
+                                      num1 = parseFloat(raw.replace("억", "")) || 0;
+                                    }
+                                  } else if (isSplitRow && raw.includes('/')) {
+                                    const parts = String(val).split('/');
+                                    val1Str = parts[0].trim();
+                                    val2Str = parts[1].trim();
+                                    num1 = parseFloat(raw.split('/')[0].replace(/[^0-9.]/g, '')) || 0;
+                                    num2 = parseFloat(raw.split('/')[1].replace(/[^0-9.]/g, '')) || 0;
                                   } else {
-                                    num1 = parseFloat(raw.replace("억", "")) || 0;
+                                    num1 = parseFloat(raw.replace(/[^0-9.-]/g, '')) || 0;
                                   }
-                                } else if (isSplitRow && raw.includes('/')) {
-                                  const parts = String(val).split('/');
-                                  val1Str = parts[0].trim();
-                                  val2Str = parts[1].trim();
-                                  num1 = parseFloat(raw.split('/')[0].replace(/[^0-9.]/g, '')) || 0;
-                                  num2 = parseFloat(raw.split('/')[1].replace(/[^0-9.]/g, '')) || 0;
-                                } else {
-                                  num1 = parseFloat(raw.replace(/[^0-9.-]/g, '')) || 0;
+                                  num1 = Math.abs(num1);
+                                  num2 = Math.abs(num2);
                                 }
-                                num1 = Math.abs(num1);
-                                num2 = Math.abs(num2);
-                              }
-
-                              const formatVisHeight = (n: number, max: number) => {
-                                if (n === 0 || max === 0) return 0;
-                                const ratio = n / max;
-                                return Math.min(100, Math.max(4, Math.pow(ratio, 0.45) * 100));
-                              };
-
-                              const widthH1 = isNumericRow ? formatVisHeight(num1, maxVal1) : 0;
-                              const widthH2 = isNumericRow && isSplitRow ? formatVisHeight(num2, maxVal2) : 0;
-                              const glowColors = ["bg-indigo-500", "bg-emerald-500", "bg-amber-500", "bg-rose-500", "bg-purple-500", "bg-cyan-500"];
-                              const secColors = ["bg-indigo-400/50", "bg-emerald-400/50", "bg-amber-400/50", "bg-rose-400/50", "bg-purple-400/50", "bg-cyan-400/50"];
 
-                              return (
-                                <td key={etf.etf_code} className={`py-3 px-2 2xl:px-4 text-[13px] 2xl:text-sm font-medium ${textColor} h-full`}>
-                                  {!isNumericRow ? (
-                                    <div className="flex items-center justify-center h-full w-full">{val}</div>
-                                  ) : (
-                                    <div className="flex flex-col items-center justify-end w-full min-h-[50px] gap-2 pt-2">
-                                      <div className="flex items-end justify-center w-full h-[46px] gap-2 px-1">
-                                        <div className="w-full max-w-[80px] bg-black/40 rounded-t-md border-b border-white/10 flex flex-col justify-end overflow-hidden h-full">
-                                          <div className={`w-full ${glowColors[idx % glowColors.length]} transition-all duration-700`} style={{ height: `${widthH1}%` }} />
-                                        </div>
-                                        {isSplitRow && val2Str && (
+                                const formatVisHeight = (n: number, max: number) => {
+                                  if (n === 0 || max === 0) return 0;
+                                  const ratio = n / max;
+                                  return Math.min(100, Math.max(4, Math.pow(ratio, 0.45) * 100));
+                                };
+
+                                const widthH1 = isNumericRow ? formatVisHeight(num1, maxVal1) : 0;
+                                const widthH2 = isNumericRow && isSplitRow ? formatVisHeight(num2, maxVal2) : 0;
+                                const glowColors = ["bg-indigo-500", "bg-emerald-500", "bg-amber-500", "bg-rose-500", "bg-purple-500", "bg-cyan-500"];
+                                const secColors = ["bg-indigo-400/50", "bg-emerald-400/50", "bg-amber-400/50", "bg-rose-400/50", "bg-purple-400/50", "bg-cyan-400/50"];
+
+                                return (
+                                  <td key={etf.etf_code} className={`py-3 px-2 2xl:px-4 text-[13px] 2xl:text-sm font-medium ${textColor} h-full`}>
+                                    {!isNumericRow ? (
+                                      <div className="flex items-center justify-center h-full w-full">{val}</div>
+                                    ) : (
+                                      <div className="flex flex-col items-center justify-end w-full min-h-[50px] gap-2 pt-2">
+                                        <div className="flex items-end justify-center w-full h-[46px] gap-2 px-1">
                                           <div className="w-full max-w-[80px] bg-black/40 rounded-t-md border-b border-white/10 flex flex-col justify-end overflow-hidden h-full">
-                                            <div className={`w-full ${secColors[idx % secColors.length]} transition-all duration-700`} style={{ height: `${widthH2}%` }} />
+                                            <div className={`w-full ${glowColors[idx % glowColors.length]} transition-all duration-700`} style={{ height: `${widthH1}%` }} />
                                           </div>
-                                        )}
-                                      </div>
-                                      <div className="flex w-full items-center justify-center gap-2 text-center text-[11px] 2xl:text-xs">
-                                        <span className="flex-1 min-w-[30px]">{val1Str}</span>
-                                        {isSplitRow && val2Str && <span className="flex-1 opacity-70 min-w-[30px]">{val2Str}</span>}
+                                          {isSplitRow && val2Str && (
+                                            <div className="w-full max-w-[80px] bg-black/40 rounded-t-md border-b border-white/10 flex flex-col justify-end overflow-hidden h-full">
+                                              <div className={`w-full ${secColors[idx % secColors.length]} transition-all duration-700`} style={{ height: `${widthH2}%` }} />
+                                            </div>
+                                          )}
+                                        </div>
+                                        <div className="flex w-full items-center justify-center gap-2 text-center text-[11px] 2xl:text-xs">
+                                          <span className="flex-1 min-w-[30px]">{val1Str}</span>
+                                          {isSplitRow && val2Str && <span className="flex-1 opacity-70 min-w-[30px]">{val2Str}</span>}
+                                        </div>
                                       </div>
-                                    </div>
-                                  )}
-                                </td>
-                              )
-                            })}
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </section>
-
-              {/* Sub-Charts Section Moved to Info Tab per Request */}
-              {additionalStatsData.length > 0 && (
-                <div className="lg:col-span-4 grid grid-cols-1 lg:grid-cols-3 gap-4 mt-2">
-                  {/* AUM Chart */}
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
-                    <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
-                      <span className="w-1.5 h-4 bg-indigo-400 rounded-full"></span>
-                      순자산총액 <span className="text-[10px] text-gray-500 font-normal">(단위: 억 원)</span>
-                    </h3>
-                    <div className="flex-1 w-full h-[180px] relative z-10">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
-                          <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => Math.floor(val / 10000) > 0 ? `${Math.floor(val / 10000)}조` : val} stroke="rgba(255,255,255,0.05)" axisLine={false} />
-                          <YAxis dataKey="name" type="category" width={80} stroke="rgba(255,255,255,0.05)" axisLine={false} interval={0} tick={(props: any) => {
-                            const { x, y, payload } = props;
-                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                            const dataIndex = additionalStatsData.findIndex((d: any) => d.name === payload.value);
-                            const val = payload.value.length > 7 ? payload.value.substring(0, 6) + '..' : payload.value;
-                            return (
-                              <text
-                                onClick={() => {
-                                  const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === payload.value || d.etf_code === payload.value);
-                                  if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                                }}
-                                style={{ cursor: 'pointer' }}
-                                x={x} y={y} dy={4} textAnchor="end" fill={glowColors[dataIndex >= 0 ? dataIndex % 5 : 0]} fontSize={11} fontWeight={600}
-                              >
-                                {val}
-                              </text>
-                            );
-                          }} />
-                          <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(79, 70, 229, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#818cf8', fontWeight: 'bold' }} />
-                          <Bar dataKey="aum" name="순자산(억)" radius={[0, 4, 4, 0]}>
-                            {additionalStatsData.map((_: any, idx: number) => (
-                              <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
-                            ))}
-                          </Bar>
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-
-                  {/* Dividend Chart */}
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
-                    <div className="absolute inset-0 bg-gradient-to-tr from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
-                      <span className="w-1.5 h-4 bg-emerald-400 rounded-full"></span>
-                      연간배당률(TTM) <span className="text-[10px] text-gray-500 font-normal">(단위: %)</span>
-                    </h3>
-                    <div className="flex-1 w-full h-[180px] relative z-10">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
-                          <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" axisLine={false} />
-                          <YAxis dataKey="name" type="category" hide={true} axisLine={false} />
-                          <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(52, 211, 153, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#34d399', fontWeight: 'bold' }} />
-                          <Bar dataKey="dividend" name="배당률(%)" radius={[0, 4, 4, 0]}>
-                            {additionalStatsData.map((_: any, idx: number) => (
-                              <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
-                            ))}
-                          </Bar>
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-
-                  {/* Fee Chart */}
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
-                    <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
-                      <span className="w-1.5 h-4 bg-rose-400 rounded-full"></span>
-                      총보수율 <span className="text-[10px] text-gray-500 font-normal">(낮을수록 좋음, %)</span>
-                    </h3>
-                    <div className="flex-1 w-full h-[180px] relative z-10">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
-                          <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" axisLine={false} />
-                          <YAxis dataKey="name" type="category" hide={true} axisLine={false} />
-                          <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(244, 63, 94, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#f43f5e', fontWeight: 'bold' }} />
-                          <Bar dataKey="fee" name="수수료(%)" radius={[0, 4, 4, 0]}>
-                            {additionalStatsData.map((_: any, idx: number) => (
-                              <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
-                            ))}
-                          </Bar>
-                        </BarChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-                </div>
-              )}
+                                    )}
+                                  </td>
+                                )
+                              })}
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                </section>
+
+                {/* Sub-Charts Section Moved to Info Tab per Request */}
+                {additionalStatsData.length > 0 && (
+                  <div className="lg:col-span-4 grid grid-cols-1 lg:grid-cols-3 gap-4 mt-2">
+                    {/* AUM Chart */}
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
+                      <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
+                        <span className="w-1.5 h-4 bg-indigo-400 rounded-full"></span>
+                        순자산총액 <span className="text-[10px] text-gray-500 font-normal">(단위: 억 원)</span>
+                      </h3>
+                      <div className="flex-1 w-full h-[180px] relative z-10">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => Math.floor(val / 10000) > 0 ? `${Math.floor(val / 10000)}조` : val} stroke="rgba(255,255,255,0.05)" axisLine={false} />
+                            <YAxis dataKey="name" type="category" width={80} stroke="rgba(255,255,255,0.05)" axisLine={false} interval={0} tick={(props: any) => {
+                              const { x, y, payload } = props;
+                              const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                              const dataIndex = additionalStatsData.findIndex((d: any) => d.name === payload.value);
+                              const val = payload.value.length > 7 ? payload.value.substring(0, 6) + '..' : payload.value;
+                              return (
+                                <text
+                                  onClick={() => {
+                                    const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === payload.value || d.etf_code === payload.value);
+                                    if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                                  }}
+                                  style={{ cursor: 'pointer' }}
+                                  x={x} y={y} dy={4} textAnchor="end" fill={glowColors[dataIndex >= 0 ? dataIndex % 5 : 0]} fontSize={11} fontWeight={600}
+                                >
+                                  {val}
+                                </text>
+                              );
+                            }} />
+                            <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(79, 70, 229, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#818cf8', fontWeight: 'bold' }} />
+                            <Bar dataKey="aum" name="순자산(억)" radius={[0, 4, 4, 0]}>
+                              {additionalStatsData.map((_: any, idx: number) => (
+                                <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
+                              ))}
+                            </Bar>
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </div>
+                    </section>
+
+                    {/* Dividend Chart */}
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
+                      <div className="absolute inset-0 bg-gradient-to-tr from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
+                        <span className="w-1.5 h-4 bg-emerald-400 rounded-full"></span>
+                        연간배당률(TTM) <span className="text-[10px] text-gray-500 font-normal">(단위: %)</span>
+                      </h3>
+                      <div className="flex-1 w-full h-[180px] relative z-10">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" axisLine={false} />
+                            <YAxis dataKey="name" type="category" hide={true} axisLine={false} />
+                            <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(52, 211, 153, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#34d399', fontWeight: 'bold' }} />
+                            <Bar dataKey="dividend" name="배당률(%)" radius={[0, 4, 4, 0]}>
+                              {additionalStatsData.map((_: any, idx: number) => (
+                                <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
+                              ))}
+                            </Bar>
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </div>
+                    </section>
+
+                    {/* Fee Chart */}
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 flex flex-col min-h-[200px] relative overflow-hidden group">
+                      <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <h3 className="text-sm font-bold mb-4 flex items-center gap-2 relative z-10 text-gray-200">
+                        <span className="w-1.5 h-4 bg-rose-400 rounded-full"></span>
+                        총보수율 <span className="text-[10px] text-gray-500 font-normal">(낮을수록 좋음, %)</span>
+                      </h3>
+                      <div className="flex-1 w-full h-[180px] relative z-10">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <BarChart data={additionalStatsData} layout="vertical" margin={{ top: 0, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis type="number" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" axisLine={false} />
+                            <YAxis dataKey="name" type="category" hide={true} axisLine={false} />
+                            <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} contentStyle={{ backgroundColor: 'rgba(9, 9, 11, 0.95)', borderColor: 'rgba(244, 63, 94, 0.2)', borderRadius: '12px', fontSize: '12px' }} itemStyle={{ color: '#f43f5e', fontWeight: 'bold' }} />
+                            <Bar dataKey="fee" name="수수료(%)" radius={[0, 4, 4, 0]}>
+                              {additionalStatsData.map((_: any, idx: number) => (
+                                <Cell key={`cell-${idx}`} fill={['#818cf8', '#34d399', '#fbbf24', '#f87171', '#c084fc'][idx % 5]} fillOpacity={0.8} />
+                              ))}
+                            </Bar>
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </div>
+                    </section>
+                  </div>
+                )}
 
-            </div>
-          )}
-
-          {activeTab === 'holdings' && (
-            <div className={`grid gap-3 animate-in fade-in slide-in-from-bottom-2 duration-500 w-full bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] mt-0 ${isLoadingHoldings || data.raw_data?.length === 1 ? 'grid-cols-1 max-w-2xl mx-auto' :
-              data.raw_data?.length === 2 ? 'grid-cols-1 md:grid-cols-2' :
-                data.raw_data?.length === 3 ? 'grid-cols-1 md:grid-cols-3' :
-                  data.raw_data?.length === 4 ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4' :
-                    'grid-cols-1 md:grid-cols-3 xl:grid-cols-5'
-              }`}>
-              {isLoadingHoldings ? (
-                <div className="flex flex-col items-center justify-center p-12 text-center col-span-full w-full min-h-[300px]">
-                  <Loader2 className="w-10 h-10 text-emerald-400 animate-spin mb-4" />
-                  <h3 className="text-lg font-bold text-gray-200 mb-2">실시간 포트폴리오 데이터를 분석하고 있습니다</h3>
-                  <p className="text-sm text-gray-500 max-w-sm mx-auto">
-                    각 ETF의 최신 구성종목 데이터를 KRX 서버에서 동기화 중입니다. 분석에는 평균 5~10초가 소요됩니다.
-                  </p>
-                </div>
-              ) : (
-                <>
-                  {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                  {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
-                    const glowColors = ["from-indigo-500", "from-emerald-500", "from-amber-500", "from-rose-500", "from-purple-500", "from-cyan-500"];
-                    const bgColors = ["bg-indigo-500/10", "bg-emerald-500/10", "bg-amber-500/10", "bg-rose-500/10", "bg-purple-500/10", "bg-cyan-500/10"];
-                    const borderColors = ["border-indigo-500/30", "border-emerald-500/30", "border-amber-500/30", "border-rose-500/30", "border-purple-500/30", "border-cyan-500/30"];
-                    const fillColors = ["bg-indigo-400", "bg-emerald-400", "bg-amber-400", "bg-rose-400", "bg-purple-400", "bg-cyan-400"];
-
-                    return (
-                      <section key={etf.etf_code} className={`backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border ${borderColors[idx % borderColors.length]} ${bgColors[idx % bgColors.length]} flex flex-col relative overflow-hidden min-w-[200px]`}>
-                        <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${glowColors[idx % glowColors.length]} to-transparent`} />
-                        <h3 className="text-sm md:text-base lg:text-lg font-bold mb-4 flex items-center justify-between gap-2 cursor-pointer group" onClick={() => setSelectedDetailEtf(etf)}>
-                          <span className="truncate group-hover:underline group-hover:text-indigo-300 transition-colors" title={etf.etf_name}>{etf.etf_name}</span>
-                          <span className="text-[10px] sm:text-xs font-medium text-gray-400 bg-black/40 px-2 flex-shrink-0 py-0.5 rounded-full border border-white/5">TOP 50</span>
-                        </h3>
+              </div>
+            )}
 
-                        {etf.holdings && etf.holdings.length > 0 ? (
-                          <div className="space-y-3 flex-1 pr-1 overflow-y-auto max-h-[600px] scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
-                            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                            {etf.holdings.map((h: any, hIdx: number) => (
-                              <div key={h.ticker} className="flex flex-col gap-1 group">
-                                <div className="flex justify-between items-end text-[11px] sm:text-xs xl:text-[13px] mb-0.5">
-                                  <span className="font-medium text-gray-200 group-hover:text-white transition-colors truncate max-w-[75%]" title={h.ticker}>
-                                    <span className="text-gray-500 w-4 inline-block text-[10px] sm:text-[11px]">{hIdx + 1}.</span> {h.ticker}
-                                  </span>
-                                  <span className="font-bold text-gray-300 ml-1 flex-shrink-0">{h.weight.toFixed(2)}%</span>
-                                </div>
-                                <div className="w-full bg-black/40 rounded-full h-1.5 overflow-hidden border border-white/5">
-                                  <div
-                                    className={`h-full ${fillColors[idx % fillColors.length]} rounded-full transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(255,255,255,0.3)]`}
-                                    style={{ width: `${Math.min(100, (h.weight / (etf.holdings[0]?.weight || 100)) * 100)}%` }}
-                                  />
+            {activeTab === 'holdings' && (
+              <div className={`grid gap-3 animate-in fade-in slide-in-from-bottom-2 duration-500 w-full bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] mt-0 ${isLoadingHoldings || data.raw_data?.length === 1 ? 'grid-cols-1 max-w-2xl mx-auto' :
+                data.raw_data?.length === 2 ? 'grid-cols-1 md:grid-cols-2' :
+                  data.raw_data?.length === 3 ? 'grid-cols-1 md:grid-cols-3' :
+                    data.raw_data?.length === 4 ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4' :
+                      'grid-cols-1 md:grid-cols-3 xl:grid-cols-5'
+                }`}>
+                {isLoadingHoldings ? (
+                  <div className="flex flex-col items-center justify-center p-12 text-center col-span-full w-full min-h-[300px]">
+                    <Loader2 className="w-10 h-10 text-emerald-400 animate-spin mb-4" />
+                    <h3 className="text-lg font-bold text-gray-200 mb-2">실시간 포트폴리오 데이터를 분석하고 있습니다</h3>
+                    <p className="text-sm text-gray-500 max-w-sm mx-auto">
+                      각 ETF의 최신 구성종목 데이터를 KRX 서버에서 동기화 중입니다. 분석에는 평균 5~10초가 소요됩니다.
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    {data.raw_data && data.raw_data.map((etf: any, idx: number) => {
+                      const glowColors = ["from-indigo-500", "from-emerald-500", "from-amber-500", "from-rose-500", "from-purple-500", "from-cyan-500"];
+                      const bgColors = ["bg-indigo-500/10", "bg-emerald-500/10", "bg-amber-500/10", "bg-rose-500/10", "bg-purple-500/10", "bg-cyan-500/10"];
+                      const borderColors = ["border-indigo-500/30", "border-emerald-500/30", "border-amber-500/30", "border-rose-500/30", "border-purple-500/30", "border-cyan-500/30"];
+                      const fillColors = ["bg-indigo-400", "bg-emerald-400", "bg-amber-400", "bg-rose-400", "bg-purple-400", "bg-cyan-400"];
+
+                      return (
+                        <section key={etf.etf_code} className={`backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border ${borderColors[idx % borderColors.length]} ${bgColors[idx % bgColors.length]} flex flex-col relative overflow-hidden min-w-[200px]`}>
+                          <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${glowColors[idx % glowColors.length]} to-transparent`} />
+                          <h3 className="text-sm md:text-base lg:text-lg font-bold mb-4 flex items-center justify-between gap-2 cursor-pointer group" onClick={() => setSelectedDetailEtf(etf)}>
+                            <span className="truncate group-hover:underline group-hover:text-indigo-300 transition-colors" title={etf.etf_name}>{etf.etf_name}</span>
+                            <span className="text-[10px] sm:text-xs font-medium text-gray-400 bg-black/40 px-2 flex-shrink-0 py-0.5 rounded-full border border-white/5">TOP 50</span>
+                          </h3>
+
+                          {etf.holdings && etf.holdings.length > 0 ? (
+                            <div className="space-y-3 flex-1 pr-1 overflow-y-auto max-h-[600px] scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+                              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                              {etf.holdings.map((h: any, hIdx: number) => (
+                                <div key={h.ticker} className="flex flex-col gap-1 group">
+                                  <div className="flex justify-between items-end text-[11px] sm:text-xs xl:text-[13px] mb-0.5">
+                                    <span className="font-medium text-gray-200 group-hover:text-white transition-colors truncate max-w-[75%]" title={h.ticker}>
+                                      <span className="text-gray-500 w-4 inline-block text-[10px] sm:text-[11px]">{hIdx + 1}.</span> {h.ticker}
+                                    </span>
+                                    <span className="font-bold text-gray-300 ml-1 flex-shrink-0">{h.weight.toFixed(2)}%</span>
+                                  </div>
+                                  <div className="w-full bg-black/40 rounded-full h-1.5 overflow-hidden border border-white/5">
+                                    <div
+                                      className={`h-full ${fillColors[idx % fillColors.length]} rounded-full transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(255,255,255,0.3)]`}
+                                      style={{ width: `${Math.min(100, (h.weight / (etf.holdings[0]?.weight || 100)) * 100)}%` }}
+                                    />
+                                  </div>
                                 </div>
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <div className="flex-1 flex flex-col items-center justify-center text-gray-500/50 min-h-[150px]">
-                            <span className="text-3xl font-black mb-1 opacity-20">N/A</span>
-                            <p className="text-xs font-medium">데이터 미제공 종목</p>
-                          </div>
-                        )}
-                      </section>
-                    );
-                  })}
-                </>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'chart' && (
-            <div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-2 duration-500 pb-8 mt-0 bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
-              {/* Note on data sources for user - explicitly one long line without wrapping elements beside it */}
-              <div className="mb-1 w-full py-1.5 px-3 bg-indigo-500/10 border border-indigo-500/20 rounded-md hidden sm:block">
-                <p className="text-[11px] text-indigo-300 flex items-center gap-2 whitespace-nowrap overflow-hidden text-ellipsis">
-                  <span className="text-xs">💡</span> <span className="opacity-90">오픈소스 API(한국거래소 등) 한계상 현재 제공하는 &apos;수익률&apos; 시계열 외의 &apos;순자금유입&apos; 및 &apos;배당률&apos; 과거 트렌드 값은 형태 구현을 위해 가격 변동성을 연동한</span> <b className="text-indigo-200">시뮬레이션 데이터</b><span className="opacity-90">로 대체되어 그려집니다. (UI 디자인 확인 목적)</span>
-                </p>
+                              ))}
+                            </div>
+                          ) : (
+                            <div className="flex-1 flex flex-col items-center justify-center text-gray-500/50 min-h-[150px]">
+                              <span className="text-3xl font-black mb-1 opacity-20">N/A</span>
+                              <p className="text-xs font-medium">데이터 미제공 종목</p>
+                            </div>
+                          )}
+                        </section>
+                      );
+                    })}
+                  </>
+                )}
               </div>
+            )}
 
-              <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-
-                {/* 1. Raw Price Chart (가격 추이) */}
-                {data.visual_data.line_chart && data.visual_data.etf_keys && (
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
-                    <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-                    <div className="flex justify-between items-center mb-4 relative z-10">
-                      <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
-                        <span className="w-1.5 h-6 bg-gradient-to-b from-blue-400 to-indigo-500 rounded-full"></span>
-                        가격 추이
-                        <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(원)</span>
-                      </h3>
-                    </div>
+            {activeTab === 'chart' && (
+              <div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-2 duration-500 pb-8 mt-0 bg-white/[0.02] p-4 lg:p-5 border border-white/5 rounded-b-2xl backdrop-blur-3xl shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+                {/* Note on data sources for user - explicitly one long line without wrapping elements beside it */}
+                <div className="mb-1 w-full py-1.5 px-3 bg-indigo-500/10 border border-indigo-500/20 rounded-md hidden sm:block">
+                  <p className="text-[11px] text-indigo-300 flex items-center gap-2 whitespace-nowrap overflow-hidden text-ellipsis">
+                    <span className="text-xs">💡</span> <span className="opacity-90">오픈소스 API(한국거래소 등) 한계상 현재 제공하는 &apos;수익률&apos; 시계열 외의 &apos;순자금유입&apos; 및 &apos;배당률&apos; 과거 트렌드 값은 형태 구현을 위해 가격 변동성을 연동한</span> <b className="text-indigo-200">시뮬레이션 데이터</b><span className="opacity-90">로 대체되어 그려집니다. (UI 디자인 확인 목적)</span>
+                  </p>
+                </div>
 
-                    <div className="h-[250px] w-full relative z-10">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={15} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
-                          <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
-                          <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.2)', strokeWidth: 1, strokeDasharray: '4 4' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.7)', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontWeight: 'bold', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
-                          <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
-                            if (e && e.value) {
-                              const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
-                              if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                            }
-                          }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
-                          {data.visual_data.etf_keys.map((key: string, idx: number) => {
-                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                            return <Line key={`${key}_raw`} type="monotone" dataKey={`${key}_raw`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 5, strokeWidth: 0, fill: glowColors[idx % glowColors.length], stroke: 'white' }} />;
-                          })}
-                        </LineChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-                )}
+                <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+
+                  {/* 1. Raw Price Chart (가격 추이) */}
+                  {data.visual_data.line_chart && data.visual_data.etf_keys && (
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
+                      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+                      <div className="flex justify-between items-center mb-4 relative z-10">
+                        <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
+                          <span className="w-1.5 h-6 bg-gradient-to-b from-blue-400 to-indigo-500 rounded-full"></span>
+                          가격 추이
+                          <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(원)</span>
+                        </h3>
+                      </div>
 
-                {/* 2. Historical Performance Line Chart (수익률) */}
-                {data.visual_data.line_chart && data.visual_data.etf_keys && (
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
-                    <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-                    <div className="flex justify-between items-center mb-4 relative z-10">
-                      <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
-                        <span className="w-1.5 h-6 bg-gradient-to-b from-indigo-400 to-pink-500 rounded-full"></span>
-                        {period === '1W' ? '수익률 일간 변동' : '다중 ETF 수익률 매치업'}
-                        <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">
-                          {period === '1W' ? '(전일 대비 %)' : '(누적 수익률 %)'}
-                        </span>
-                      </h3>
-                    </div>
+                      <div className="h-[250px] w-full relative z-10">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={15} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
+                            <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
+                            <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.2)', strokeWidth: 1, strokeDasharray: '4 4' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.7)', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontWeight: 'bold', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
+                            <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
+                              if (e && e.value) {
+                                const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
+                                if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                              }
+                            }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
+                            {data.visual_data.etf_keys.map((key: string, idx: number) => {
+                              const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                              return <Line key={`${key}_raw`} type="monotone" dataKey={`${key}_raw`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 5, strokeWidth: 0, fill: glowColors[idx % glowColors.length], stroke: 'white' }} />;
+                            })}
+                          </LineChart>
+                        </ResponsiveContainer>
+                      </div>
+                    </section>
+                  )}
 
-                    <div className="h-[250px] w-full relative z-10">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={15} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
-                          <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
-                          <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.2)', strokeWidth: 1, strokeDasharray: '4 4' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.7)', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontWeight: 'bold', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
-                          <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
-                            if (e && e.value) {
-                              const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
-                              if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                            }
-                          }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
-                          {data.visual_data.etf_keys.map((key: string, idx: number) => {
-                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                            return <Line key={key} type="monotone" dataKey={key} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 5, strokeWidth: 0, fill: glowColors[idx % glowColors.length], stroke: 'white' }} />;
-                          })}
-                        </LineChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-                )}
+                  {/* 2. Historical Performance Line Chart (수익률) */}
+                  {data.visual_data.line_chart && data.visual_data.etf_keys && (
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
+                      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+                      <div className="flex justify-between items-center mb-4 relative z-10">
+                        <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
+                          <span className="w-1.5 h-6 bg-gradient-to-b from-indigo-400 to-pink-500 rounded-full"></span>
+                          {period === '1W' ? '수익률 일간 변동' : '다중 ETF 수익률 매치업'}
+                          <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">
+                            {period === '1W' ? '(전일 대비 %)' : '(누적 수익률 %)'}
+                          </span>
+                        </h3>
+                      </div>
 
-                {/* 3. Cumulative Fund Inflow Trend (순자금유입) */}
-                {data.visual_data.line_chart && data.visual_data.etf_keys && (
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
-                    <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-                    <div className="flex justify-between items-center mb-4 relative z-10">
-                      <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
-                        <span className="w-1.5 h-6 bg-emerald-400 rounded-full"></span>
-                        순자금유입 추이 <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(누적, 억 원)</span>
-                      </h3>
-                    </div>
+                      <div className="h-[250px] w-full relative z-10">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={15} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
+                            <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
+                            <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.2)', strokeWidth: 1, strokeDasharray: '4 4' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', boxShadow: '0 20px 40px -10px rgba(0,0,0,0.7)', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontWeight: 'bold', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
+                            <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
+                              if (e && e.value) {
+                                const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
+                                if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                              }
+                            }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
+                            {data.visual_data.etf_keys.map((key: string, idx: number) => {
+                              const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                              return <Line key={key} type="monotone" dataKey={key} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 5, strokeWidth: 0, fill: glowColors[idx % glowColors.length], stroke: 'white' }} />;
+                            })}
+                          </LineChart>
+                        </ResponsiveContainer>
+                      </div>
+                    </section>
+                  )}
+
+                  {/* 3. Cumulative Fund Inflow Trend (순자금유입) */}
+                  {data.visual_data.line_chart && data.visual_data.etf_keys && (
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
+                      <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+                      <div className="flex justify-between items-center mb-4 relative z-10">
+                        <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
+                          <span className="w-1.5 h-6 bg-emerald-400 rounded-full"></span>
+                          순자금유입 추이 <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(누적, 억 원)</span>
+                        </h3>
+                      </div>
 
-                    <div className="h-[250px] w-full relative z-10">
-                      <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-lg overflow-hidden border border-white/5">
-                        <div className="px-6 py-3 bg-indigo-600/90 text-white text-sm font-bold rounded-xl shadow-[0_0_30px_rgba(79,70,229,0.5)] border border-indigo-400/30">
-                          🚧 추후 개발 예정 (To Be Developed)
+                      <div className="h-[250px] w-full relative z-10">
+                        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-lg overflow-hidden border border-white/5">
+                          <div className="px-6 py-3 bg-indigo-600/90 text-white text-sm font-bold rounded-xl shadow-[0_0_30px_rgba(79,70,229,0.5)] border border-indigo-400/30">
+                            🚧 추후 개발 예정 (To Be Developed)
+                          </div>
                         </div>
+                        <ResponsiveContainer width="100%" height="100%">
+                          <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={10} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
+                            <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
+                            <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.1)' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
+                            <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
+                              if (e && e.value) {
+                                const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
+                                if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                              }
+                            }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
+                            {data.visual_data.etf_keys.map((key: string, idx: number) => {
+                              const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                              return <Line key={`${key}_inflow`} type="monotone" dataKey={`${key}_inflow`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />;
+                            })}
+                          </LineChart>
+                        </ResponsiveContainer>
                       </div>
-                      <ResponsiveContainer width="100%" height="100%">
-                        <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={10} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
-                          <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
-                          <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.1)' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
-                          <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
-                            if (e && e.value) {
-                              const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
-                              if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                            }
-                          }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
-                          {data.visual_data.etf_keys.map((key: string, idx: number) => {
-                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                            return <Line key={`${key}_inflow`} type="monotone" dataKey={`${key}_inflow`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />;
-                          })}
-                        </LineChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-                )}
+                    </section>
+                  )}
 
-                {/* 4. Dividend Yield Trend (연간배당률) */}
-                {data.visual_data.line_chart && data.visual_data.etf_keys && (
-                  <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
-                    <div className="absolute inset-0 bg-gradient-to-bl from-rose-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-                    <div className="flex justify-between items-center mb-4 relative z-10">
-                      <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
-                        <span className="w-1.5 h-6 bg-rose-400 rounded-full"></span>
-                        연간배당률 트렌드 <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(TTM, %)</span>
-                      </h3>
-                    </div>
+                  {/* 4. Dividend Yield Trend (연간배당률) */}
+                  {data.visual_data.line_chart && data.visual_data.etf_keys && (
+                    <section className="bg-white/[0.02] backdrop-blur-3xl rounded-xl shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 border border-white/5 relative group w-full">
+                      <div className="absolute inset-0 bg-gradient-to-bl from-rose-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+                      <div className="flex justify-between items-center mb-4 relative z-10">
+                        <h3 className="text-lg md:text-xl font-bold flex items-center gap-3">
+                          <span className="w-1.5 h-6 bg-rose-400 rounded-full"></span>
+                          연간배당률 트렌드 <span className="text-xs font-normal text-gray-500 ml-1 hidden sm:inline">(TTM, %)</span>
+                        </h3>
+                      </div>
 
-                    <div className="h-[250px] w-full relative z-10">
-                      <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-lg overflow-hidden border border-white/5">
-                        <div className="px-6 py-3 bg-rose-600/90 text-white text-sm font-bold rounded-xl shadow-[0_0_30px_rgba(225,29,72,0.5)] border border-rose-400/30">
-                          🚧 추후 개발 예정 (To Be Developed)
+                      <div className="h-[250px] w-full relative z-10">
+                        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-lg overflow-hidden border border-white/5">
+                          <div className="px-6 py-3 bg-rose-600/90 text-white text-sm font-bold rounded-xl shadow-[0_0_30px_rgba(225,29,72,0.5)] border border-rose-400/30">
+                            🚧 추후 개발 예정 (To Be Developed)
+                          </div>
                         </div>
+                        <ResponsiveContainer width="100%" height="100%">
+                          <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
+                            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={10} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
+                            <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
+                            <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.1)' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
+                            <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
+                              if (e && e.value) {
+                                const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
+                                if (matchedEtf) setSelectedDetailEtf(matchedEtf);
+                              }
+                            }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
+                            {data.visual_data.etf_keys.map((key: string, idx: number) => {
+                              const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
+                              return <Line key={`${key}_dividend`} type="monotone" dataKey={`${key}_dividend`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />;
+                            })}
+                          </LineChart>
+                        </ResponsiveContainer>
                       </div>
-                      <ResponsiveContainer width="100%" height="100%">
-                        <LineChart data={simulatedChartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.03)" />
-                          <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 13 }} tickMargin={10} minTickGap={50} stroke="rgba(255,255,255,0.05)" axisLine={{ stroke: 'rgba(255,255,255,0.05)' }} />
-                          <YAxis domain={['auto', 'auto']} tick={{ fill: '#64748b', fontSize: 13 }} tickFormatter={(val) => `${val}%`} stroke="rgba(255,255,255,0.05)" tickMargin={15} axisLine={false} />
-                          <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.1)' }} contentStyle={{ backgroundColor: 'rgba(3, 7, 18, 0.95)', borderColor: 'rgba(255,255,255,0.1)', borderRadius: '12px', padding: '12px' }} labelStyle={{ color: '#94a3b8', marginBottom: '8px', fontSize: '13px' }} itemStyle={{ padding: '2px 0', fontSize: '12px' }} />
-                          <Legend iconType="circle" wrapperStyle={{ paddingTop: '15px', display: 'flex', justifyContent: 'center', gap: '20px', fontSize: '12px' }} onClick={(e: any) => {
-                            if (e && e.value) {
-                              const matchedEtf = data.raw_data?.find((d: any) => d.etf_name === e.value || d.etf_code === e.value);
-                              if (matchedEtf) setSelectedDetailEtf(matchedEtf);
-                            }
-                          }} formatter={(value) => <span className="cursor-pointer hover:text-white hover:underline transition-colors">{value}</span>} />
-                          {data.visual_data.etf_keys.map((key: string, idx: number) => {
-                            const glowColors = ["#818cf8", "#34d399", "#fbbf24", "#f87171", "#c084fc"];
-                            return <Line key={`${key}_dividend`} type="monotone" dataKey={`${key}_dividend`} name={key} stroke={glowColors[idx % glowColors.length]} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />;
-                          })}
-                        </LineChart>
-                      </ResponsiveContainer>
-                    </div>
-                  </section>
-                )}
+                    </section>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
-        </div>
-      )}
+            )}
+          </div>
+        )
+      }
 
       {/* Background ambient glow effect */}
       {/* 즐겨찾기 Modal */}
-      {isFavModalOpen && (
-        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 p-2 md:p-6">
-          <div className="bg-[#0f111a] border border-white/10 rounded-2xl w-full max-w-[1400px] h-full max-h-[90vh] overflow-hidden flex flex-col shadow-2xl">
-            <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 border-b border-white/10 relative gap-3 bg-black/20">
-              <h2 className="text-xl md:text-2xl font-bold flex items-center gap-2 text-white">
-                <Star className="w-6 h-6 text-yellow-500 fill-yellow-500/20" /> 나의 관심종목 즐겨찾기
-              </h2>
-
-              <div className="flex items-center gap-3 w-full md:w-auto">
-                <button
-                  onClick={() => selectFromFavorites(selectedFavItems)}
-                  disabled={selectedFavItems.length === 0}
-                  className="flex-1 md:flex-none flex items-center justify-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:opacity-50 text-white rounded-lg text-sm font-bold transition-all shadow-[0_0_15px_rgba(79,70,229,0.3)] disabled:shadow-none"
-                >
-                  <Check className="w-4 h-4" /> 선택한 종목 입력칸에 넣기 ({selectedFavItems.length})
-                </button>
-                <button onClick={() => setIsFavModalOpen(false)} className="text-gray-400 hover:text-white transition-colors bg-white/5 p-2 rounded-xl flex-shrink-0">
-                  <X className="w-6 h-6" />
-                </button>
-              </div>
-            </div>
-            <div className="p-3 md:p-5 overflow-y-auto flex-1 custom-scrollbar">
-              <div className="flex justify-between items-center mb-4">
-                <p className="text-gray-400 text-sm">종목을 여러개 클릭하여 선택한 뒤, 위 버튼을 눌러 비교 입력칸에 한 번에 넣을 수 있습니다.</p>
-                <button onClick={addFavGroup} className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
-                  <Plus className="w-4 h-4" /> 새 그룹
-                </button>
+      {
+        isFavModalOpen && (
+          <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 p-2 md:p-6">
+            <div className="bg-[#0f111a] border border-white/10 rounded-2xl w-full max-w-[1400px] h-full max-h-[90vh] overflow-hidden flex flex-col shadow-2xl">
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 border-b border-white/10 relative gap-3 bg-black/20">
+                <h2 className="text-xl md:text-2xl font-bold flex items-center gap-2 text-white">
+                  <Star className="w-6 h-6 text-yellow-500 fill-yellow-500/20" /> 나의 관심종목 즐겨찾기
+                </h2>
+
+                <div className="flex items-center gap-3 w-full md:w-auto">
+                  <button
+                    onClick={() => selectFromFavorites(selectedFavItems)}
+                    disabled={selectedFavItems.length === 0}
+                    className="flex-1 md:flex-none flex items-center justify-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:bg-gray-700 disabled:opacity-50 text-white rounded-lg text-sm font-bold transition-all shadow-[0_0_15px_rgba(79,70,229,0.3)] disabled:shadow-none"
+                  >
+                    <Check className="w-4 h-4" /> 선택한 종목 입력칸에 넣기 ({selectedFavItems.length})
+                  </button>
+                  <button onClick={() => setIsFavModalOpen(false)} className="text-gray-400 hover:text-white transition-colors bg-white/5 p-2 rounded-xl flex-shrink-0">
+                    <X className="w-6 h-6" />
+                  </button>
+                </div>
               </div>
+              <div className="p-3 md:p-5 overflow-y-auto flex-1 custom-scrollbar">
+                <div className="flex justify-between items-center mb-4">
+                  <p className="text-gray-400 text-sm">종목을 여러개 클릭하여 선택한 뒤, 위 버튼을 눌러 비교 입력칸에 한 번에 넣을 수 있습니다.</p>
+                  <button onClick={addFavGroup} className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
+                    <Plus className="w-4 h-4" /> 새 그룹
+                  </button>
+                </div>
 
-              {favorites.length === 0 && (
-                <div className="text-center py-10 text-gray-500 text-sm">생성된 그룹이 없습니다. 먼저 새 그룹을 추가하세요.</div>
-              )}
+                {favorites.length === 0 && (
+                  <div className="text-center py-10 text-gray-500 text-sm">생성된 그룹이 없습니다. 먼저 새 그룹을 추가하세요.</div>
+                )}
 
-              <div className="space-y-6">
-                {favorites.map(group => (
-                  <div key={group.id} className="bg-white/[0.02] border border-white/10 rounded-xl p-4 shadow-inner">
-                    <div className="flex justify-between items-center mb-4 pb-3 border-b border-white/10">
-                      <div className="flex items-center gap-3">
-                        <h3 className="text-lg font-bold text-indigo-300 tracking-wide">{group.name}</h3>
-                        <div className="flex gap-1">
-                          <button onClick={() => renameFavGroup(group.id, group.name)} className="p-1.5 text-gray-500 hover:text-indigo-400 bg-white/5 rounded-md transition-colors" title="그룹명 수정"><Edit2 className="w-3.5 h-3.5" /></button>
-                          <button onClick={() => deleteFavGroup(group.id)} className="p-1.5 text-gray-500 hover:text-rose-400 bg-white/5 rounded-md transition-colors" title="그룹 삭제"><Trash2 className="w-3.5 h-3.5" /></button>
+                <div className="space-y-6">
+                  {favorites.map(group => (
+                    <div key={group.id} className="bg-white/[0.02] border border-white/10 rounded-xl p-4 shadow-inner">
+                      <div className="flex justify-between items-center mb-4 pb-3 border-b border-white/10">
+                        <div className="flex items-center gap-3">
+                          <h3 className="text-lg font-bold text-indigo-300 tracking-wide">{group.name}</h3>
+                          <div className="flex gap-1">
+                            <button onClick={() => renameFavGroup(group.id, group.name)} className="p-1.5 text-gray-500 hover:text-indigo-400 bg-white/5 rounded-md transition-colors" title="그룹명 수정"><Edit2 className="w-3.5 h-3.5" /></button>
+                            <button onClick={() => deleteFavGroup(group.id)} className="p-1.5 text-gray-500 hover:text-rose-400 bg-white/5 rounded-md transition-colors" title="그룹 삭제"><Trash2 className="w-3.5 h-3.5" /></button>
+                          </div>
                         </div>
+                        <button
+                          onClick={() => selectFromFavorites(group.items)}
+                          disabled={group.items.length === 0}
+                          className="flex items-center gap-1.5 px-3 py-1.5 bg-white/10 hover:bg-indigo-500 text-white rounded-md text-xs font-semibold disabled:opacity-30 transition-all shadow-sm"
+                        >
+                          <Check className="w-3 h-3" /> 그룹전체 바로넣기 ({group.items.length})
+                        </button>
                       </div>
-                      <button
-                        onClick={() => selectFromFavorites(group.items)}
-                        disabled={group.items.length === 0}
-                        className="flex items-center gap-1.5 px-3 py-1.5 bg-white/10 hover:bg-indigo-500 text-white rounded-md text-xs font-semibold disabled:opacity-30 transition-all shadow-sm"
-                      >
-                        <Check className="w-3 h-3" /> 그룹전체 바로넣기 ({group.items.length})
-                      </button>
-                    </div>
 
-                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
-                      {group.items.map(item => {
-                        const isSelected = selectedFavItems.some(i => i.code === item.code);
-                        return (
-                          <div
-                            key={item.code}
-                            className={`flex flex-col justify-between items-start bg-black/40 border-2 rounded-lg p-2.5 group/favitem transition-all cursor-pointer ${isSelected ? 'border-indigo-500 bg-indigo-900/30' : 'border-white/5 hover:border-indigo-400/50 hover:bg-white/5'
-                              }`}
-                            onClick={() => toggleFavItemSelection(item)}
-                          >
-                            <div className="flex justify-between items-start w-full mb-1">
-                              <span className="font-mono text-[10px] text-indigo-400/80 bg-black/30 px-1.5 py-0.5 rounded border border-indigo-500/10">
-                                {item.code}
-                              </span>
-                              <button onClick={(e) => { e.stopPropagation(); removeFavItem(group.id, item.code); }} className="opacity-0 group-hover/favitem:opacity-100 p-1 text-gray-500 hover:text-rose-400 transition-all ml-1 bg-white/5 rounded hover:bg-rose-500/20" title="종목 삭제">
-                                <Trash2 className="w-3 h-3" />
-                              </button>
-                            </div>
-                            <div className="w-full truncate text-sm font-medium text-gray-200 group-hover/favitem:text-white" title={item.name}>
-                              {item.name}
+                      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
+                        {group.items.map(item => {
+                          const isSelected = selectedFavItems.some(i => i.code === item.code);
+                          return (
+                            <div
+                              key={item.code}
+                              className={`flex flex-col justify-between items-start bg-black/40 border-2 rounded-lg p-2.5 group/favitem transition-all cursor-pointer ${isSelected ? 'border-indigo-500 bg-indigo-900/30' : 'border-white/5 hover:border-indigo-400/50 hover:bg-white/5'
+                                }`}
+                              onClick={() => toggleFavItemSelection(item)}
+                            >
+                              <div className="flex justify-between items-start w-full mb-1">
+                                <span className="font-mono text-[10px] text-indigo-400/80 bg-black/30 px-1.5 py-0.5 rounded border border-indigo-500/10">
+                                  {item.code}
+                                </span>
+                                <button onClick={(e) => { e.stopPropagation(); removeFavItem(group.id, item.code); }} className="opacity-0 group-hover/favitem:opacity-100 p-1 text-gray-500 hover:text-rose-400 transition-all ml-1 bg-white/5 rounded hover:bg-rose-500/20" title="종목 삭제">
+                                  <Trash2 className="w-3 h-3" />
+                                </button>
+                              </div>
+                              <div className="w-full truncate text-sm font-medium text-gray-200 group-hover/favitem:text-white" title={item.name}>
+                                {item.name}
+                              </div>
                             </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-
-                    {/* Add Item to Group UI */}
-                    <div className="mt-4 relative z-50">
-                      <div className="flex items-center px-3 py-2 bg-black/60 border border-white/10 focus-within:border-indigo-500/50 rounded-lg transition-colors">
-                        <Search className="w-4 h-4 text-indigo-400 mr-2" />
-                        <input
-                          value={favSearchQuery[group.id] || ""}
-                          onChange={e => setFavSearchQuery(prev => ({ ...prev, [group.id]: e.target.value }))}
-                          className="bg-transparent border-none outline-none text-sm text-gray-200 w-full placeholder-gray-500"
-                          placeholder="ETF 이름을 검색하여 이 그룹에 추가..."
-                        />
+                          );
+                        })}
                       </div>
 
-                      {favSearchQuery[group.id] && etfDictionary.length > 0 && (
-                        <div className="absolute top-[110%] left-0 w-full max-h-[240px] overflow-y-auto bg-[#1a1c23]/95 border border-indigo-500/30 rounded-xl shadow-2xl backdrop-blur-xl z-[100] custom-scrollbar">
-                          {(() => {
-                            const term = favSearchQuery[group.id].toLowerCase().replace(/\s/g, '');
-                            const filtered = etfDictionary.filter(e =>
-                              e.name.toLowerCase().replace(/\s/g, '').includes(term) || e.code.includes(term)
-                            ).slice(0, 30);
-
-                            if (filtered.length === 0) return <div className="p-4 text-sm text-rose-400 font-medium text-center">검색 결과가 없습니다.</div>;
-
-                            return filtered.map(e => (
-                              <div
-                                key={e.code}
-                                onClick={() => { addFavItem(group.id, e.code, e.name); setFavSearchQuery(prev => ({ ...prev, [group.id]: "" })); }}
-                                className="px-5 py-3 text-sm text-gray-300 hover:bg-indigo-600/40 cursor-pointer border-b border-indigo-500/10 last:border-0 transition-colors flex justify-between group"
-                              >
-                                <span className="text-white font-medium group-hover:text-indigo-200 truncate pr-4">{e.name}</span>
-                                <span className="font-mono text-xs text-indigo-400 bg-black/30 px-2 py-0.5 rounded border border-white/5">{e.code}</span>
-                              </div>
-                            ));
-                          })()}
+                      {/* Add Item to Group UI */}
+                      <div className="mt-4 relative z-50">
+                        <div className="flex items-center px-3 py-2 bg-black/60 border border-white/10 focus-within:border-indigo-500/50 rounded-lg transition-colors">
+                          <Search className="w-4 h-4 text-indigo-400 mr-2" />
+                          <input
+                            value={favSearchQuery[group.id] || ""}
+                            onChange={e => setFavSearchQuery(prev => ({ ...prev, [group.id]: e.target.value }))}
+                            className="bg-transparent border-none outline-none text-sm text-gray-200 w-full placeholder-gray-500"
+                            placeholder="ETF 이름을 검색하여 이 그룹에 추가..."
+                          />
                         </div>
-                      )}
+
+                        {favSearchQuery[group.id] && etfDictionary.length > 0 && (
+                          <div className="absolute top-[110%] left-0 w-full max-h-[240px] overflow-y-auto bg-[#1a1c23]/95 border border-indigo-500/30 rounded-xl shadow-2xl backdrop-blur-xl z-[100] custom-scrollbar">
+                            {(() => {
+                              const term = favSearchQuery[group.id].toLowerCase().replace(/\s/g, '');
+                              const filtered = etfDictionary.filter(e =>
+                                e.name.toLowerCase().replace(/\s/g, '').includes(term) || e.code.includes(term)
+                              ).slice(0, 30);
+
+                              if (filtered.length === 0) return <div className="p-4 text-sm text-rose-400 font-medium text-center">검색 결과가 없습니다.</div>;
+
+                              return filtered.map(e => (
+                                <div
+                                  key={e.code}
+                                  onClick={() => { addFavItem(group.id, e.code, e.name); setFavSearchQuery(prev => ({ ...prev, [group.id]: "" })); }}
+                                  className="px-5 py-3 text-sm text-gray-300 hover:bg-indigo-600/40 cursor-pointer border-b border-indigo-500/10 last:border-0 transition-colors flex justify-between group"
+                                >
+                                  <span className="text-white font-medium group-hover:text-indigo-200 truncate pr-4">{e.name}</span>
+                                  <span className="font-mono text-xs text-indigo-400 bg-black/30 px-2 py-0.5 rounded border border-white/5">{e.code}</span>
+                                </div>
+                              ));
+                            })()}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+        )
+      }
 
       {/* Detail Information Modal (Naver UI style) */}
-      {selectedDetailEtf && (
-        <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 p-2 md:p-6 lg:p-8">
-          <div className="bg-[#0B0F19] border border-white/10 rounded-2xl w-full max-w-[1400px] h-full max-h-[95vh] overflow-hidden flex flex-col shadow-2xl">
-
-            <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-5 lg:px-8 border-b border-white/10 relative gap-3 bg-gradient-to-r from-blue-900/20 to-transparent">
-              <div>
-                <h2 className="text-2xl lg:text-3xl font-bold flex items-center gap-3 text-white tracking-tight">
-                  <span className="text-blue-400">{selectedDetailEtf.etf_name}</span>
-                  <span className="text-sm font-mono text-gray-400 bg-white/5 px-2 py-1 rounded-md">{selectedDetailEtf.etf_code}</span>
-                  <span className="text-sm font-medium text-gray-500 hidden sm:inline-block">| 기초지수: {selectedDetailEtf.basic_info?.['기초지수명'] || 'N/A'}</span>
-                </h2>
-                <div className="text-xs text-gray-400 mt-2 flex gap-4 hidden md:flex items-center">
-                  <span>운용사: {selectedDetailEtf.basic_info?.['자산운용사'] || selectedDetailEtf.basic_info?.['운용사'] || '-'}</span>
-                  <span className="flex items-center gap-1">총보수: <strong className="text-rose-400 bg-rose-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['펀드보수'] || '-'}</strong></span>
-                  <span className="flex items-center gap-1">분배율(TTM): <strong className="text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['최근 분배율(TTM)'] || '-'}</strong></span>
-                  <span className="flex items-center gap-1">1M 수익률: <strong className="text-blue-400 bg-blue-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['1M 수익률'] || '-'}</strong></span>
+      {
+        selectedDetailEtf && (
+          <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 p-2 md:p-6 lg:p-8">
+            <div className="bg-[#0B0F19] border border-white/10 rounded-2xl w-full max-w-[1400px] h-full max-h-[95vh] overflow-hidden flex flex-col shadow-2xl">
+
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-5 lg:px-8 border-b border-white/10 relative gap-3 bg-gradient-to-r from-blue-900/20 to-transparent">
+                <div>
+                  <h2 className="text-2xl lg:text-3xl font-bold flex items-center gap-3 text-white tracking-tight">
+                    <span className="text-blue-400">{selectedDetailEtf.etf_name}</span>
+                    <span className="text-sm font-mono text-gray-400 bg-white/5 px-2 py-1 rounded-md">{selectedDetailEtf.etf_code}</span>
+                    <span className="text-sm font-medium text-gray-500 hidden sm:inline-block">| 기초지수: {selectedDetailEtf.basic_info?.['기초지수명'] || 'N/A'}</span>
+                  </h2>
+                  <div className="text-xs text-gray-400 mt-2 flex gap-4 hidden md:flex items-center">
+                    <span>운용사: {selectedDetailEtf.basic_info?.['자산운용사'] || selectedDetailEtf.basic_info?.['운용사'] || '-'}</span>
+                    <span className="flex items-center gap-1">총보수: <strong className="text-rose-400 bg-rose-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['펀드보수'] || '-'}</strong></span>
+                    <span className="flex items-center gap-1">분배율(TTM): <strong className="text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['최근 분배율(TTM)'] || '-'}</strong></span>
+                    <span className="flex items-center gap-1">1M 수익률: <strong className="text-blue-400 bg-blue-400/10 px-1.5 py-0.5 rounded">{selectedDetailEtf.basic_info?.['1M 수익률'] || '-'}</strong></span>
+                  </div>
                 </div>
+                <button onClick={() => setSelectedDetailEtf(null)} className="absolute top-5 right-5 text-gray-400 hover:text-white transition-colors bg-white/5 p-2 rounded-xl flex-shrink-0 z-10">
+                  <X className="w-6 h-6" />
+                </button>
               </div>
-              <button onClick={() => setSelectedDetailEtf(null)} className="absolute top-5 right-5 text-gray-400 hover:text-white transition-colors bg-white/5 p-2 rounded-xl flex-shrink-0 z-10">
-                <X className="w-6 h-6" />
-              </button>
-            </div>
 
-            <div className="p-4 md:p-6 lg:p-8 overflow-y-auto flex-1 custom-scrollbar space-y-8 bg-[#0B0F19]">
+              <div className="p-4 md:p-6 lg:p-8 overflow-y-auto flex-1 custom-scrollbar space-y-8 bg-[#0B0F19]">
 
-              {/* 1. 시세 및 주주현황 */}
-              <div>
-                <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
-                  <h3 className="text-lg font-bold text-blue-400 tracking-wide">시세 <span className="text-white font-medium">및 주주현황</span></h3>
-                  <span className="text-xs text-gray-500">[기준: 오늘]</span>
-                </div>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                  <div className="border-t border-slate-700">
-                    {['종가/전일대비/수익률', '52주 최고/최저', '상장주식수', '거래량/거래대금', '20일평균 거래량/대금', '시가총액', '순자산총액'].map((k) => (
-                      <div key={k} className="flex border-b border-slate-800 text-sm">
-                        <div className="w-1/3 bg-slate-900/50 text-gray-400 p-3 font-medium flex items-center">{k.replace('20일평균 거래량/대금', '20일평균 거래량/거래대금')}</div>
-                        <div className="w-2/3 p-3 text-right flex items-center justify-end text-gray-200 font-semibold">{selectedDetailEtf.basic_info?.[k] || '-'}</div>
-                      </div>
-                    ))}
-                    <div className="flex border-b border-slate-800 text-sm">
-                      <div className="w-1/3 bg-slate-900/50 text-gray-400 p-3 font-medium flex items-center">수익률(1M/3M/6M/1Y)</div>
-                      <div className="w-2/3 p-3 text-right flex items-center justify-end text-blue-400 font-bold tracking-tight">
-                        {selectedDetailEtf.basic_info?.['1M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['3M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['6M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['1Y 수익률'] || '-'}
-                      </div>
-                    </div>
+                {/* 1. 시세 및 주주현황 */}
+                <div>
+                  <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
+                    <h3 className="text-lg font-bold text-blue-400 tracking-wide">시세 <span className="text-white font-medium">및 주주현황</span></h3>
+                    <span className="text-xs text-gray-500">[기준: 오늘]</span>
                   </div>
-                  <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col relative">
-                    <div className="flex justify-between items-center mb-3">
-                      <h4 className="text-xs text-gray-400 font-bold">주가/상대수익률</h4>
-                      <div className="flex bg-black/40 rounded-lg p-0.5 border border-white/5 overflow-hidden">
-                        {['1M', '3M', '6M', '1Y'].map(p => (
-                          <button
-                            key={p}
-                            onClick={() => setPopupPeriod(p)}
-                            className={`px-2 py-1 text-[10px] font-bold transition-all ${popupPeriod === p
-                              ? 'bg-blue-600/60 text-white rounded'
-                              : 'text-gray-500 hover:text-gray-300'
-                              }`}
-                          >
-                            {p}
-                          </button>
-                        ))}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="border-t border-slate-700">
+                      {['종가/전일대비/수익률', '52주 최고/최저', '상장주식수', '거래량/거래대금', '20일평균 거래량/대금', '시가총액', '순자산총액'].map((k) => (
+                        <div key={k} className="flex border-b border-slate-800 text-sm">
+                          <div className="w-1/3 bg-slate-900/50 text-gray-400 p-3 font-medium flex items-center">{k.replace('20일평균 거래량/대금', '20일평균 거래량/거래대금')}</div>
+                          <div className="w-2/3 p-3 text-right flex items-center justify-end text-gray-200 font-semibold">{selectedDetailEtf.basic_info?.[k] || '-'}</div>
+                        </div>
+                      ))}
+                      <div className="flex border-b border-slate-800 text-sm">
+                        <div className="w-1/3 bg-slate-900/50 text-gray-400 p-3 font-medium flex items-center">수익률(1M/3M/6M/1Y)</div>
+                        <div className="w-2/3 p-3 text-right flex items-center justify-end text-blue-400 font-bold tracking-tight">
+                          {selectedDetailEtf.basic_info?.['1M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['3M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['6M 수익률'] || '-'} / {selectedDetailEtf.basic_info?.['1Y 수익률'] || '-'}
+                        </div>
                       </div>
                     </div>
-                    <div className="flex-1 min-h-[250px] w-full">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <ComposedChart data={detailMockData.price} margin={{ top: 5, right: 0, left: -20, bottom: 5 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
-                          <XAxis dataKey="day" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" minTickGap={30} />
-                          <YAxis yAxisId="left" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="#1e293b" axisLine={false} domain={detailMockData.domainLeft as any} />
-                          <YAxis yAxisId="right" orientation="right" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} domain={detailMockData.domainRight as any} />
-                          <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
-                          <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
-                          <Line yAxisId="left" type="monotone" dataKey="rel_yield" name={detailMockData.benchmarkName} stroke="#3b82f6" strokeWidth={2} dot={false} />
-                          <Line yAxisId="right" type="monotone" dataKey="price" name={selectedDetailEtf.etf_name} stroke="#ef4444" strokeWidth={2} dot={false} />
-                        </ComposedChart>
-                      </ResponsiveContainer>
+                    <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col relative">
+                      <div className="flex justify-between items-center mb-3">
+                        <h4 className="text-xs text-gray-400 font-bold">주가/상대수익률</h4>
+                        <div className="flex bg-black/40 rounded-lg p-0.5 border border-white/5 overflow-hidden">
+                          {['1M', '3M', '6M', '1Y'].map(p => (
+                            <button
+                              key={p}
+                              onClick={() => setPopupPeriod(p)}
+                              className={`px-2 py-1 text-[10px] font-bold transition-all ${popupPeriod === p
+                                ? 'bg-blue-600/60 text-white rounded'
+                                : 'text-gray-500 hover:text-gray-300'
+                                }`}
+                            >
+                              {p}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="flex-1 min-h-[250px] w-full">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <ComposedChart data={detailMockData.price} margin={{ top: 5, right: 0, left: -20, bottom: 5 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
+                            <XAxis dataKey="day" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" minTickGap={30} />
+                            <YAxis yAxisId="left" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val}%`} stroke="#1e293b" axisLine={false} domain={detailMockData.domainLeft as any} />
+                            <YAxis yAxisId="right" orientation="right" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} domain={detailMockData.domainRight as any} />
+                            <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
+                            <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
+                            <Line yAxisId="left" type="monotone" dataKey="rel_yield" name={detailMockData.benchmarkName} stroke="#3b82f6" strokeWidth={2} dot={false} />
+                            <Line yAxisId="right" type="monotone" dataKey="price" name={selectedDetailEtf.etf_name} stroke="#ef4444" strokeWidth={2} dot={false} />
+                          </ComposedChart>
+                        </ResponsiveContainer>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              {/* 3. 상품설명 */}
-              <div>
-                <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
-                  <h3 className="text-lg font-bold text-blue-400 tracking-wide">상품설명</h3>
-                </div>
-                <div className="bg-slate-900/30 p-5 rounded-xl border border-slate-800 text-sm text-gray-300 leading-relaxed whitespace-pre-wrap">
-                  {selectedDetailEtf.basic_info?.['상품설명'] || `1좌당 순자산가치의 변동률을 기초지수의 변동률과 유사하도록 투자신탁재산을 운용하는 것을 목표로 합니다.\n${selectedDetailEtf.etf_name}는 해당 기초지수 구성종목을 바탕으로 포트폴리오를 구축하여 시장 대비 안정적인 수익을 추구합니다.`}
+                {/* 3. 상품설명 */}
+                <div>
+                  <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
+                    <h3 className="text-lg font-bold text-blue-400 tracking-wide">상품설명</h3>
+                  </div>
+                  <div className="bg-slate-900/30 p-5 rounded-xl border border-slate-800 text-sm text-gray-300 leading-relaxed whitespace-pre-wrap">
+                    {selectedDetailEtf.basic_info?.['상품설명'] || `1좌당 순자산가치의 변동률을 기초지수의 변동률과 유사하도록 투자신탁재산을 운용하는 것을 목표로 합니다.\n${selectedDetailEtf.etf_name}는 해당 기초지수 구성종목을 바탕으로 포트폴리오를 구축하여 시장 대비 안정적인 수익을 추구합니다.`}
+                  </div>
                 </div>
-              </div>
 
-              {/* 4. 순자산가치(NAV)추이 */}
-              <div>
-                <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
-                  <h3 className="text-lg font-bold text-blue-400 tracking-wide">순자산가치(NAV) <span className="text-white font-medium">추이</span></h3>
-                </div>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                  <div className="border border-slate-700 rounded-xl overflow-hidden">
-                    <table className="w-full text-right text-sm">
-                      <thead className="bg-slate-900/80 text-gray-400">
-                        <tr>
-                          <th className="p-3 text-center border-b border-slate-700 font-medium">날짜</th>
-                          <th className="p-3 border-b border-slate-700 font-medium">순자산가치(NAV)</th>
-                          <th className="p-3 border-b border-slate-700 font-medium">ETF종가</th>
-                          <th className="p-3 border-b border-slate-700 font-medium whitespace-nowrap">괴리율(%)</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {detailMockData.nav.slice().reverse().slice(0, 7).map((n: any, i: number) => (
-                          <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
-                            <td className="p-2.5 text-center text-gray-400">{n.date}</td>
-                            <td className="p-2.5 text-gray-200">{n.nav.toLocaleString()}</td>
-                            <td className="p-2.5 text-gray-200">{n.price.toLocaleString()}</td>
-                            <td className={`p-2.5 font-medium ${n.diff > 0 ? 'text-rose-400' : n.diff < 0 ? 'text-blue-400' : 'text-gray-300'}`}>{n.diff.toFixed(2)}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
+                {/* 4. 순자산가치(NAV)추이 */}
+                <div>
+                  <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
+                    <h3 className="text-lg font-bold text-blue-400 tracking-wide">순자산가치(NAV) <span className="text-white font-medium">추이</span></h3>
                   </div>
-                  <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col">
-                    <div className="flex justify-end text-xs text-gray-500 font-bold mb-3 gap-8">
-                      <span>[원]</span><span>[%]</span>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="border border-slate-700 rounded-xl overflow-hidden">
+                      <table className="w-full text-right text-sm">
+                        <thead className="bg-slate-900/80 text-gray-400">
+                          <tr>
+                            <th className="p-3 text-center border-b border-slate-700 font-medium">날짜</th>
+                            <th className="p-3 border-b border-slate-700 font-medium">순자산가치(NAV)</th>
+                            <th className="p-3 border-b border-slate-700 font-medium">ETF종가</th>
+                            <th className="p-3 border-b border-slate-700 font-medium whitespace-nowrap">괴리율(%)</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {detailMockData.nav.slice().reverse().slice(0, 7).map((n: any, i: number) => (
+                            <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
+                              <td className="p-2.5 text-center text-gray-400">{n.date}</td>
+                              <td className="p-2.5 text-gray-200">{n.nav.toLocaleString()}</td>
+                              <td className="p-2.5 text-gray-200">{n.price.toLocaleString()}</td>
+                              <td className={`p-2.5 font-medium ${n.diff > 0 ? 'text-rose-400' : n.diff < 0 ? 'text-blue-400' : 'text-gray-300'}`}>{n.diff.toFixed(2)}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
                     </div>
-                    <div className="flex-1 min-h-[250px] w-full">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <ComposedChart data={detailMockData.nav} margin={{ top: 5, right: 0, left: 15, bottom: 5 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
-                          <XAxis dataKey="day" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" minTickGap={15} />
-                          <YAxis yAxisId="left" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} domain={['auto', 'auto']} />
-                          <YAxis yAxisId="right" orientation="right" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val.toFixed(2)}`} stroke="#1e293b" axisLine={false} domain={[-0.5, 0.5]} />
-                          <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
-                          <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
-                          <Bar yAxisId="right" dataKey="diff" name="괴리율" fill="#3b82f6" maxBarSize={4} />
-                          <Line yAxisId="left" type="monotone" dataKey="nav" name="순자산가치(NAV)" stroke="#ef4444" strokeWidth={2} dot={false} />
-                          <Line yAxisId="left" type="monotone" dataKey="price" name="ETF 종가" stroke="#84cc16" strokeDasharray="5 5" strokeWidth={2} dot={false} />
-                        </ComposedChart>
-                      </ResponsiveContainer>
+                    <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col">
+                      <div className="flex justify-end text-xs text-gray-500 font-bold mb-3 gap-8">
+                        <span>[원]</span><span>[%]</span>
+                      </div>
+                      <div className="flex-1 min-h-[250px] w-full">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <ComposedChart data={detailMockData.nav} margin={{ top: 5, right: 0, left: 15, bottom: 5 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
+                            <XAxis dataKey="day" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" minTickGap={15} />
+                            <YAxis yAxisId="left" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} domain={['auto', 'auto']} />
+                            <YAxis yAxisId="right" orientation="right" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val.toFixed(2)}`} stroke="#1e293b" axisLine={false} domain={[-0.5, 0.5]} />
+                            <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
+                            <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
+                            <Bar yAxisId="right" dataKey="diff" name="괴리율" fill="#3b82f6" maxBarSize={4} />
+                            <Line yAxisId="left" type="monotone" dataKey="nav" name="순자산가치(NAV)" stroke="#ef4444" strokeWidth={2} dot={false} />
+                            <Line yAxisId="left" type="monotone" dataKey="price" name="ETF 종가" stroke="#84cc16" strokeDasharray="5 5" strokeWidth={2} dot={false} />
+                          </ComposedChart>
+                        </ResponsiveContainer>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              {/* 5. 구성항목 */}
-              <div>
-                <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
-                  <h3 className="text-lg font-bold text-blue-400 tracking-wide">CU당 구성종목 <span className="text-white font-medium text-sm ml-2">[Top 10]</span></h3>
-                </div>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                  <div className="border border-slate-700 rounded-xl overflow-hidden">
-                    <table className="w-full text-right text-sm">
-                      <thead className="bg-slate-900/80 text-gray-400">
-                        <tr>
-                          <th className="p-3 text-left border-b border-slate-700 font-medium pl-5">구성종목명</th>
-                          <th className="p-3 border-b border-slate-700 font-medium">주식수(가설)</th>
-                          <th className="p-3 border-b border-slate-700 font-medium pr-5">구성비중(%)</th>
-                        </tr>
-                      </thead>
-                      <tbody>
+                {/* 5. 구성항목 */}
+                <div>
+                  <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
+                    <h3 className="text-lg font-bold text-blue-400 tracking-wide">CU당 구성종목 <span className="text-white font-medium text-sm ml-2">[Top 10]</span></h3>
+                  </div>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="border border-slate-700 rounded-xl overflow-hidden">
+                      <table className="w-full text-right text-sm">
+                        <thead className="bg-slate-900/80 text-gray-400">
+                          <tr>
+                            <th className="p-3 text-left border-b border-slate-700 font-medium pl-5">구성종목명</th>
+                            <th className="p-3 border-b border-slate-700 font-medium">주식수(가설)</th>
+                            <th className="p-3 border-b border-slate-700 font-medium pr-5">구성비중(%)</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {selectedDetailEtf.holdings?.length > 0 ? (
+                            selectedDetailEtf.holdings.slice(0, 10).map((h: any, i: number) => (
+                              <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
+                                <td className="p-2.5 text-left text-gray-200 pl-5">{h.ticker}</td>
+                                <td className="p-2.5 text-gray-400">{Math.round(h.weight * 50).toLocaleString()}</td>
+                                <td className="p-2.5 font-bold text-indigo-300 pr-5">{h.weight.toFixed(2)}</td>
+                              </tr>
+                            ))
+                          ) : (
+                            <tr><td colSpan={3} className="p-8 text-center text-gray-500">구성종목 데이터가 아직 제공되지 않았습니다. 잠시 후 다시 조회를 시도해보세요.</td></tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
+                      <h4 className="text-xs text-gray-500 font-bold mb-0 w-full text-left">비중 Top 10 차트</h4>
+                      <div className="flex-1 w-full min-h-[300px]">
                         {selectedDetailEtf.holdings?.length > 0 ? (
-                          selectedDetailEtf.holdings.slice(0, 10).map((h: any, i: number) => (
-                            <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
-                              <td className="p-2.5 text-left text-gray-200 pl-5">{h.ticker}</td>
-                              <td className="p-2.5 text-gray-400">{Math.round(h.weight * 50).toLocaleString()}</td>
-                              <td className="p-2.5 font-bold text-indigo-300 pr-5">{h.weight.toFixed(2)}</td>
-                            </tr>
-                          ))
+                          <ResponsiveContainer width="100%" height="100%">
+                            <PieChart>
+                              <Pie
+                                data={selectedDetailEtf.holdings.slice(0, 10)}
+                                cx="50%"
+                                cy="50%"
+                                labelLine={true}
+                                label={(props: any) => (
+                                  <text
+                                    x={props.x} y={props.y} fill="#cbd5e1"
+                                    fontSize={10} textAnchor={props.textAnchor}
+                                    dominantBaseline={props.dominantBaseline}
+                                  >
+                                    {props.payload.ticker} ({props.value.toFixed(1)}%)
+                                  </text>
+                                )}
+                                outerRadius={90}
+                                fill="#8884d8"
+                                dataKey="weight"
+                                stroke="rgba(0,0,0,0.5)"
+                                strokeWidth={2}
+                              >
+                                {selectedDetailEtf.holdings.slice(0, 10).map((entry: any, index: number) => {
+                                  const pieColors = ['#2563eb', '#dc2626', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16', '#f43f5e', '#64748b'];
+                                  return <Cell key={`cell-${index}`} fill={pieColors[index % pieColors.length]} />;
+                                })}
+                              </Pie>
+                              <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} itemStyle={{ color: '#e2e8f0' }} />
+                            </PieChart>
+                          </ResponsiveContainer>
                         ) : (
-                          <tr><td colSpan={3} className="p-8 text-center text-gray-500">구성종목 데이터가 아직 제공되지 않았습니다. 잠시 후 다시 조회를 시도해보세요.</td></tr>
+                          <div className="flex items-center justify-center h-full text-gray-600">No chart data</div>
                         )}
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
-                    <h4 className="text-xs text-gray-500 font-bold mb-0 w-full text-left">비중 Top 10 차트</h4>
-                    <div className="flex-1 w-full min-h-[300px]">
-                      {selectedDetailEtf.holdings?.length > 0 ? (
-                        <ResponsiveContainer width="100%" height="100%">
-                          <PieChart>
-                            <Pie
-                              data={selectedDetailEtf.holdings.slice(0, 10)}
-                              cx="50%"
-                              cy="50%"
-                              labelLine={true}
-                              label={(props: any) => (
-                                <text
-                                  x={props.x} y={props.y} fill="#cbd5e1"
-                                  fontSize={10} textAnchor={props.textAnchor}
-                                  dominantBaseline={props.dominantBaseline}
-                                >
-                                  {props.payload.ticker} ({props.value.toFixed(1)}%)
-                                </text>
-                              )}
-                              outerRadius={90}
-                              fill="#8884d8"
-                              dataKey="weight"
-                              stroke="rgba(0,0,0,0.5)"
-                              strokeWidth={2}
-                            >
-                              {selectedDetailEtf.holdings.slice(0, 10).map((entry: any, index: number) => {
-                                const pieColors = ['#2563eb', '#dc2626', '#f59e0b', '#10b981', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16', '#f43f5e', '#64748b'];
-                                return <Cell key={`cell-${index}`} fill={pieColors[index % pieColors.length]} />;
-                              })}
-                            </Pie>
-                            <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} itemStyle={{ color: '#e2e8f0' }} />
-                          </PieChart>
-                        </ResponsiveContainer>
-                      ) : (
-                        <div className="flex items-center justify-center h-full text-gray-600">No chart data</div>
-                      )}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              {/* 6. 거래량/거래대금 */}
-              <div>
-                <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
-                  <h3 className="text-lg font-bold text-blue-400 tracking-wide">거래량, 거래대금 <span className="text-white font-medium text-sm ml-2">(1개월, 평균)</span></h3>
-                </div>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                  <div className="border border-slate-700 rounded-xl overflow-hidden">
-                    <table className="w-full text-right text-sm">
-                      <thead className="bg-slate-900/80 text-gray-400">
-                        <tr>
-                          <th className="p-3 text-center border-b border-slate-700 font-medium">날짜</th>
-                          <th className="p-3 border-b border-slate-700 font-medium">거래량(천주)</th>
-                          <th className="p-3 border-b border-slate-700 font-medium pr-5">거래대금(백만원)</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {detailMockData.vol.map((v: any, i: number) => (
-                          <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
-                            <td className="p-2.5 text-center text-gray-400">{v.month}</td>
-                            <td className="p-2.5 text-gray-200">{v.volume.toLocaleString()}</td>
-                            <td className="p-2.5 text-gray-200 pr-5">{v.value.toLocaleString()}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
+                {/* 6. 거래량/거래대금 */}
+                <div>
+                  <div className="flex justify-between items-end mb-3 border-b-2 border-slate-700 pb-2">
+                    <h3 className="text-lg font-bold text-blue-400 tracking-wide">거래량, 거래대금 <span className="text-white font-medium text-sm ml-2">(1개월, 평균)</span></h3>
                   </div>
-                  <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col">
-                    <div className="flex justify-between text-xs text-gray-500 font-bold mb-3 px-2">
-                      <span>(천주)</span><span>(백만원)</span>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="border border-slate-700 rounded-xl overflow-hidden">
+                      <table className="w-full text-right text-sm">
+                        <thead className="bg-slate-900/80 text-gray-400">
+                          <tr>
+                            <th className="p-3 text-center border-b border-slate-700 font-medium">날짜</th>
+                            <th className="p-3 border-b border-slate-700 font-medium">거래량(천주)</th>
+                            <th className="p-3 border-b border-slate-700 font-medium pr-5">거래대금(백만원)</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {detailMockData.vol.map((v: any, i: number) => (
+                            <tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/20">
+                              <td className="p-2.5 text-center text-gray-400">{v.month}</td>
+                              <td className="p-2.5 text-gray-200">{v.volume.toLocaleString()}</td>
+                              <td className="p-2.5 text-gray-200 pr-5">{v.value.toLocaleString()}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
                     </div>
-                    <div className="flex-1 min-h-[250px] w-full">
-                      <ResponsiveContainer width="100%" height="100%">
-                        <ComposedChart data={detailMockData.vol.slice().reverse()} margin={{ top: 5, right: 0, left: -10, bottom: 5 }}>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
-                          <XAxis dataKey="month" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" />
-                          <YAxis yAxisId="left" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} />
-                          <YAxis yAxisId="right" orientation="right" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} />
-                          <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
-                          <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
-                          <Bar yAxisId="left" dataKey="volume" name="월간평균거래량(좌)" fill="#3b82f6" maxBarSize={15} />
-                          <Line yAxisId="right" type="monotone" dataKey="value" name="월간평균거래대금(우)" stroke="#ea580c" strokeWidth={2} dot={{ r: 3 }} />
-                        </ComposedChart>
-                      </ResponsiveContainer>
+                    <div className="border border-slate-800 bg-slate-900/20 rounded-xl p-4 flex flex-col">
+                      <div className="flex justify-between text-xs text-gray-500 font-bold mb-3 px-2">
+                        <span>(천주)</span><span>(백만원)</span>
+                      </div>
+                      <div className="flex-1 min-h-[250px] w-full">
+                        <ResponsiveContainer width="100%" height="100%">
+                          <ComposedChart data={detailMockData.vol.slice().reverse()} margin={{ top: 5, right: 0, left: -10, bottom: 5 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1e293b" />
+                            <XAxis dataKey="month" tick={{ fill: '#64748b', fontSize: 11 }} tickMargin={10} stroke="#1e293b" />
+                            <YAxis yAxisId="left" tick={{ fill: '#3b82f6', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} />
+                            <YAxis yAxisId="right" orientation="right" tick={{ fill: '#ef4444', fontSize: 11 }} tickFormatter={(val) => `${val.toLocaleString()}`} stroke="#1e293b" axisLine={false} />
+                            <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155' }} />
+                            <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '10px' }} />
+                            <Bar yAxisId="left" dataKey="volume" name="월간평균거래량(좌)" fill="#3b82f6" maxBarSize={15} />
+                            <Line yAxisId="right" type="monotone" dataKey="value" name="월간평균거래대금(우)" stroke="#ea580c" strokeWidth={2} dot={{ r: 3 }} />
+                          </ComposedChart>
+                        </ResponsiveContainer>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )
+      }
 
-    </main>
+    </main >
   );
 }