<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            width: 720pt;
            height: 405pt;
            font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
            background: #ffffff;
            display: flex;
            flex-direction: column;
        }

        /* Header Info Table */
        .header-table {
            display: flex;
            height: 36pt;
            border: 0.5pt solid #64748b;
            margin: 4pt 8pt;
        }
        .header-row {
            display: flex;
            flex: 1;
        }
        .header-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 0.5pt solid #64748b;
            background: #f1f5f9;
            padding: 0 4pt;
        }
        .header-cell:last-child { border-right: none; }
        .header-cell.label {
            width: 60pt;
            background: #e2e8f0;
        }
        .header-cell.value {
            flex: 1;
        }
        .header-cell p {
            font-size: 6pt;
            color: #1e293b;
        }

        /* Main Content Area */
        .main-content {
            display: flex;
            flex: 1;
            padding: 0 8pt 8pt 8pt;
            gap: 8pt;
        }

        /* Wireframe Area */
        .wireframe-area {
            flex: 1;
            background: #f8fafc;
            border: 0.5pt solid #e2e8f0;
            border-radius: 2pt;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .wireframe-header {
            background: #1e293b;
            padding: 6pt 10pt;
        }
        .wireframe-header p {
            font-size: 8pt;
            font-weight: 600;
            color: #ffffff;
        }

        .wireframe-body {
            flex: 1;
            display: flex;
            padding: 8pt;
            gap: 8pt;
        }

        /* Sidebar */
        .sidebar {
            width: 70pt;
            background: #f1f5f9;
            border-radius: 2pt;
            padding: 6pt;
        }
        .sidebar-item {
            padding: 4pt 6pt;
            margin-bottom: 3pt;
            border-radius: 2pt;
            background: #ffffff;
        }
        .sidebar-item.active {
            background: #0d9488;
        }
        .sidebar-item p {
            font-size: 5pt;
            color: #1e293b;
        }
        .sidebar-item.active p {
            color: #ffffff;
            font-weight: 600;
        }

        /* Main Content */
        .content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8pt;
        }

        .section-title {
            padding: 4pt 0;
        }
        .section-title p {
            font-size: 8pt;
            font-weight: 700;
            color: #1e293b;
        }

        /* Cards Grid */
        .cards-grid {
            display: flex;
            gap: 6pt;
        }
        .card {
            flex: 1;
            background: #f1f5f9;
            border: 0.5pt solid #e2e8f0;
            border-radius: 2pt;
            overflow: hidden;
        }
        .card.selected {
            border-color: #0d9488;
            border-width: 1pt;
        }
        .card-header {
            background: #1e293b;
            padding: 4pt 6pt;
        }
        .card-header.primary {
            background: #0d9488;
        }
        .card-header p {
            font-size: 5pt;
            color: #ffffff;
            font-weight: 600;
        }
        .card-body {
            padding: 6pt;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 30pt;
        }
        .card-body p {
            font-size: 7pt;
            color: #1e293b;
            font-weight: 600;
        }

        /* Table Style */
        .data-table {
            background: #1e293b;
            border-radius: 2pt;
            overflow: hidden;
        }
        .table-row {
            display: flex;
            border-bottom: 0.5pt solid #334155;
        }
        .table-row:last-child {
            border-bottom: none;
        }
        .table-cell {
            flex: 1;
            padding: 4pt 8pt;
            display: flex;
            align-items: center;
        }
        .table-cell.label {
            flex: 0 0 120pt;
        }
        .table-cell p {
            font-size: 6pt;
            color: #94a3b8;
        }
        .table-cell.value p {
            color: #ffffff;
        }
        .table-cell.highlight p {
            font-size: 10pt;
            font-weight: 700;
            color: #ffffff;
        }
        .table-cell.accent p {
            color: #0d9488;
            font-weight: 600;
        }

        /* Warning Box */
        .warning-box {
            background: #dc2626;
            border-radius: 2pt;
            padding: 6pt 8pt;
        }
        .warning-box p {
            font-size: 5pt;
            color: #ffffff;
        }

        /* Description Panel */
        .description-panel {
            width: 150pt;
            background: #1a1a1a;
            border-radius: 2pt;
            padding: 8pt;
            display: flex;
            flex-direction: column;
        }

        .description-header {
            background: #95C11F;
            padding: 4pt 8pt;
            border-radius: 2pt;
            margin-bottom: 10pt;
        }
        .description-header p {
            font-size: 7pt;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
        }

        .description-item {
            margin-bottom: 12pt;
        }
        .description-item-header {
            display: flex;
            align-items: center;
            gap: 6pt;
            margin-bottom: 4pt;
        }
        .description-number {
            width: 14pt;
            height: 14pt;
            background: #95C11F;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .description-number p {
            font-size: 6pt;
            font-weight: 700;
            color: #ffffff;
        }
        .description-title p {
            font-size: 6pt;
            font-weight: 700;
            color: #ffffff;
        }
        .description-content {
            padding-left: 20pt;
        }
        .description-content p {
            font-size: 5pt;
            color: #9ca3af;
            line-height: 1.4;
        }
    </style>
</head>
<body>
    <!-- Header Info Table -->
    <div class="header-table">
        <div class="header-row" style="flex-direction: column;">
            <div style="display: flex; flex: 1; border-bottom: 0.5pt solid #64748b;">
                <div class="header-cell label"><p>Task Name</p></div>
                <div class="header-cell value"><p>{{taskName}}</p></div>
                <div class="header-cell label"><p>Ver.</p></div>
                <div class="header-cell value" style="width: 60pt;"><p>D1.0</p></div>
                <div class="header-cell label"><p>Page</p></div>
                <div class="header-cell value" style="width: 40pt;"><p>{{page}}</p></div>
            </div>
            <div style="display: flex; flex: 1;">
                <div class="header-cell label"><p>Route</p></div>
                <div class="header-cell value"><p>{{route}}</p></div>
                <div class="header-cell label"><p>Screen Name</p></div>
                <div class="header-cell value"><p>{{screenName}}</p></div>
                <div class="header-cell label"><p>Screen ID</p></div>
                <div class="header-cell value" style="width: 80pt;"><p>{{screenId}}</p></div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Wireframe Area -->
        <div class="wireframe-area">
            <div class="wireframe-header">
                <p>{{systemName}}</p>
            </div>
            <div class="wireframe-body">
                <!-- Sidebar -->
                <div class="sidebar">
                    {{#each menuItems}}
                    <div class="sidebar-item {{#if active}}active{{/if}}">
                        <p>{{name}}</p>
                    </div>
                    {{/each}}
                </div>

                <!-- Content -->
                <div class="content-area">
                    {{content}}
                </div>
            </div>
        </div>

        <!-- Description Panel -->
        <div class="description-panel">
            <div class="description-header">
                <p>Description</p>
            </div>
            {{#each descriptions}}
            <div class="description-item">
                <div class="description-item-header">
                    <div class="description-number">
                        <p>{{index}}</p>
                    </div>
                    <div class="description-title">
                        <p>{{title}}</p>
                    </div>
                </div>
                <div class="description-content">
                    <p>{{content}}</p>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</body>
</html>
