diff --git a/img/sales1.jpg b/img/sales1.jpg
new file mode 100644
index 0000000..ab48d44
Binary files /dev/null and b/img/sales1.jpg differ
diff --git a/index.php b/index.php
index 803cf88..ac1871f 100644
--- a/index.php
+++ b/index.php
@@ -267,98 +267,148 @@
     </div>
 
     <script>
-        // Data - Ported from constants.ts
+        // 통일된 영업 자료 데이터 구조
+        // 모든 카드는 동일한 포맷: 이미지(4:3), 설명, 동영상, 오디오, 영업 스크립트
         const ASSETS = [
           {
-            id: '1', type: 'IMAGE', title: '대표를 위한 무기',
-            src: 'img/sam_sales1.jpg',
+            id: '1',
+            title: '대표를 위한 무기',
+            image: 'img/sales1.jpg',
             description: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오.',
-            content: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오. SAM이 대표님께 직접, 실시간으로 회사의 현황을 보고합니다.',
+            video: null,
+            audio: null,
             script: "대표님, ERP나 MES 들어보셨죠? 보통 직원들이 입력하고 관리하는 도구입니다. 정작 대표님은 직원한테 보고를 받아야만 회사를 알 수 있죠. SAM은 반대입니다. 직원이 아니라 '대표님을 위한 무기'입니다. 외근 중이든 집이든, 대표님 폰에서 회사의 자금, 인력, 리스크가 한눈에 보입니다.",
-            tags: [ 'Pitch', 'Opener'], gridSpan: 'col-span-1', rowSpan: 'row-span-1', customAspect: 'aspect-[3/4]'
+            tags: ['Pitch', 'Opener'],
           },
           {
-            id: '3', type: 'VIDEO', title: 'CEO 시크릿 대시보드', src: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=2670&q=80', videoTitle: 'CEO Dashboard Demo',
-            embedHtml: '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1146972515?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="CEO의_경영_비서,_SAM"></iframe></div>',
+            id: '3',
+            title: 'CEO 시크릿 대시보드',
+            image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=2670&q=80',
             description: '가지급금 이자 4.6%, 예상 부가세, 자금 현황이 오직 대표님 화면에만 실시간으로 계산되어 표시됩니다.',
+            video: '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1146972515?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="CEO의_경영_비서,_SAM"></iframe></div>',
+            audio: null,
             script: "이 화면은 직원들은 못 봅니다. 오직 대표님 아이디로 로그인했을 때만 뜹니다. 여기 붉은 글씨 보이시죠? 현재 가지급금에 대한 인정이자 4.6%가 실시간으로 계산돼서 '대표님, 세금 폭탄 조심하세요'라고 경고해주는 겁니다. 세무사가 알려주기 전에 SAM이 먼저 알려드립니다.",
-            tags: ['Demo', 'Dashboard', 'Finance'], gridSpan: 'col-span-1 md:col-span-2', rowSpan: 'row-span-2'
+            tags: ['Demo', 'Dashboard', 'Finance'],
           },
           {
-            id: '4', type: 'IMAGE', title: '20가지 고충 해결',
-            src: 'img/sam_sales2.jpg',
+            id: '4',
+            title: '20가지 고충 해결',
+            image: 'img/sam_sales2.jpg',
             description: '사람(근태), 돈(세금), 운영(현장), 대표의 삶(리스크). CEO가 겪는 20가지 고충을 방어합니다.',
-            content: '사람(근태, 인수인계), 돈(세금, 자금), 운영(현장관리), 대표의 삶(리스크). CEO가 겪는 20가지 핵심 고충을 시스템 하나로 방어합니다.',
+            video: null,
+            audio: null,
             script: "중소기업 대표님의 머릿속을 20가지로 정리해봤습니다. 직원 근태, 자금 압박, 세무 조사... 이 모든 걸 혼자 감당하고 계시지 않습니까? SAM은 단순 프로그램이 아니라, 이 20가지 리스크를 막아주는 방패입니다.",
-            tags: ['Pain Points', 'Solution'], gridSpan: 'col-span-1', rowSpan: 'row-span-1', customAspect: 'aspect-[3/4]'
+            tags: ['Pain Points', 'Solution'],
           },
           {
-            id: '5', type: 'IMAGE', title: '모바일 & 감성 알림', src: 'img/sam_alert.jpg',
+            id: '5',
+            title: '모바일 & 감성 알림',
+            image: 'img/sam_alert.jpg',
             description: '수주/입금 시 울리는 "SAM~" 알림음. 외근 중에도 회사가 돌아가는 소리를 들으세요.',
+            video: null,
+            audio: null,
             script: "가장 인기 있는 기능입니다. 외근 나가 계실 때 불안하시죠? 직원이 큰 수주를 따오거나, 거래처에서 돈을 입금하면 대표님 폰에서 'SAM~' 하고 알림이 옵니다. 그 소리만 들으면 '아, 우리 회사 잘 돌아가고 있구나' 안심이 되실 겁니다.",
-            tags: ['Mobile', 'UX', 'Emotion'], gridSpan: 'col-span-3 md:col-span-3', rowSpan: 'row-span-1', customAspect: 'aspect-video'
+            tags: ['Mobile', 'UX', 'Emotion'],
           },
           {
-            id: '6', type: 'VIDEO', title: '영업 전략 해부: CEO에게 파는 법', 
-            src: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
-            embedHtml: '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1146961422?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="영업_전략_해부__CEO에게_파는_법"></iframe></div>',
-            content: 'SAM 프로젝트의 핵심 영업 전략은 CEO들의 **심리적 약점과 욕구(통제 욕구, 복잡한 것 회피, 비용 민감성)**를 파고들어 설득력을 극대화하도록 재정비되었습니다.',
+            id: '6',
+            title: '영업 전략 해부: CEO에게 파는 법',
+            image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
+            description: 'SAM 프로젝트의 핵심 영업 전략은 CEO들의 심리적 약점과 욕구(통제 욕구, 복잡한 것 회피, 비용 민감성)를 파고들어 설득력을 극대화하도록 재정비되었습니다.',
+            video: '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1146961422?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="영업_전략_해부__CEO에게_파는_법"></iframe></div>',
+            audio: null,
             script: "1. 통제 욕구 및 불안감 자극/해소: 지각/무단결근 등 특이사항과 내일 나갈 돈(예상 부가세)을 미리 보여주어 통제감을 높여줍니다.\n2. 복잡한 것 회피: 모바일 중심의 '시크릿 모드'와 10초 사용을 강조하여 진입장벽을 낮춥니다.\n3. 비용 민감성: 월 30~50만 원으로 24시간 AI 경영 비서를 고용하는 가성비를 강조합니다.",
-            tags: ['Strategy', 'CEO Psychology', 'Sales Pitch'], gridSpan: 'col-span-1 md:col-span-2', rowSpan: 'row-span-1'
+            tags: ['Strategy', 'CEO Psychology', 'Sales Pitch'],
           },
           {
-            id: '7', type: 'IMAGE', title: '자동화 & 인수인계', src: 'img/sam_time.jpg',
+            id: '7',
+            title: '자동화 & 인수인계',
+            image: 'img/sam_time.jpg',
             description: '직원이 갑자기 퇴사해도 걱정 없습니다. 견적부터 발주, 출고까지 모든 이력이 클릭 한 번으로 자동 인수인계됩니다.',
+            video: null,
+            audio: null,
             script: "직원이 갑자기 그만둔다고 하면 눈앞이 캄캄하시죠? 파일 어디 있냐, 거래처 연락처 뭐냐... SAM을 쓰시면 그럴 일 없습니다. 모든 업무 기록이 서버에 남기 때문에, 후임자는 '클릭' 한 번이면 전임자의 모든 업무를 그대로 이어받습니다.",
-            tags: ['Automation', 'Management'], gridSpan: 'col-span-1', rowSpan: 'row-span-2', customAspect: 'aspect-[3/5]'
+            tags: ['Automation', 'Management'],
           },
           {
-            id: '9', type: 'TEXT', title: '도입 제안 (Closing)',
-            content: '월 구독료로 수천만 원대 맞춤형 ERP 기능과 개인 비서를 고용하는 효과를 누리십시오. 내일부터는 "걱정" 대신 "설렘"으로 출근하십시오.',
+            id: '9',
+            title: '도입 제안 (Closing)',
+            image: null,
+            description: '월 구독료로 수천만 원대 맞춤형 ERP 기능과 개인 비서를 고용하는 효과를 누리십시오. 내일부터는 "걱정" 대신 "설렘"으로 출근하십시오.',
+            video: null,
+            audio: null,
             script: "직원 한 명 월급의 1/10도 안 되는 비용입니다. 이 돈으로 24시간 비서, 그리고 완벽한 경영 시스템을 고용하시는 겁니다. 오늘 결정하시고, 내일부터는 가벼운 마음으로 출근하십시오.",
-            tags: ['Closing', 'Pricing'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            tags: ['Closing', 'Pricing'],
           },
           {
-             id: '10', type: 'AUDIO', title: '[Core Features] 대표님이 반할 기능 8선', src: 'm4a/strategy.m4a',
-             content: 'AI 경영 비서부터 자금/세무 관리까지, SAM이 제공하는 8가지 핵심 기능을 3분 요약으로 들어보세요.',
-             script: "AI 경영 비서: 음성 인식 업무일지, 회의록, 자동 번역\n스마트 현장: 사진 토큰 관리, GPS 기반 출퇴근, QR 설비 관리\n자금/세무: 예상 부가세, 법인카드 한도 관리, 경리일보 자동화\n리스크 방어: 미수금 알림, 재고 부족 경고, 신규 거래처 신용 등급 표시\n편의 기능: 용량 걱정 없는 무제한 파일함, 시그니처 매출 알림음",
-             tags: ['Podcast', 'Audio', 'Feature'], gridSpan: 'col-span-1 md:col-span-2', rowSpan: 'row-span-1'
+            id: '10',
+            title: '[Core Features] 대표님이 반할 기능 8선',
+            image: null,
+            description: 'AI 경영 비서부터 자금/세무 관리까지, SAM이 제공하는 8가지 핵심 기능을 3분 요약으로 들어보세요.',
+            video: null,
+            audio: 'm4a/strategy.m4a',
+            script: "AI 경영 비서: 음성 인식 업무일지, 회의록, 자동 번역\n스마트 현장: 사진 토큰 관리, GPS 기반 출퇴근, QR 설비 관리\n자금/세무: 예상 부가세, 법인카드 한도 관리, 경리일보 자동화\n리스크 방어: 미수금 알림, 재고 부족 경고, 신규 거래처 신용 등급 표시\n편의 기능: 용량 걱정 없는 무제한 파일함, 시그니처 매출 알림음",
+            tags: ['Podcast', 'Audio', 'Feature'],
           },
           {
-             id: '11', type: 'TEXT', title: '1. 대표님의 고민 (Pain Points)',
-             content: '매출은 느는데 이익은 제자리? 직원과 현장을 100% 믿을 수 있나? 세금 낼 때마다 자금 계획이 꼬이나? 이는 정보 부재에서 오는 "전략적 리스크"입니다.',
-             script: "매출은 계속 오르는데, 왜 통장에 남는 돈은 없을까요? 직원들은 정말 열심히 하고 있는 걸까요? 세금 낼 때마다 목돈 마련하느라 허덕이시진 않나요? 더 많은 보고서가 아니라, 대표님 손안에 '진짜 정보'가 필요할 때입니다.",
-             tags: ['Pain Points', 'Risk', 'Needs'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            id: '11',
+            title: '1. 대표님의 고민 (Pain Points)',
+            image: null,
+            description: '매출은 느는데 이익은 제자리? 직원과 현장을 100% 믿을 수 있나? 세금 낼 때마다 자금 계획이 꼬이나? 이는 정보 부재에서 오는 "전략적 리스크"입니다.',
+            video: null,
+            audio: null,
+            script: "매출은 계속 오르는데, 왜 통장에 남는 돈은 없을까요? 직원들은 정말 열심히 하고 있는 걸까요? 세금 낼 때마다 목돈 마련하느라 허덕이시진 않나요? 더 많은 보고서가 아니라, 대표님 손안에 '진짜 정보'가 필요할 때입니다.",
+            tags: ['Pain Points', 'Risk', 'Needs'],
           },
           {
-             id: '12', type: 'TEXT', title: '2. 새로운 해법 (Solution)',
-             content: 'SAM은 "실무자 관리 도구"가 아닌 "CEO 의사결정 도구"입니다. 복잡한 입력은 AI가, 대표님은 직관적인 신호등과 요약 카드만 확인하십시오.',
-             script: "기존 ERP는 관리자용이라 복잡하고 비쌉니다. SAM은 다릅니다. 오직 대표님을 위해 설계되었습니다. 복잡한 표 대신 신호등으로, PC 대신 모바일로, 수천만 원 구축비 대신 합리적 구독료로 제공합니다. 복잡한 건 AI에게 맡기고, 대표님은 흐름만 보십시오.",
-             tags: ['Solution', 'Differentiation', 'AI'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            id: '12',
+            title: '2. 새로운 해법 (Solution)',
+            image: null,
+            description: 'SAM은 "실무자 관리 도구"가 아닌 "CEO 의사결정 도구"입니다. 복잡한 입력은 AI가, 대표님은 직관적인 신호등과 요약 카드만 확인하십시오.',
+            video: null,
+            audio: null,
+            script: "기존 ERP는 관리자용이라 복잡하고 비쌉니다. SAM은 다릅니다. 오직 대표님을 위해 설계되었습니다. 복잡한 표 대신 신호등으로, PC 대신 모바일로, 수천만 원 구축비 대신 합리적 구독료로 제공합니다. 복잡한 건 AI에게 맡기고, 대표님은 흐름만 보십시오.",
+            tags: ['Solution', 'Differentiation', 'AI'],
           },
           {
-             id: '13', type: 'TEXT', title: '3. 핵심 기능 (Core Features)',
-             content: '리스크 사전 방지(미수금, 재고), 자금 흐름 관리(예상 부가세, 한도 체크), 실시간 현장 통제(지각, AI 업무일지).',
-             script: "A업체 미수금 3개월 경과, 접대비 한도 80% 소진, 오늘 지각자 3명... 대표님이 놓치기 쉬운 '리스크'만 골라서 붉은색 알림을 띄워드립니다. 사무실 밖에서도 현장과 자금이 한눈에 들어옵니다.",
-             tags: ['Features', 'Risk', 'Finance', 'Ops'], gridSpan: 'col-span-1 md:col-span-1', rowSpan: 'row-span-1'
+            id: '13',
+            title: '3. 핵심 기능 (Core Features)',
+            image: null,
+            description: '리스크 사전 방지(미수금, 재고), 자금 흐름 관리(예상 부가세, 한도 체크), 실시간 현장 통제(지각, AI 업무일지).',
+            video: null,
+            audio: null,
+            script: "A업체 미수금 3개월 경과, 접대비 한도 80% 소진, 오늘 지각자 3명... 대표님이 놓치기 쉬운 '리스크'만 골라서 붉은색 알림을 띄워드립니다. 사무실 밖에서도 현장과 자금이 한눈에 들어옵니다.",
+            tags: ['Features', 'Risk', 'Finance', 'Ops'],
           },
           {
-             id: '14', type: 'STAT', title: '4. 도입 효과 (ROI)', statValue: '0분', statLabel: '업무 보고 시간',
-             content: '보고 시간 0분(실시간 확인), 단순 업무 80% 자동화, 의사결정 속도 즉시. 눈에 보이는 비용 절감과 경쟁력 강화를 경험하십시오.',
-             script: "직원이 보고서 만들어서 결재 올릴 때까지 기다리지 마십시오. SAM을 쓰면 보고 시간이 '0분'이 됩니다. 단순 반복 업무는 80% 자동화됩니다. 이게 바로 돈 버는 시스템입니다.",
-             tags: ['ROI', 'Efficiency', 'Automation'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            id: '14',
+            title: '4. 도입 효과 (ROI)',
+            image: null,
+            description: '보고 시간 0분(실시간 확인), 단순 업무 80% 자동화, 의사결정 속도 즉시. 눈에 보이는 비용 절감과 경쟁력 강화를 경험하십시오.',
+            video: null,
+            audio: null,
+            script: "직원이 보고서 만들어서 결재 올릴 때까지 기다리지 마십시오. SAM을 쓰면 보고 시간이 '0분'이 됩니다. 단순 반복 업무는 80% 자동화됩니다. 이게 바로 돈 버는 시스템입니다.",
+            tags: ['ROI', 'Efficiency', 'Automation'],
           },
           {
-             id: '15', type: 'STAT', title: '5. 제안 (Investment)', statValue: '1/100', statLabel: '채용 대비 비용',
-             content: '연 3,000만 원 경리 직원 채용 vs 월 30만 원 AI 비서. 24시간 잠들지 않는 AI를 신입사원 월급의 1/10도 안 되는 비용으로 고용하십시오.',
-             script: "사람 한 명 뽑으려면 3천만 원 듭니다. SAM은 월 30만 원입니다. 1/100 비용으로 24시간 잠들지 않고 실수도 없는 완벽한 AI 비서를 채용하시는 겁니다. 이건 지출이 아니라 가장 확실한 투자입니다.",
-             tags: ['Investment', 'Cost', 'Value'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            id: '15',
+            title: '5. 제안 (Investment)',
+            image: null,
+            description: '연 3,000만 원 경리 직원 채용 vs 월 30만 원 AI 비서. 24시간 잠들지 않는 AI를 신입사원 월급의 1/10도 안 되는 비용으로 고용하십시오.',
+            video: null,
+            audio: null,
+            script: "사람 한 명 뽑으려면 3천만 원 듭니다. SAM은 월 30만 원입니다. 1/100 비용으로 24시간 잠들지 않고 실수도 없는 완벽한 AI 비서를 채용하시는 겁니다. 이건 지출이 아니라 가장 확실한 투자입니다.",
+            tags: ['Investment', 'Cost', 'Value'],
           },
           {
-             id: '16', type: 'TEXT', title: '6. 다음 단계 (Next Steps)',
-             content: '백 번 설명보다 한 번의 경험이 낫습니다. 대표님 업종에 맞춘 "무료 진단 & 시연"과 "3일 무료 체험"을 신청하십시오.',
-             script: "우리 회사에 맞을까 고민하지 마세요. 대표님 업종에 딱 맞춘 대시보드를 미리 구성해서 보여드립니다. 3일만 직접 써보시면, 왜 SAM이 필수인지 바로 아실 겁니다.",
-             tags: ['Call to Action', 'Demo', 'Free Trial'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            id: '16',
+            title: '6. 다음 단계 (Next Steps)',
+            image: null,
+            description: '백 번 설명보다 한 번의 경험이 낫습니다. 대표님 업종에 맞춘 "무료 진단 & 시연"과 "3일 무료 체험"을 신청하십시오.',
+            video: null,
+            audio: null,
+            script: "우리 회사에 맞을까 고민하지 마세요. 대표님 업종에 딱 맞춘 대시보드를 미리 구성해서 보여드립니다. 3일만 직접 써보시면, 왜 SAM이 필수인지 바로 아실 겁니다.",
+            tags: ['Call to Action', 'Demo', 'Free Trial'],
           }
         ];
 
@@ -403,8 +453,8 @@
         function getFilteredAssets() {
             if (activeFilter === '전체') return ASSETS;
             return ASSETS.filter(asset => {
-                if (activeFilter === 'CEO 설득') return asset.tags.some(tag => ['Concept', 'Pitch', 'Pain Points', 'Solution', 'Closing'].includes(tag));
-                if (activeFilter === '데모') return asset.tags.some(tag => ['Demo', 'Dashboard', 'Video', 'Mobile', 'UX', 'Infra'].includes(tag));
+                if (activeFilter === 'CEO 설득') return asset.tags.some(tag => ['Pitch', 'Opener', 'Pain Points', 'Solution', 'Closing', 'Risk', 'Needs', 'Differentiation', 'Investment', 'Cost', 'Value'].includes(tag));
+                if (activeFilter === '데모') return asset.tags.some(tag => ['Demo', 'Dashboard', 'Video', 'Mobile', 'UX', 'Infra', 'Feature', 'Automation', 'Management'].includes(tag));
                 return true;
             });
         }
@@ -420,99 +470,72 @@
             }
 
             gridEl.innerHTML = assets.map(asset => {
-                let contentRaw = '';
-                let iconName = '';
-                let badgeColor = '';
-                
-                // Determine card content based on type
-                if (asset.type === 'TEXT') {
-                    contentRaw = `<p class="text-slate-600 mb-4 leading-relaxed line-clamp-3">${asset.content}</p>`;
-                    iconName = 'file-text';
-                    badgeColor = 'bg-blue-100 text-blue-700';
-                } else if (asset.type === 'STAT') {
-                     contentRaw = `
-                        <div class="flex items-end gap-2 mb-2">
-                            <span class="text-4xl font-bold text-slate-900 tracking-tight">${asset.statValue}</span>
-                            <span class="text-sm font-medium text-slate-500 mb-1.5">${asset.statLabel}</span>
-                        </div>
-                        <p class="text-slate-600 text-sm line-clamp-2">${asset.script.substring(0, 100)}...</p>
-                    `;
-                    iconName = 'bar-chart-2';
-                    badgeColor = 'bg-emerald-100 text-emerald-700';
-                } else if (asset.type === 'IMAGE' || asset.type === 'VIDEO') {
-                    // 비디오는 16:9, 이미지는 기본적으로 세로형(3:4) 비율 적용
-                    const defaultAspect = asset.type === 'VIDEO' ? 'aspect-video' : 'aspect-[3/4]';
-                    const aspectClass = asset.customAspect || defaultAspect;
-                    // object-cover 대신 object-contain을 사용하고 padding을 주어 잘림 방지
-                    contentRaw = `
-                        <div class="mb-4 rounded-lg overflow-hidden border border-slate-100 relative group ${aspectClass} bg-slate-50 p-2 flex items-center justify-center">
-                            <img src="${asset.src}" alt="${asset.title}" 
-                                 class="w-full h-full object-contain transform group-hover:scale-105 transition-transform duration-500"
-                                 style="image-rendering: -webkit-optimize-contrast;">
-                            ${asset.type === 'VIDEO' ? `
-                            <div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-all">
-                                <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center pl-1 shadow-lg transform group-hover:scale-110 transition-transform">
-                                    <i data-lucide="play" class="w-5 h-5 text-slate-900 fill-slate-900"></i>
+                // [1] 이미지 영역 (실제 이미지 비율 계산)
+                let imageHtml = '';
+                if (asset.image) {
+                    imageHtml = `
+                        <div class="relative bg-slate-50 overflow-hidden group/img cursor-pointer border-b border-slate-100" onclick="openModal('${asset.id}')" data-asset-id="${asset.id}">
+                            <img src="${asset.image}" alt="${asset.title}" 
+                                 class="w-full h-auto object-cover transform group-hover/img:scale-105 transition-transform duration-700"
+                                 style="image-rendering: -webkit-optimize-contrast;"
+                                 onload="setImageAspectRatio(this)"
+                                 data-asset-id="${asset.id}">
+                            <div class="absolute inset-0 bg-black/5 opacity-0 group-hover/img:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
+                                <div class="bg-white/90 backdrop-blur p-2 rounded-full shadow-lg">
+                                    <i data-lucide="zoom-in" class="w-5 h-5 text-slate-700"></i>
                                 </div>
                             </div>
-                            ` : ''}
-                        </div>
-                        <p class="text-slate-600 text-sm line-clamp-2">${asset.description || asset.script}</p>
-                    `;
-                    iconName = asset.type === 'VIDEO' ? 'video' : 'image';
-                    badgeColor = asset.type === 'VIDEO' ? 'bg-violet-100 text-violet-700' : 'bg-pink-100 text-pink-700';
-                } else if (asset.type === 'AUDIO') {
-                     contentRaw = `
-                        <div class="mb-4 rounded-xl overflow-hidden bg-slate-900 p-6 relative group flex items-center justify-between gap-4">
-                            <div class="flex items-center gap-4 z-10">
-                                <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center text-white shrink-0 animate-pulse">
-                                    <i data-lucide="headphones" class="w-6 h-6"></i>
-                                </div>
-                                <div>
-                                    <div class="text-white font-bold text-sm mb-1">SAM Podcast</div>
-                                    <div class="text-slate-400 text-xs">3:42 • Strategy Brief</div>
-                                </div>
+                        </div>`;
+                } else {
+                    // 이미지가 없을 때 아이콘 표시
+                    let iconName = 'file-text';
+                    if (asset.video) iconName = 'play-circle';
+                    else if (asset.audio) iconName = 'mic';
+                    
+                    imageHtml = `
+                        <div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center border-b border-slate-100">
+                            <div class="text-slate-300">
+                                <i data-lucide="${iconName}" class="w-16 h-16 opacity-40"></i>
                             </div>
-                            <div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white group-hover:bg-white/20 transition-colors z-10">
-                                <i data-lucide="play" class="w-4 h-4 fill-white"></i>
-                            </div>
-                            <!-- Waveform effect -->
-                            <div class="absolute inset-0 opacity-20 flex items-end justify-between px-4 pb-2 gap-1 pointer-events-none">
-                                <div class="w-1 h-3 bg-white rounded-full"></div><div class="w-1 h-5 bg-white rounded-full"></div><div class="w-1 h-8 bg-white rounded-full"></div><div class="w-1 h-4 bg-white rounded-full"></div>
-                                <div class="w-1 h-6 bg-white rounded-full"></div><div class="w-1 h-2 bg-white rounded-full"></div><div class="w-1 h-5 bg-white rounded-full"></div><div class="w-1 h-7 bg-white rounded-full"></div>
-                                <div class="w-1 h-3 bg-white rounded-full"></div><div class="w-1 h-6 bg-white rounded-full"></div><div class="w-1 h-4 bg-white rounded-full"></div><div class="w-1 h-2 bg-white rounded-full"></div>
-                            </div>
-                        </div>
-                        <p class="text-slate-600 text-sm line-clamp-2">${asset.content}</p>
-                    `;
-                    iconName = 'mic';
-                    badgeColor = 'bg-indigo-100 text-indigo-700';
+                        </div>`;
                 }
 
+                // [2] 정보 영역
                 return `
-                <div class="bg-white rounded-2xl border border-slate-100 p-6 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 cursor-pointer group h-full flex flex-col ${asset.gridSpan} ${asset.rowSpan}" onclick="openModal('${asset.id}')">
-                    <div class="flex justify-between items-start mb-4">
-                        <div class="flex items-center gap-2">
-                           <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${badgeColor}">
-                                <i data-lucide="${iconName}" class="w-3 h-3"></i>
-                                ${asset.type}
-                           </span>
-                           ${asset.tags[0] ? `<span class="text-xs text-slate-400 font-medium">#${asset.tags[0]}</span>` : ''}
+                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl transition-all duration-500 overflow-hidden flex flex-col group h-full" onclick="openModal('${asset.id}')">
+                    ${imageHtml}
+                    <div class="p-6 flex-grow flex flex-col">
+                        <div class="flex items-center justify-between mb-3">
+                            <div class="flex gap-2">
+                                ${asset.tags.map(tag => `<span class="text-slate-400 text-[10px] font-medium">#${tag}</span>`).join(' ')}
+                            </div>
+                            <button class="text-slate-300 hover:text-brand-500 transition-colors">
+                                <i data-lucide="share-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        
+                        <h3 class="text-lg font-bold text-slate-900 mb-2 group-hover:text-brand-600 transition-colors">${asset.title}</h3>
+                        
+                        <div class="flex-grow">
+                            <p class="text-slate-600 text-sm leading-relaxed mb-4 line-clamp-3">
+                                ${asset.description || ''}
+                            </p>
                         </div>
-                        <button class="text-slate-400 hover:text-brand-600 transition-colors">
-                            <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
-                        </button>
-                    </div>
-                    
-                    <h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-brand-600 transition-colors">${asset.title}</h3>
-                    
-                    <div class="flex-grow">
-                        ${contentRaw}
-                    </div>
 
-                    <div class="mt-6 pt-4 border-t border-slate-50 flex items-center justify-between text-xs font-medium text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                        <span>클릭하여 상세 보기</span>
-                        <span>핵심 스크립트 & 자료</span>
+                        <!-- 미디어 타입 표시 -->
+                        <div class="mb-3 flex items-center gap-2 text-xs text-slate-400">
+                            ${asset.image ? '<span class="flex items-center gap-1"><i data-lucide="image" class="w-3 h-3"></i> 이미지</span>' : ''}
+                            ${asset.video ? '<span class="flex items-center gap-1"><i data-lucide="play-circle" class="w-3 h-3"></i> 동영상</span>' : ''}
+                            ${asset.audio ? '<span class="flex items-center gap-1"><i data-lucide="mic" class="w-3 h-3"></i> 팟캐스트</span>' : ''}
+                            ${asset.script ? '<span class="flex items-center gap-1"><i data-lucide="message-square" class="w-3 h-3"></i> 스크립트</span>' : ''}
+                        </div>
+                        
+                        <div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
+                            <button class="text-brand-600 text-xs font-bold hover:underline flex items-center gap-1">
+                                상세 보기 <i data-lucide="chevron-right" class="w-3 h-3"></i>
+                            </button>
+                            <span class="text-[10px] text-slate-300 font-bold uppercase tracking-widest">SAM</span>
+                        </div>
                     </div>
                 </div>
                 `;
@@ -527,62 +550,71 @@
             // Generate content
             const tagsHtml = asset.tags.map(tag => `<span class="px-2 py-1 rounded-md bg-slate-100 text-slate-500 text-xs font-medium">#${tag}</span>`).join('');
             
+            // 통일된 미디어 표시 구조
             let mediaHtml = '';
-            if (asset.src) {
-                if (asset.type === 'VIDEO') {
-                    mediaHtml = `
-                    <div class="aspect-video bg-slate-100 rounded-xl overflow-hidden mb-6 relative group">
-                        <img src="${asset.src}" class="w-full h-full object-cover">
-                         <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
-                            <div class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center pl-1 shadow-lg">
-                                <i data-lucide="play" class="w-6 h-6 text-slate-900 fill-slate-900"></i>
-                            </div>
+            
+            // 1. 이미지 (실제 비율 계산)
+            if (asset.image) {
+                mediaHtml += `
+                    <div class="mb-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <div class="w-1 h-5 rounded-full bg-brand-500"></div>
+                            <h4 class="font-bold text-slate-900">이미지</h4>
                         </div>
-                    </div>`;
-                    
-                    // Override with embed HTML if present (for Vimeo)
-                    if (asset.embedHtml) {
-                        mediaHtml = `<div class="aspect-video bg-slate-100 rounded-xl overflow-hidden mb-6 relative z-0">${asset.embedHtml}</div>`;
-                    }
-                } else if (asset.type === 'AUDIO') {
-                     mediaHtml = `
-                        <div class="bg-slate-900 rounded-xl p-8 mb-6 text-center">
-                            <div class="w-24 h-24 rounded-full bg-indigo-500 mx-auto mb-6 flex items-center justify-center shadow-lg hover:scale-105 transition-transform">
-                                <i data-lucide="mic" class="w-10 h-10 text-white"></i>
-                            </div>
-                            <h4 class="text-white font-bold text-xl mb-2">${asset.title}</h4>
-                            <p class="text-slate-400 text-sm mb-6">SAM Strategy Podcast • 3:42</p>
-                            <audio controls class="w-full">
-                                <source src="${asset.src}" type="audio/mp4">
-                                <source src="${asset.src}" type="audio/mpeg">
-                                Your browser does not support the audio element.
-                            </audio>
-                        </div>
-                    `;
-                } else {
-                    // 원본 크기 전환 및 스크롤 가능 컨테이너 적용 (버튼 위치 절대 좌표 고정)
-                    mediaHtml = `
-                        <div class="relative mb-6 group/viewer min-h-[200px] bg-slate-50 rounded-xl overflow-hidden border border-slate-100">
-                            <!-- 항상 고정된 우측 상단 위치 -->
-                            <div class="absolute top-3 right-3 z-[60] flex gap-2 translate-y-2 opacity-0 group-hover/viewer:translate-y-0 group-hover/viewer:opacity-100 transition-all duration-300">
+                        <div class="relative group viewer bg-slate-50 rounded-xl overflow-hidden border border-slate-100">
+                            <div class="absolute top-3 right-3 z-[60] flex gap-2 translate-y-2 opacity-0 group-hover:opacity-100 transition-all duration-300">
                                 <button onclick="toggleNaturalSize(this)" 
-                                        class="px-4 py-2 bg-white/95 backdrop-blur-md shadow-lg border border-slate-200 rounded-full text-xs font-bold text-brand-600 hover:bg-brand-600 hover:text-white transition-all flex items-center gap-2 ring-4 ring-black/5">
+                                        class="px-4 py-2 bg-white/95 backdrop-blur-md shadow-lg border border-slate-200 rounded-full text-xs font-bold text-brand-600 hover:bg-brand-600 hover:text-white transition-all flex items-center gap-2">
                                     <i data-lucide="maximize" class="w-3.5 h-3.5"></i>
                                     <span>원본 크기 보기</span>
                                 </button>
                             </div>
-                            <!-- 이미지 스크롤 영역 -->
-                            <div class="img-full-container custom-scrollbar scroll-smooth w-full" id="image-viewer">
-                                <img src="${asset.src}" 
-                                     id="modal-main-img"
-                                     class="w-full h-auto object-contain rounded-xl img-zoom-target mx-auto"
-                                     style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;">
+                            <div class="img-full-container custom-scrollbar scroll-smooth w-full overflow-hidden">
+                                <img src="${asset.image}" 
+                                     id="modal-main-img-${asset.id}"
+                                     class="w-full h-auto object-contain rounded-xl img-zoom-target"
+                                     style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;"
+                                     onload="setModalImageAspectRatio(this)">
                             </div>
-                            <div class="absolute bottom-3 left-0 right-0 text-center text-[10px] text-slate-400 font-medium pointer-events-none group-hover/viewer:opacity-0 transition-opacity">
-                                * 우측 상단 버튼으로 원본 크기를 확인할 수 있습니다.
+                        </div>
+                    </div>`;
+            }
+            
+            // 2. 동영상
+            if (asset.video) {
+                mediaHtml += `
+                    <div class="mb-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <div class="w-1 h-5 rounded-full bg-brand-500"></div>
+                            <h4 class="font-bold text-slate-900">동영상</h4>
+                        </div>
+                        <div class="aspect-video bg-slate-100 rounded-xl overflow-hidden relative z-0">
+                            ${asset.video}
+                        </div>
+                    </div>`;
+            }
+            
+            // 3. 오디오 팟캐스트
+            if (asset.audio) {
+                mediaHtml += `
+                    <div class="mb-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <div class="w-1 h-5 rounded-full bg-brand-500"></div>
+                            <h4 class="font-bold text-slate-900">팟캐스트</h4>
+                        </div>
+                        <div class="bg-slate-900 rounded-xl p-8 text-center">
+                            <div class="w-24 h-24 rounded-full bg-indigo-500 mx-auto mb-6 flex items-center justify-center shadow-lg">
+                                <i data-lucide="mic" class="w-10 h-10 text-white"></i>
                             </div>
-                        </div>`;
-                }
+                            <h4 class="text-white font-bold text-xl mb-2">${asset.title}</h4>
+                            <p class="text-slate-400 text-sm mb-6">SAM Strategy Podcast</p>
+                            <audio controls class="w-full">
+                                <source src="${asset.audio}" type="audio/mp4">
+                                <source src="${asset.audio}" type="audio/mpeg">
+                                Your browser does not support the audio element.
+                            </audio>
+                        </div>
+                    </div>`;
             }
 
             const modalContent = `
@@ -590,7 +622,6 @@
                     <div class="sticky top-0 bg-white/90 backdrop-blur-sm p-4 border-b border-slate-100 flex justify-between items-center z-10">
                         <div class="flex items-center gap-2">
                              <h3 class="text-lg font-bold text-slate-900">${asset.title}</h3>
-                             <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-slate-900 text-white">${asset.type}</span>
                         </div>
                         <button onclick="closeModal()" class="w-8 h-8 rounded-full bg-slate-50 hover:bg-slate-100 flex items-center justify-center text-slate-500 transition-colors">
                             <i data-lucide="x" class="w-5 h-5"></i>
@@ -600,28 +631,29 @@
                     <div class="p-6 sm:p-8">
                         ${mediaHtml}
                         
-                        ${asset.content ? `<div class="mb-8 p-4 bg-slate-50 rounded-xl border border-slate-100 text-slate-700 leading-relaxed font-medium">${asset.content}</div>` : ''}
-                        
+                        <!-- 설명 -->
+                        ${asset.description ? `
                         <div class="mb-8">
                             <div class="flex items-center gap-2 mb-3">
                                 <div class="w-1 h-5 rounded-full bg-brand-500"></div>
-                                <h4 class="font-bold text-slate-900">Sales Script</h4>
+                                <h4 class="font-bold text-slate-900">설명</h4>
+                            </div>
+                            <div class="p-4 bg-slate-50 rounded-xl border border-slate-100 text-slate-700 leading-relaxed">
+                                ${asset.description}
+                            </div>
+                        </div>
+                        ` : ''}
+                        
+                        <!-- 영업 스크립트 -->
+                        ${asset.script ? `
+                        <div class="mb-8">
+                            <div class="flex items-center gap-2 mb-3">
+                                <div class="w-1 h-5 rounded-full bg-brand-500"></div>
+                                <h4 class="font-bold text-slate-900">영업 스크립트</h4>
                             </div>
                             <div class="bg-indigo-50/50 p-5 rounded-xl border border-indigo-100 relative">
                                 <i data-lucide="quote" class="w-5 h-5 text-indigo-200 absolute top-4 left-4"></i>
-                                <p class="text-slate-800 leading-relaxed pl-6 relative z-10 font-medium">"${asset.script}"</p>
-                            </div>
-                        </div>
-
-                        ${asset.statValue ? `
-                        <div class="grid grid-cols-2 gap-4 mb-8">
-                            <div class="p-4 rounded-xl bg-white border border-slate-200 text-center">
-                                <div class="text-xs text-slate-400 uppercase tracking-wider font-semibold mb-1">핵심 가치</div>
-                                <div class="text-2xl font-bold text-slate-900">${asset.statValue}</div>
-                            </div>
-                             <div class="p-4 rounded-xl bg-white border border-slate-200 text-center">
-                                <div class="text-xs text-slate-400 uppercase tracking-wider font-semibold mb-1">카테고리</div>
-                                <div class="text-2xl font-bold text-slate-900">${asset.statLabel}</div>
+                                <p class="text-slate-800 leading-relaxed pl-6 relative z-10 font-medium whitespace-pre-line">"${asset.script}"</p>
                             </div>
                         </div>
                         ` : ''}
@@ -675,10 +707,23 @@
 
         // Toggle Image Natural Size (Now Full Screen Wide View)
         window.toggleNaturalSize = (btn) => {
-            const img = document.getElementById('modal-main-img');
+            // 버튼의 부모 컨테이너에서 이미지 찾기
+            const container = btn.closest('.group.viewer') || btn.closest('.relative');
+            const img = container ? container.querySelector('img.img-zoom-target') : null;
+            
+            if (!img) {
+                console.error('이미지를 찾을 수 없습니다.');
+                return;
+            }
+            
             const fsView = document.getElementById('fullscreen-view');
             const fsImg = document.getElementById('fullscreen-img');
             
+            if (!fsView || !fsImg) {
+                console.error('풀스크린 뷰어를 찾을 수 없습니다.');
+                return;
+            }
+            
             fsImg.src = img.src;
             fsView.style.display = 'flex';
             document.body.classList.add('no-scroll');
@@ -694,6 +739,37 @@
             }
         };
 
+        // 카드 이미지 비율 계산 함수
+        window.setImageAspectRatio = (img) => {
+            if (img.naturalWidth && img.naturalHeight) {
+                const container = img.closest('[data-asset-id]');
+                if (container) {
+                    container.style.aspectRatio = `${img.naturalWidth} / ${img.naturalHeight}`;
+                }
+            }
+        };
+
+        // 모달 이미지 비율 계산 함수
+        window.setModalImageAspectRatio = (img) => {
+            if (img.naturalWidth && img.naturalHeight) {
+                const container = img.closest('.img-full-container');
+                if (container) {
+                    // 모달에서는 최대 높이 제한을 두고 비율 유지
+                    const maxHeight = window.innerHeight * 0.6;
+                    const aspectRatio = img.naturalWidth / img.naturalHeight;
+                    const calculatedWidth = maxHeight * aspectRatio;
+                    
+                    if (calculatedWidth > container.offsetWidth) {
+                        img.style.width = '100%';
+                        img.style.height = 'auto';
+                    } else {
+                        img.style.width = `${calculatedWidth}px`;
+                        img.style.height = `${maxHeight}px`;
+                    }
+                }
+            }
+        };
+
         // Initialize
         init();
     </script>