@extends('layouts.app')

@section('title', '키오스크')

@push('styles')
<style>
    .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 + 스펙 - 3열 (일러스트 + 개요 + 스펙) */
    .ki-info { display: grid; grid-template-columns: 240px 1fr 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-kiosk-visual { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .ki-kiosk-svg { width: 140px; margin-bottom: 16px; }
    .ki-kiosk-label { font-size: 0.9rem; font-weight: 700; color: #1e293b; text-align: center; }
    .ki-kiosk-sublabel { font-size: 0.72rem; color: #94a3b8; text-align: center; margin-top: 2px; }
    .ki-kiosk-badge { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; background: #dbeafe; color: #1d4ed8; }
    .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-price-wrap { grid-template-columns: 1fr; }
        .ki-info { grid-template-columns: 1fr; }
        .ki-kiosk-svg { width: 100px; }
        .ki-arch { grid-template-columns: 1fr; gap: 8px; }
        .ki-arch-arrow { transform: rotate(90deg); padding: 4px 0; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        .ki-info { grid-template-columns: 200px 1fr; }
        .ki-info-card:last-child { grid-column: 1 / -1; }
    }
</style>
@endpush

@section('content')
<div class="ki">
    {{-- 헤더 --}}
    <div class="ki-header">
        <h1>키오스크</h1>
        <p>DNSYS 기둥형 키오스크(KS-SA240) + SAM 웹 브라우저 연동</p>
    </div>

    {{-- 키오스크 모드 선택 --}}
    <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="ki-tag sr">고객용</span>
        </a>
        <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="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-kiosk-visual">
                <svg class="ki-kiosk-svg" viewBox="0 0 200 360" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{-- 모니터 외곽 --}}
                    <rect x="22" y="10" width="156" height="110" rx="8" fill="#334155" />
                    {{-- 화면 --}}
                    <rect x="30" y="18" width="140" height="94" rx="4" fill="#3B82F6" />
                    {{-- 화면 내부 UI 요소들 --}}
                    <rect x="40" y="28" width="50" height="6" rx="3" fill="#93C5FD" />
                    <rect x="40" y="40" width="120" height="30" rx="4" fill="#1D4ED8" opacity="0.4" />
                    <rect x="40" y="76" width="55" height="8" rx="4" fill="#DBEAFE" />
                    <rect x="100" y="76" width="55" height="8" rx="4" fill="#DBEAFE" />
                    <rect x="40" y="90" width="55" height="8" rx="4" fill="#DBEAFE" opacity="0.6" />
                    <rect x="100" y="90" width="55" height="8" rx="4" fill="#DBEAFE" opacity="0.6" />
                    {{-- 24" 텍스트 --}}
                    <text x="100" y="62" text-anchor="middle" fill="white" font-size="18" font-weight="bold" font-family="Arial">24"</text>
                    {{-- 모니터 하단 베젤 --}}
                    <circle cx="100" cy="114" r="3" fill="#64748B" />
                    {{-- VESA 마운트 연결부 --}}
                    <rect x="88" y="120" width="24" height="16" rx="3" fill="#475569" />
                    {{-- 기둥 --}}
                    <rect x="92" y="136" width="16" height="160" rx="2" fill="#94A3B8" />
                    {{-- 기둥 하이라이트 --}}
                    <rect x="97" y="136" width="4" height="160" rx="1" fill="#CBD5E1" opacity="0.5" />
                    {{-- 캐스터 플레이트 --}}
                    <rect x="58" y="296" width="84" height="10" rx="5" fill="#475569" />
                    {{-- 캐스터 바퀴 4개 --}}
                    <circle cx="72" cy="316" r="10" fill="#334155" />
                    <circle cx="72" cy="316" r="5" fill="#64748B" />
                    <circle cx="128" cy="316" r="10" fill="#334155" />
                    <circle cx="128" cy="316" r="5" fill="#64748B" />
                    {{-- 스캐너 걸이 --}}
                    <rect x="172" y="180" width="8" height="40" rx="4" fill="#CBD5E1" />
                    <rect x="168" y="216" width="16" height="6" rx="3" fill="#94A3B8" />
                </svg>
                <div class="ki-kiosk-label">KS-SA240</div>
                <div class="ki-kiosk-sublabel">기둥형 키오스크 24"</div>
                <span class="ki-kiosk-badge">DNSYS</span>
            </div>

            <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