diff --git a/resources/views/additional/kiosk/factory.blade.php b/resources/views/additional/kiosk/factory.blade.php
index 2767641e..f8e4b538 100644
--- a/resources/views/additional/kiosk/factory.blade.php
+++ b/resources/views/additional/kiosk/factory.blade.php
@@ -4,179 +4,184 @@
 
 @push('styles')
 <style>
-    .factory-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 32px 20px;
-    }
-    .factory-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 32px;
-    }
-    .factory-header h1 {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: #1e293b;
-    }
-    .factory-header .back-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        color: #64748b;
-        text-decoration: none;
-        font-size: 0.875rem;
-        transition: color 0.15s;
-    }
-    .factory-header .back-link:hover {
-        color: #16a34a;
-    }
-    .factory-sections {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 24px;
-    }
-    .factory-section {
-        background: #fff;
-        border: 1px solid #e2e8f0;
-        border-radius: 12px;
-        padding: 24px;
-    }
-    .factory-section h2 {
-        font-size: 1.1rem;
-        font-weight: 600;
-        color: #1e293b;
-        margin-bottom: 6px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    .factory-section h2 .icon {
-        width: 24px;
-        height: 24px;
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    .factory-section h2 .icon svg {
-        width: 14px;
-        height: 14px;
-    }
-    .factory-section p {
-        color: #94a3b8;
-        font-size: 0.85rem;
-        margin-bottom: 16px;
-    }
-    .factory-placeholder {
-        background: #f8fafc;
-        border: 2px dashed #e2e8f0;
-        border-radius: 8px;
-        padding: 40px 20px;
-        text-align: center;
-        color: #94a3b8;
-        font-size: 0.85rem;
-    }
-    .factory-section.production h2 .icon { background: #dcfce7; color: #16a34a; }
-    .factory-section.work-order h2 .icon { background: #dbeafe; color: #2563eb; }
-    .factory-section.stats h2 .icon { background: #fef3c7; color: #d97706; }
-    .factory-section.notices h2 .icon { background: #fee2e2; color: #dc2626; }
+    .fc { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
+    .fc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
+    .fc-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
+    .fc-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
+    .fc-header .back-link:hover { color: #16a34a; }
+
+    /* 시나리오 흐름 */
+    .fc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
+    .fc-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
+    .fc-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
+    .fc-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
+    .fc-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
+    .fc-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }
+
+    /* SAM 자산 바 */
+    .fc-assets { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
+    .fc-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
+    .fc-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .fc-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #bbf7d0; }
+    .fc-asset-tag.blue { color: #1d4ed8; }
+    .fc-asset-tag.green { color: #15803d; }
+    .fc-asset-tag.orange { color: #d97706; }
+
+    /* 기능 섹션 */
+    .fc-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+    .fc-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
+    .fc-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
+    .fc-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+    .fc-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
+    .fc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+    .fc-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .fc-sec-icon svg { width: 15px; height: 15px; }
+    .fc-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
+    .fc-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
+    .fc-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
+    .fc-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
+    .fc-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
+    .fc-sec.production li::before { background: #16a34a; }
+    .fc-sec.work-order li::before { background: #2563eb; }
+    .fc-sec.stats li::before { background: #d97706; }
+    .fc-sec.notices li::before { background: #dc2626; }
+    .fc-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }
 
     @media (max-width: 768px) {
-        .factory-sections {
-            grid-template-columns: 1fr;
-        }
+        .fc-flow { grid-template-columns: repeat(2, 1fr); }
+        .fc-flow-arrow { display: none; }
+        .fc-sections { grid-template-columns: 1fr; }
     }
 </style>
 @endpush
 
 @section('content')
-<div class="factory-container">
-    <div class="factory-header">
+<div class="fc">
+    <div class="fc-header">
         <h1>공장 키오스크</h1>
         <a href="{{ route('additional.kiosk.index') }}" class="back-link">
-            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-            </svg>
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
             키오스크 메인으로
         </a>
     </div>
 
-    <div class="factory-sections">
-        {{-- 생산 현황 --}}
-        <div class="factory-section production">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                    </svg>
-                </span>
-                생산 현황
-            </h2>
+    {{-- 활용 시나리오 흐름 --}}
+    <div class="fc-flow">
+        <div class="fc-flow-card">
+            <div class="fc-flow-num" style="background:#2563eb;">1</div>
+            <h3>작업 지시 조회</h3>
+            <p>오늘의 작업 목록 공정별/라인별 지시서</p>
+            <span class="fc-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="fc-flow-card">
+            <div class="fc-flow-num" style="background:#16a34a;">2</div>
+            <h3>생산 현황</h3>
+            <p>실시간 진행률 목표 대비 실적 확인</p>
+            <span class="fc-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="fc-flow-card">
+            <div class="fc-flow-num" style="background:#d97706;">3</div>
+            <h3>실적 입력</h3>
+            <p>완료 수량 터치 입력 불량/비고 기록</p>
+            <span class="fc-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="fc-flow-card">
+            <div class="fc-flow-num" style="background:#7c3aed;">4</div>
+            <h3>통계 조회</h3>
+            <p>일별/주별 실적 라인별 생산성 비교</p>
+        </div>
+    </div>
+
+    {{-- SAM 기존 자산 활용 --}}
+    <div class="fc-assets">
+        <div class="fc-assets-title">SAM 기존 자산 활용</div>
+        <div class="fc-assets-tags">
+            <span class="fc-asset-tag blue">Worker Screen (/production/worker-screen)</span>
+            <span class="fc-asset-tag green">생산 통계 테이블</span>
+            <span class="fc-asset-tag orange">작업 지시 데이터</span>
+        </div>
+    </div>
+
+    {{-- 기능 섹션 --}}
+    <div class="fc-section-title">
+        <div class="bar" style="background:#16a34a;"></div>
+        <h2>기능 구성</h2>
+    </div>
+    <div class="fc-sections">
+        <div class="fc-sec production">
+            <div class="fc-sec-head">
+                <div class="fc-sec-icon" style="background:#dcfce7; color:#16a34a;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+                </div>
+                <h3>생산 현황</h3>
+            </div>
             <p>오늘의 생산 진행 상황을 실시간으로 확인합니다</p>
-            <div class="factory-placeholder">
-                생산 현황 영역<br>
-                <small>Worker Screen, 통계 테이블 연동 예정</small>
+            <div class="fc-sec-detail">
+                <ul>
+                    <li>오늘 생산 목표 대비 실적 진행률</li>
+                    <li>라인별/공정별 현황 대시보드</li>
+                    <li>자동 새로고침 (실시간 갱신)</li>
+                    <li>이상 발생 시 경고 표시</li>
+                </ul>
             </div>
+            <div class="fc-placeholder">생산 현황 영역 &middot; Worker Screen, 통계 테이블 연동 예정</div>
         </div>
 
-        {{-- 작업 지시 --}}
-        <div class="factory-section work-order">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-                    </svg>
-                </span>
-                작업 지시
-            </h2>
+        <div class="fc-sec work-order">
+            <div class="fc-sec-head">
+                <div class="fc-sec-icon" style="background:#dbeafe; color:#2563eb;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
+                </div>
+                <h3>작업 지시</h3>
+            </div>
             <p>현재 진행 중인 작업 지시서를 조회합니다</p>
-            <div class="factory-placeholder">
-                작업 지시 영역<br>
-                <small>작업 지시서 목록 표시 예정</small>
+            <div class="fc-sec-detail">
+                <ul>
+                    <li>오늘 배정된 작업 지시 목록</li>
+                    <li>공정 순서 및 우선순위 표시</li>
+                    <li>제품 사양/수량/납기 정보</li>
+                    <li>종이 지시서 없이 터치로 확인</li>
+                </ul>
             </div>
+            <div class="fc-placeholder">작업 지시 영역 &middot; 작업 지시서 목록 표시 예정</div>
         </div>
 
-        {{-- 생산 통계 --}}
-        <div class="factory-section stats">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
-                    </svg>
-                </span>
-                생산 통계
-            </h2>
+        <div class="fc-sec stats">
+            <div class="fc-sec-head">
+                <div class="fc-sec-icon" style="background:#fef3c7; color:#d97706;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
+                </div>
+                <h3>생산 통계</h3>
+            </div>
             <p>일별, 주별 생산 실적과 목표 달성률을 확인합니다</p>
-            <div class="factory-placeholder">
-                생산 통계 영역<br>
-                <small>생산 실적 차트 표시 예정</small>
+            <div class="fc-sec-detail">
+                <ul>
+                    <li>일별/주별/월별 생산 실적 차트</li>
+                    <li>라인별 생산성 비교 그래프</li>
+                    <li>목표 달성률 및 추이</li>
+                    <li>불량률 통계 및 분석</li>
+                </ul>
             </div>
+            <div class="fc-placeholder">생산 통계 영역 &middot; 생산 실적 차트 표시 예정</div>
         </div>
 
-        {{-- 공지사항 --}}
-        <div class="factory-section notices">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                    </svg>
-                </span>
-                공지사항
-            </h2>
-            <p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
-            <div class="factory-placeholder">
-                공지사항 영역<br>
-                <small>공장 공지사항 표시 예정</small>
+        <div class="fc-sec notices">
+            <div class="fc-sec-head">
+                <div class="fc-sec-icon" style="background:#fee2e2; color:#dc2626;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+                </div>
+                <h3>공지사항</h3>
             </div>
+            <p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
+            <div class="fc-sec-detail">
+                <ul>
+                    <li>공장 전체 공지사항 게시</li>
+                    <li>안전 수칙 및 주의사항</li>
+                    <li>설비 점검/정비 일정</li>
+                    <li>긴급 공지 상단 고정 표시</li>
+                </ul>
+            </div>
+            <div class="fc-placeholder">공지사항 영역 &middot; 공장 공지사항 표시 예정</div>
         </div>
     </div>
 </div>
diff --git a/resources/views/additional/kiosk/index.blade.php b/resources/views/additional/kiosk/index.blade.php
index 07abd385..21d4269a 100644
--- a/resources/views/additional/kiosk/index.blade.php
+++ b/resources/views/additional/kiosk/index.blade.php
@@ -4,138 +4,291 @@
 
 @push('styles')
 <style>
-    .kiosk-container {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 40px 20px;
-    }
-    .kiosk-header {
-        text-align: center;
-        margin-bottom: 48px;
-    }
-    .kiosk-header h1 {
-        font-size: 2rem;
-        font-weight: 700;
-        color: #1e293b;
-        margin-bottom: 8px;
-    }
-    .kiosk-header p {
-        color: #64748b;
-        font-size: 1.05rem;
-    }
-    .kiosk-cards {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 24px;
-    }
-    .kiosk-card {
-        display: block;
-        background: #fff;
-        border: 1px solid #e2e8f0;
-        border-radius: 16px;
-        padding: 40px 32px;
-        text-align: center;
-        text-decoration: none;
-        color: inherit;
-        transition: all 0.2s ease;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-    }
-    .kiosk-card:hover {
-        border-color: #3b82f6;
-        box-shadow: 0 8px 24px rgba(59,130,246,0.12);
-        transform: translateY(-2px);
-    }
-    .kiosk-card-icon {
-        width: 64px;
-        height: 64px;
-        margin: 0 auto 20px;
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .kiosk-card-icon svg {
-        width: 32px;
-        height: 32px;
-    }
-    .kiosk-card-icon.showroom {
-        background: #dbeafe;
-        color: #2563eb;
-    }
-    .kiosk-card-icon.factory {
-        background: #dcfce7;
-        color: #16a34a;
-    }
-    .kiosk-card h2 {
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: #1e293b;
-        margin-bottom: 8px;
-    }
-    .kiosk-card p {
-        color: #64748b;
-        font-size: 0.9rem;
-        line-height: 1.5;
-    }
-    .kiosk-card .tag {
-        display: inline-block;
-        margin-top: 16px;
-        padding: 4px 12px;
-        border-radius: 9999px;
-        font-size: 0.75rem;
-        font-weight: 500;
-    }
-    .kiosk-card .tag.showroom {
-        background: #dbeafe;
-        color: #1d4ed8;
-    }
-    .kiosk-card .tag.factory {
-        background: #dcfce7;
-        color: #15803d;
-    }
-    @media (max-width: 640px) {
-        .kiosk-cards {
-            grid-template-columns: 1fr;
-        }
+    .ki { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
+
+    /* 헤더 */
+    .ki-header { text-align: center; margin-bottom: 40px; }
+    .ki-header h1 { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
+    .ki-header p { color: #64748b; font-size: 0.95rem; }
+
+    /* 키오스크 선택 카드 */
+    .ki-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }
+    .ki-select a { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 24px; text-align: center; text-decoration: none; color: inherit; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
+    .ki-select a:hover { border-color: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,0.12); transform: translateY(-2px); }
+    .ki-sel-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
+    .ki-sel-icon svg { width: 26px; height: 26px; }
+    .ki-sel-icon.sr { background: #dbeafe; color: #2563eb; }
+    .ki-sel-icon.fc { background: #dcfce7; color: #16a34a; }
+    .ki-select h2 { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
+    .ki-select p { color: #64748b; font-size: 0.82rem; line-height: 1.5; margin-bottom: 10px; }
+    .ki-tag { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
+    .ki-tag.sr { background: #dbeafe; color: #1d4ed8; }
+    .ki-tag.fc { background: #dcfce7; color: #15803d; }
+
+    /* 섹션 공통 */
+    .ki-section { margin-bottom: 40px; }
+    .ki-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+    .ki-section-title .bar { width: 4px; height: 22px; border-radius: 2px; background: #2563eb; flex-shrink: 0; }
+    .ki-section-title h2 { font-size: 1.15rem; font-weight: 700; color: #1e293b; }
+    .ki-section-title span { font-size: 0.8rem; color: #94a3b8; margin-left: 4px; }
+
+    /* 왜 키오스크 - 2열 */
+    .ki-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+    .ki-why-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
+    .ki-why-card.showroom { border-left: 3px solid #2563eb; }
+    .ki-why-card.factory { border-left: 3px solid #16a34a; }
+    .ki-why-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin-bottom: 12px; }
+    .ki-why-badge.sr { background: #dbeafe; color: #1d4ed8; }
+    .ki-why-badge.fc { background: #dcfce7; color: #15803d; }
+    .ki-why-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
+    .ki-why-item:last-child { border-bottom: none; }
+    .ki-why-item strong { font-size: 0.85rem; color: #1e293b; display: block; }
+    .ki-why-item small { font-size: 0.75rem; color: #94a3b8; }
+    .ki-why-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
+    .ki-why-dot.sr { background: #2563eb; }
+    .ki-why-dot.fc { background: #16a34a; }
+
+    /* DNSYS + 스펙 - 2열 */
+    .ki-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+    .ki-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
+    .ki-info-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
+    .ki-info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f8fafc; font-size: 0.82rem; }
+    .ki-info-row:last-child { border-bottom: none; }
+    .ki-info-row .label { color: #64748b; }
+    .ki-info-row .value { color: #1e293b; font-weight: 500; }
+
+    /* 강점 태그 */
+    .ki-strengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+    .ki-str-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.78rem; color: #334155; }
+    .ki-str-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+
+    /* 연동 구조 */
+    .ki-arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
+    .ki-arch-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 16px; }
+    .ki-arch-box h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; text-align: center; }
+    .ki-arch-box.hw h3 { color: #2563eb; }
+    .ki-arch-box.sw h3 { color: #16a34a; }
+    .ki-arch-box.data h3 { color: #d97706; }
+    .ki-arch-item { background: #f8fafc; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 0.78rem; color: #334155; text-align: center; }
+    .ki-arch-item:last-child { margin-bottom: 0; }
+    .ki-arch-arrow { display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #94a3b8; font-size: 0.85rem; font-weight: 700; }
+    .ki-arch-note { margin-top: 14px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
+    .ki-arch-note strong { font-size: 0.78rem; color: #2563eb; white-space: nowrap; }
+    .ki-arch-note span { font-size: 0.78rem; color: #334155; }
+
+    /* 가격/프로세스 */
+    .ki-price-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+    .ki-price-card { background: #0f172a; border-radius: 12px; padding: 24px; color: #fff; }
+    .ki-price-card h3 { font-size: 0.9rem; font-weight: 600; color: #94a3b8; margin-bottom: 14px; }
+    .ki-price-num { font-size: 2.8rem; font-weight: 700; color: #3b82f6; line-height: 1; }
+    .ki-price-unit { font-size: 1rem; color: #64748b; margin-left: 4px; }
+    .ki-price-items { margin-top: 16px; border-top: 1px solid #1e293b; padding-top: 12px; }
+    .ki-price-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
+    .ki-price-item .dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; margin-top: 6px; flex-shrink: 0; }
+    .ki-price-item strong { font-size: 0.82rem; color: #e2e8f0; display: block; }
+    .ki-price-item small { font-size: 0.72rem; color: #64748b; }
+
+    .ki-process-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
+    .ki-process-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 16px; }
+    .ki-step { display: flex; gap: 12px; padding: 10px 0; }
+    .ki-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
+    .ki-step-body strong { font-size: 0.85rem; color: #1e293b; display: block; }
+    .ki-step-body small { font-size: 0.75rem; color: #94a3b8; }
+    .ki-step-line { width: 2px; height: 12px; background: #e2e8f0; margin-left: 13px; }
+
+    /* 영업 포인트 */
+    .ki-points { display: flex; flex-direction: column; gap: 12px; }
+    .ki-point { background: #0f172a; border-radius: 12px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 16px; }
+    .ki-point-num { font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
+    .ki-point h4 { font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
+    .ki-point p { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }
+
+    @media (max-width: 768px) {
+        .ki-select, .ki-why, .ki-info, .ki-price-wrap { grid-template-columns: 1fr; }
+        .ki-arch { grid-template-columns: 1fr; gap: 8px; }
+        .ki-arch-arrow { transform: rotate(90deg); padding: 4px 0; }
     }
 </style>
 @endpush
 
 @section('content')
-<div class="kiosk-container">
-    <div class="kiosk-header">
+<div class="ki">
+    {{-- 헤더 --}}
+    <div class="ki-header">
         <h1>키오스크</h1>
-        <p>용도에 맞는 키오스크 모드를 선택하세요</p>
+        <p>DNSYS 기둥형 키오스크(KS-SA240) + SAM 웹 브라우저 연동</p>
     </div>
 
-    <div class="kiosk-cards">
-        {{-- 쇼룸 키오스크 --}}
-        <a href="{{ route('additional.kiosk.showroom') }}" class="kiosk-card">
-            <div class="kiosk-card-icon showroom">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                </svg>
+    {{-- 키오스크 모드 선택 --}}
+    <div class="ki-select">
+        <a href="{{ route('additional.kiosk.showroom') }}">
+            <div class="ki-sel-icon sr">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
             </div>
             <h2>쇼룸 키오스크</h2>
-            <p>고객이 제품을 탐색하고 견적을 시뮬레이션할 수 있는 쇼룸 전용 화면</p>
-            <span class="tag showroom">고객용</span>
+            <p>고객이 제품을 탐색하고 견적을 시뮬레이션하는 쇼룸 전용 화면</p>
+            <span class="ki-tag sr">고객용</span>
         </a>
-
-        {{-- 공장 키오스크 --}}
-        <a href="{{ route('additional.kiosk.factory') }}" class="kiosk-card">
-            <div class="kiosk-card-icon factory">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+        <a href="{{ route('additional.kiosk.factory') }}">
+            <div class="ki-sel-icon fc">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
             </div>
             <h2>공장 키오스크</h2>
             <p>작업자가 생산 현황을 확인하고 작업 지시를 조회하는 공장 전용 화면</p>
-            <span class="tag factory">작업자용</span>
+            <span class="ki-tag fc">작업자용</span>
         </a>
     </div>
+
+    {{-- 왜 키오스크인가 --}}
+    <div class="ki-section">
+        <div class="ki-section-title">
+            <div class="bar"></div>
+            <h2>왜 키오스크인가?</h2>
+            <span>고객사에 키오스크를 제안해야 하는 이유</span>
+        </div>
+        <div class="ki-why">
+            <div class="ki-why-card showroom">
+                <span class="ki-why-badge sr">쇼룸 (고객용)</span>
+                <div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>고객이 직접 제품을 탐색</strong><small>영업사원 없이도 제품 정보 확인</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>실시간 견적 시뮬레이션</strong><small>사이즈/옵션별 즉석 가격 확인</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>상담 효율 극대화</strong><small>사전 탐색 후 구체적 상담 진행</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>브랜드 이미지 향상</strong><small>첨단 쇼룸으로 신뢰도 상승</small></div></div>
+            </div>
+            <div class="ki-why-card factory">
+                <span class="ki-why-badge fc">공장 (작업자용)</span>
+                <div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>생산 현황 실시간 확인</strong><small>대시보드로 진행률 한눈에 파악</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>작업 지시서 전자화</strong><small>종이 지시서 제거, 실시간 업데이트</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>실적 입력 간소화</strong><small>터치 입력으로 현장 데이터 수집</small></div></div>
+                <div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>관리 비용 절감</strong><small>별도 PC 없이 공유 터미널 운영</small></div></div>
+            </div>
+        </div>
+    </div>
+
+    {{-- DNSYS 파트너 + 제품 스펙 --}}
+    <div class="ki-section">
+        <div class="ki-section-title">
+            <div class="bar" style="background: #d97706;"></div>
+            <h2>공급 파트너 및 제품 사양</h2>
+            <span>DNSYS (디앤시스) KS-SA240 기둥형 24"</span>
+        </div>
+        <div class="ki-info">
+            <div class="ki-info-card">
+                <h3>DNSYS (디앤시스) 회사 개요</h3>
+                <div class="ki-info-row"><span class="label">회사명</span><span class="value">(주)디앤시스</span></div>
+                <div class="ki-info-row"><span class="label">사업분야</span><span class="value">산업용 PC/모니터/키오스크 제조</span></div>
+                <div class="ki-info-row"><span class="label">소재지</span><span class="value">인천광역시 부평구 새벌로 15</span></div>
+                <div class="ki-info-row"><span class="label">연락처</span><span class="value">032-512-5480</span></div>
+                <div class="ki-info-row"><span class="label">제작방식</span><span class="value">BTO (주문맞춤 제작)</span></div>
+                <div class="ki-strengths">
+                    <span class="ki-str-tag"><span class="dot" style="background:#2563eb;"></span>산업 현장 특화</span>
+                    <span class="ki-str-tag"><span class="dot" style="background:#16a34a;"></span>BTO 맞춤 제작</span>
+                    <span class="ki-str-tag"><span class="dot" style="background:#d97706;"></span>7종+ 라인업</span>
+                    <span class="ki-str-tag"><span class="dot" style="background:#7c3aed;"></span>국내 제조사</span>
+                </div>
+            </div>
+            <div class="ki-info-card">
+                <h3>KS-SA240 주요 사양</h3>
+                <div class="ki-info-row"><span class="label">화면 크기</span><span class="value">24인치 (23.6") 터치스크린</span></div>
+                <div class="ki-info-row"><span class="label">터치 방식</span><span class="value">감압식 / 정전식 / 적외선 선택</span></div>
+                <div class="ki-info-row"><span class="label">외형 치수</span><span class="value">W350 x D350 x H1048 mm</span></div>
+                <div class="ki-info-row"><span class="label">마운트</span><span class="value">VESA 규격 홀 (범용 호환)</span></div>
+                <div class="ki-info-row"><span class="label">CPU</span><span class="value">4~12세대 셀러론 / 코어 i5</span></div>
+                <div class="ki-info-row"><span class="label">재질/마감</span><span class="value">스틸 함체, 분체 도장</span></div>
+                <div class="ki-info-row"><span class="label">이동성</span><span class="value">레벨링 캐스터 (이동+고정)</span></div>
+                <div class="ki-info-row"><span class="label">부가장비</span><span class="value">핸디 스캐너 걸이 (탈부착)</span></div>
+            </div>
+        </div>
+    </div>
+
+    {{-- SAM 연동 구조 --}}
+    <div class="ki-section">
+        <div class="ki-section-title">
+            <div class="bar" style="background: #16a34a;"></div>
+            <h2>SAM 연동 구조</h2>
+            <span>키오스크 HW + SAM 웹 브라우저 기반 연동</span>
+        </div>
+        <div class="ki-arch">
+            <div class="ki-arch-box hw">
+                <h3>키오스크 HW</h3>
+                <div class="ki-arch-item">DNSYS KS-SA240</div>
+                <div class="ki-arch-item">24" 터치스크린</div>
+                <div class="ki-arch-item">Windows PC 내장</div>
+                <div class="ki-arch-item">웹 브라우저 (전체화면)</div>
+            </div>
+            <div class="ki-arch-arrow">HTTPS &rarr;</div>
+            <div class="ki-arch-box sw">
+                <h3>SAM 서버</h3>
+                <div class="ki-arch-item">키오스크 전용 URL</div>
+                <div class="ki-arch-item">제품 카탈로그 API</div>
+                <div class="ki-arch-item">견적 계산 엔진</div>
+                <div class="ki-arch-item">생산 현황 대시보드</div>
+            </div>
+            <div class="ki-arch-arrow">DB &rarr;</div>
+            <div class="ki-arch-box data">
+                <h3>기존 SAM 데이터</h3>
+                <div class="ki-arch-item">제품 마스터</div>
+                <div class="ki-arch-item">가격 정책</div>
+                <div class="ki-arch-item">BOM 데이터</div>
+                <div class="ki-arch-item">생산 실적</div>
+            </div>
+        </div>
+        <div class="ki-arch-note">
+            <strong>Point</strong>
+            <span>별도 앱 설치 불필요 &middot; 웹 브라우저 전체화면 모드 &middot; SAM 기존 데이터 100% 활용 &middot; 추가 개발 최소화</span>
+        </div>
+    </div>
+
+    {{-- 가격 및 도입 프로세스 --}}
+    <div class="ki-section">
+        <div class="ki-section-title">
+            <div class="bar" style="background: #7c3aed;"></div>
+            <h2>가격 및 도입 조건</h2>
+            <span>키오스크 HW 공급 + SAM SW 연동</span>
+        </div>
+        <div class="ki-price-wrap">
+            <div class="ki-price-card">
+                <h3>공급 가격 (예상)</h3>
+                <div><span class="ki-price-num">200</span><span class="ki-price-unit">만원대 / 대</span></div>
+                <div class="ki-price-items">
+                    <div class="ki-price-item"><div class="dot"></div><div><strong>키오스크 함체 (KS-SA240)</strong><small>DNSYS 기둥형 24"</small></div></div>
+                    <div class="ki-price-item"><div class="dot"></div><div><strong>패널 PC + 터치모니터</strong><small>CPU/RAM/SSD 내장</small></div></div>
+                    <div class="ki-price-item"><div class="dot"></div><div><strong>SAM 키오스크 SW 연동</strong><small>설정 및 초기 세팅 포함</small></div></div>
+                </div>
+            </div>
+            <div class="ki-process-card">
+                <h3>도입 프로세스</h3>
+                <div class="ki-step"><div class="ki-step-num" style="background:#2563eb;">1</div><div class="ki-step-body"><strong>고객 상담 & 현장 확인</strong><small>설치 위치, 용도(쇼룸/공장) 확인</small></div></div>
+                <div class="ki-step-line"></div>
+                <div class="ki-step"><div class="ki-step-num" style="background:#d97706;">2</div><div class="ki-step-body"><strong>DNSYS 사양 확정</strong><small>터치방식, CPU, 옵션 결정</small></div></div>
+                <div class="ki-step-line"></div>
+                <div class="ki-step"><div class="ki-step-num" style="background:#16a34a;">3</div><div class="ki-step-body"><strong>SAM 키오스크 설정</strong><small>URL 설정, 표시 항목 커스터마이징</small></div></div>
+                <div class="ki-step-line"></div>
+                <div class="ki-step"><div class="ki-step-num" style="background:#7c3aed;">4</div><div class="ki-step-body"><strong>납품 & 설치</strong><small>현장 설치, 네트워크 연결, 동작 확인</small></div></div>
+            </div>
+        </div>
+    </div>
+
+    {{-- 영업 포인트 --}}
+    <div class="ki-section">
+        <div class="ki-section-title">
+            <div class="bar" style="background: #dc2626;"></div>
+            <h2>영업 포인트</h2>
+            <span>고객에게 제안할 때 강조할 핵심 가치</span>
+        </div>
+        <div class="ki-points">
+            <div class="ki-point">
+                <div class="ki-point-num" style="color: #3b82f6;">01</div>
+                <div><h4>추가 비용 없이 기존 시스템 활용</h4><p>SAM에 이미 구축된 제품 카탈로그, 견적 엔진, 생산 대시보드를 그대로 키오스크에 표시합니다. 별도 소프트웨어 개발이 필요없습니다.</p></div>
+            </div>
+            <div class="ki-point">
+                <div class="ki-point-num" style="color: #16a34a;">02</div>
+                <div><h4>웹 브라우저 기반 = 유지보수 간편</h4><p>전용 앱이 아닌 웹 브라우저로 동작하므로, SAM이 업데이트되면 키오스크 화면도 자동으로 반영됩니다. 별도 배포 작업이 없습니다.</p></div>
+            </div>
+            <div class="ki-point">
+                <div class="ki-point-num" style="color: #d97706;">03</div>
+                <div><h4>산업용 키오스크 = 안정적 내구성</h4><p>DNSYS는 반도체/공장 환경에 납품하는 전문 제조사입니다. 분진, 충격에 강한 산업용 설계로 쇼룸과 공장 모두 안심 운영.</p></div>
+            </div>
+        </div>
+    </div>
 </div>
 @endsection
diff --git a/resources/views/additional/kiosk/showroom.blade.php b/resources/views/additional/kiosk/showroom.blade.php
index a4ec1e4d..227b9f96 100644
--- a/resources/views/additional/kiosk/showroom.blade.php
+++ b/resources/views/additional/kiosk/showroom.blade.php
@@ -4,177 +4,184 @@
 
 @push('styles')
 <style>
-    .showroom-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 32px 20px;
-    }
-    .showroom-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 32px;
-    }
-    .showroom-header h1 {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: #1e293b;
-    }
-    .showroom-header .back-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        color: #64748b;
-        text-decoration: none;
-        font-size: 0.875rem;
-        transition: color 0.15s;
-    }
-    .showroom-header .back-link:hover {
-        color: #2563eb;
-    }
-    .showroom-sections {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 24px;
-    }
-    .showroom-section {
-        background: #fff;
-        border: 1px solid #e2e8f0;
-        border-radius: 12px;
-        padding: 24px;
-    }
-    .showroom-section h2 {
-        font-size: 1.1rem;
-        font-weight: 600;
-        color: #1e293b;
-        margin-bottom: 6px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    .showroom-section h2 .icon {
-        width: 24px;
-        height: 24px;
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    .showroom-section h2 .icon svg {
-        width: 14px;
-        height: 14px;
-    }
-    .showroom-section p {
-        color: #94a3b8;
-        font-size: 0.85rem;
-        margin-bottom: 16px;
-    }
-    .showroom-placeholder {
-        background: #f8fafc;
-        border: 2px dashed #e2e8f0;
-        border-radius: 8px;
-        padding: 40px 20px;
-        text-align: center;
-        color: #94a3b8;
-        font-size: 0.85rem;
-    }
-    .showroom-section.catalog h2 .icon { background: #dbeafe; color: #2563eb; }
-    .showroom-section.quote h2 .icon { background: #fef3c7; color: #d97706; }
-    .showroom-section.gallery h2 .icon { background: #ede9fe; color: #7c3aed; }
-    .showroom-section.info h2 .icon { background: #dcfce7; color: #16a34a; }
+    .sr { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
+    .sr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
+    .sr-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
+    .sr-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
+    .sr-header .back-link:hover { color: #2563eb; }
+
+    /* 시나리오 흐름 */
+    .sr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
+    .sr-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
+    .sr-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
+    .sr-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
+    .sr-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
+    .sr-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }
+
+    /* SAM 자산 바 */
+    .sr-assets { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
+    .sr-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
+    .sr-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .sr-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #dbeafe; }
+    .sr-asset-tag.blue { color: #1d4ed8; }
+    .sr-asset-tag.purple { color: #7c3aed; }
+    .sr-asset-tag.orange { color: #d97706; }
+
+    /* 기능 섹션 */
+    .sr-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+    .sr-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
+    .sr-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
+    .sr-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+    .sr-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
+    .sr-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+    .sr-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .sr-sec-icon svg { width: 15px; height: 15px; }
+    .sr-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
+    .sr-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
+    .sr-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
+    .sr-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
+    .sr-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
+    .sr-sec.catalog li::before { background: #2563eb; }
+    .sr-sec.quote li::before { background: #d97706; }
+    .sr-sec.gallery li::before { background: #7c3aed; }
+    .sr-sec.info li::before { background: #16a34a; }
+    .sr-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }
 
     @media (max-width: 768px) {
-        .showroom-sections {
-            grid-template-columns: 1fr;
-        }
+        .sr-flow { grid-template-columns: repeat(2, 1fr); }
+        .sr-flow-arrow { display: none; }
+        .sr-sections { grid-template-columns: 1fr; }
     }
 </style>
 @endpush
 
 @section('content')
-<div class="showroom-container">
-    <div class="showroom-header">
+<div class="sr">
+    <div class="sr-header">
         <h1>쇼룸 키오스크</h1>
         <a href="{{ route('additional.kiosk.index') }}" class="back-link">
-            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-            </svg>
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
             키오스크 메인으로
         </a>
     </div>
 
-    <div class="showroom-sections">
-        {{-- 제품 카탈로그 --}}
-        <div class="showroom-section catalog">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-                    </svg>
-                </span>
-                제품 카탈로그
-            </h2>
+    {{-- 활용 시나리오 흐름 --}}
+    <div class="sr-flow">
+        <div class="sr-flow-card">
+            <div class="sr-flow-num" style="background:#2563eb;">1</div>
+            <h3>제품 탐색</h3>
+            <p>블라인드/스크린 등 카테고리별 제품 탐색</p>
+            <span class="sr-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="sr-flow-card">
+            <div class="sr-flow-num" style="background:#7c3aed;">2</div>
+            <h3>옵션 선택</h3>
+            <p>사이즈, 색상, 소재 원하는 옵션 선택</p>
+            <span class="sr-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="sr-flow-card">
+            <div class="sr-flow-num" style="background:#d97706;">3</div>
+            <h3>견적 확인</h3>
+            <p>실시간 가격 계산 면적/중량 기반 견적</p>
+            <span class="sr-flow-arrow">&rsaquo;</span>
+        </div>
+        <div class="sr-flow-card">
+            <div class="sr-flow-num" style="background:#16a34a;">4</div>
+            <h3>저장/상담</h3>
+            <p>QR로 견적 저장 또는 영업사원 호출</p>
+        </div>
+    </div>
+
+    {{-- SAM 기존 자산 활용 --}}
+    <div class="sr-assets">
+        <div class="sr-assets-title">SAM 기존 자산 활용</div>
+        <div class="sr-assets-tags">
+            <span class="sr-asset-tag blue">items / products 테이블</span>
+            <span class="sr-asset-tag purple">FormulaEvaluatorService (BOM 10단계)</span>
+            <span class="sr-asset-tag orange">prices 테이블 (면적/중량/수량 기반)</span>
+        </div>
+    </div>
+
+    {{-- 기능 섹션 --}}
+    <div class="sr-section-title">
+        <div class="bar" style="background:#2563eb;"></div>
+        <h2>기능 구성</h2>
+    </div>
+    <div class="sr-sections">
+        <div class="sr-sec catalog">
+            <div class="sr-sec-head">
+                <div class="sr-sec-icon" style="background:#dbeafe; color:#2563eb;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+                </div>
+                <h3>제품 카탈로그</h3>
+            </div>
             <p>블라인드, 스크린 등 제품 목록을 탐색합니다</p>
-            <div class="showroom-placeholder">
-                제품 카탈로그 영역<br>
-                <small>items, products 테이블 연동 예정</small>
+            <div class="sr-sec-detail">
+                <ul>
+                    <li>카테고리별 제품 목록 (블라인드, 롤스크린, 셔터 등)</li>
+                    <li>제품 이미지 및 상세 사양 표시</li>
+                    <li>색상/소재 옵션 미리보기</li>
+                    <li>터치 기반 직관적 탐색 UI</li>
+                </ul>
             </div>
+            <div class="sr-placeholder">제품 카탈로그 영역 &middot; items, products 테이블 연동 예정</div>
         </div>
 
-        {{-- 견적 시뮬레이션 --}}
-        <div class="showroom-section quote">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                    </svg>
-                </span>
-                견적 시뮬레이션
-            </h2>
+        <div class="sr-sec quote">
+            <div class="sr-sec-head">
+                <div class="sr-sec-icon" style="background:#fef3c7; color:#d97706;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
+                </div>
+                <h3>견적 시뮬레이션</h3>
+            </div>
             <p>사이즈와 옵션을 선택하여 실시간 견적을 확인합니다</p>
-            <div class="showroom-placeholder">
-                견적 시뮬레이션 영역<br>
-                <small>BOM 10단계, FormulaEvaluatorService 연동 예정</small>
+            <div class="sr-sec-detail">
+                <ul>
+                    <li>가로/세로 사이즈 입력 (면적 기반 자동 계산)</li>
+                    <li>옵션별 가격 변동 실시간 반영</li>
+                    <li>BOM 10단계 견적 엔진 (FormulaEvaluatorService)</li>
+                    <li>견적서 QR 코드 생성 (모바일 저장용)</li>
+                </ul>
             </div>
+            <div class="sr-placeholder">견적 시뮬레이션 영역 &middot; BOM 10단계 연동 예정</div>
         </div>
 
-        {{-- 시공 갤러리 --}}
-        <div class="showroom-section gallery">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                    </svg>
-                </span>
-                시공 갤러리
-            </h2>
+        <div class="sr-sec gallery">
+            <div class="sr-sec-head">
+                <div class="sr-sec-icon" style="background:#ede9fe; color:#7c3aed;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                </div>
+                <h3>시공 갤러리</h3>
+            </div>
             <p>실제 시공 사례 이미지를 통해 완성 이미지를 확인합니다</p>
-            <div class="showroom-placeholder">
-                시공 갤러리 영역<br>
-                <small>시공 사례 이미지 표시 예정</small>
+            <div class="sr-sec-detail">
+                <ul>
+                    <li>제품 유형별 시공 사례 사진</li>
+                    <li>공간 유형별 필터 (주거, 상업, 사무실)</li>
+                    <li>Before/After 비교 뷰</li>
+                    <li>고객 후기 및 만족도 표시</li>
+                </ul>
             </div>
+            <div class="sr-placeholder">시공 갤러리 영역 &middot; 시공 사례 이미지 표시 예정</div>
         </div>
 
-        {{-- 회사 소개 --}}
-        <div class="showroom-section info">
-            <h2>
-                <span class="icon">
-                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </span>
-                회사 소개
-            </h2>
-            <p>회사 정보 및 연락처를 안내합니다</p>
-            <div class="showroom-placeholder">
-                회사 소개 영역<br>
-                <small>회사 정보 표시 예정</small>
+        <div class="sr-sec info">
+            <div class="sr-sec-head">
+                <div class="sr-sec-icon" style="background:#dcfce7; color:#16a34a;">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                </div>
+                <h3>회사 소개</h3>
             </div>
+            <p>회사 정보 및 연락처를 안내합니다</p>
+            <div class="sr-sec-detail">
+                <ul>
+                    <li>회사 소개 및 브랜드 스토리</li>
+                    <li>주요 제품 라인업 소개</li>
+                    <li>쇼룸 위치 및 운영시간 안내</li>
+                    <li>영업사원 호출 / 상담 예약 버튼</li>
+                </ul>
+            </div>
+            <div class="sr-placeholder">회사 소개 영역 &middot; 회사 정보 표시 예정</div>
         </div>
     </div>
 </div>