popilot 0.2.0

package/scaffold/spec-site/src/assets/icons/menu/ic_dashboard.svg

@@ -0,0 +1,21 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#bbtoyt3ika)">
+        <path d="M7.779 22H6c-.86 0-1.556.696-1.556 1.556v5.777c0 .86.697 1.556 1.556 1.556h1.778c.859 0 1.555-.697 1.555-1.556v-5.777c0-.86-.696-1.556-1.555-1.556z" fill="#fff"/>
+        <path d="M7.777 21.778c.49 0 .89.4.89.889v5.777c0 .49-.4.89-.89.89H6a.892.892 0 0 1-.89-.89v-5.777c0-.49.4-.89.89-.89h1.777zm0-1.334H6a2.223 2.223 0 0 0-2.223 2.223v5.777c0 1.227.996 2.223 2.223 2.223h1.777A2.223 2.223 0 0 0 10 28.444v-5.777a2.223 2.223 0 0 0-2.223-2.223z" fill="#3C3C3C"/>
+        <path d="M17.11 12.667h-1.777c-.86 0-1.556.696-1.556 1.555v14.223c0 .859.697 1.555 1.556 1.555h1.778c.859 0 1.555-.696 1.555-1.555V14.222c0-.859-.696-1.555-1.555-1.555z" fill="#fff"/>
+        <path d="M17.11 13.333c.488 0 .888.4.888.89v14.221c0 .49-.4.89-.889.89h-1.777a.892.892 0 0 1-.89-.89V14.222c0-.489.4-.889.89-.889h1.777zm0-1.333h-1.778a2.223 2.223 0 0 0-2.223 2.222v14.222c0 1.227.996 2.223 2.223 2.223h1.777a2.223 2.223 0 0 0 2.223-2.223V14.222A2.223 2.223 0 0 0 17.109 12zM26 18.222c.489 0 .889.4.889.89v9.333c0 .488-.4.888-.889.888h-1.778a.892.892 0 0 1-.889-.888V19.11c0-.489.4-.889.89-.889H26zm0-1.333h-1.778A2.223 2.223 0 0 0 22 19.11v9.334c0 1.226.996 2.222 2.222 2.222H26a2.223 2.223 0 0 0 2.222-2.223v-9.333A2.223 2.223 0 0 0 26 16.89z" fill="#3C3C3C"/>
+        <path d="M24.89 11.778a2.667 2.667 0 1 0 0-5.334 2.667 2.667 0 0 0 0 5.334z" fill="#fff"/>
+        <path d="M24.888 7.111c1.107 0 2 .894 2 2 0 1.107-.893 2-2 2s-2-.893-2-2 .893-2 2-2zm0-1.333a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#3C3C3C"/>
+        <path d="M15.999 8.222a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333z" fill="#D8E5F9"/>
+        <path d="M16.001 3.555c1.107 0 2 .894 2 2 0 1.107-.893 2-2 2-1.106 0-2-.893-2-2 0-1.106.894-2 2-2zm0-1.333a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#3C3C3C"/>
+        <path d="M7.112 15.333a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333z" fill="#fff"/>
+        <path d="M7.11 10.667c1.107 0 2 .893 2 2 0 1.106-.893 2-2 2-1.106 0-2-.894-2-2 0-1.107.894-2 2-2zm0-1.334a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#3C3C3C"/>
+        <path d="m18.746 6.698 3.493 1.311M9.426 10.925l4.253-3.627" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.11 24h3.555v4.444c0 .49-.4.89-.889.89H5.998a.891.891 0 0 1-.889-.89V24zM14.445 19.556h3.556v8.889c0 .488-.4.888-.889.888h-1.778a.891.891 0 0 1-.889-.888v-8.89zM26.888 28.445c0 .488-.4.888-.89.888h-1.777a.892.892 0 0 1-.889-.888v-6.667h3.556v6.667z" fill="#D8E5F9"/>
+    </g>
+    <defs>
+        <clipPath id="bbtoyt3ika">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/assets/icons/menu/ic_dashboard_on.svg

@@ -0,0 +1,21 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#5vf6lili1a)">
+        <path d="M7.779 21.111H6c-.86 0-1.556.697-1.556 1.556v5.777c0 .86.697 1.556 1.556 1.556h1.778c.859 0 1.555-.697 1.555-1.556v-5.777c0-.86-.696-1.556-1.555-1.556z" fill="#fff"/>
+        <path d="M7.777 21.778c.49 0 .89.4.89.889v5.777c0 .49-.4.89-.89.89H6a.892.892 0 0 1-.89-.89v-5.777c0-.49.4-.89.89-.89h1.777zm0-1.334H6a2.223 2.223 0 0 0-2.223 2.223v5.777c0 1.227.996 2.223 2.223 2.223h1.777A2.223 2.223 0 0 0 10 28.444v-5.777a2.223 2.223 0 0 0-2.223-2.223z" fill="#0049B9"/>
+        <path d="M17.11 12.667h-1.777c-.86 0-1.556.696-1.556 1.555v14.223c0 .859.697 1.555 1.556 1.555h1.778c.859 0 1.555-.696 1.555-1.555V14.222c0-.859-.696-1.555-1.555-1.555z" fill="#fff"/>
+        <path d="M17.11 13.333c.488 0 .888.4.888.89v14.221c0 .49-.4.89-.889.89h-1.777a.892.892 0 0 1-.89-.89V14.222c0-.489.4-.889.89-.889h1.777zm0-1.333h-1.778a2.223 2.223 0 0 0-2.223 2.222v14.222c0 1.227.996 2.223 2.223 2.223h1.777a2.223 2.223 0 0 0 2.223-2.223V14.222A2.223 2.223 0 0 0 17.109 12zM26 18.222c.489 0 .889.4.889.89v9.333c0 .488-.4.888-.889.888h-1.778a.892.892 0 0 1-.889-.888V19.11c0-.489.4-.889.89-.889H26zm0-1.333h-1.778A2.223 2.223 0 0 0 22 19.11v9.334c0 1.226.996 2.222 2.222 2.222H26a2.223 2.223 0 0 0 2.222-2.223v-9.333A2.223 2.223 0 0 0 26 16.89z" fill="#0049B9"/>
+        <path d="M24.89 11.778a2.667 2.667 0 1 0 0-5.334 2.667 2.667 0 0 0 0 5.334z" fill="#fff"/>
+        <path d="M24.888 7.111c1.107 0 2 .894 2 2 0 1.107-.893 2-2 2s-2-.893-2-2 .893-2 2-2zm0-1.333a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#0049B9"/>
+        <path d="M15.999 8.222a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333z" fill="#59B9FF"/>
+        <path d="M16.001 3.555c1.107 0 2 .894 2 2 0 1.107-.893 2-2 2-1.106 0-2-.893-2-2 0-1.106.894-2 2-2zm0-1.333a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#0049B9"/>
+        <path d="M7.112 15.333a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333z" fill="#fff"/>
+        <path d="M7.11 10.667c1.107 0 2 .893 2 2 0 1.106-.893 2-2 2-1.106 0-2-.894-2-2 0-1.107.894-2 2-2zm0-1.334a3.335 3.335 0 0 0 0 6.667 3.335 3.335 0 0 0 0-6.667z" fill="#0049B9"/>
+        <path d="m18.746 6.698 3.493 1.311M9.426 10.925l4.253-3.627" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.11 24h3.555v4.444c0 .49-.4.89-.889.89H5.998a.891.891 0 0 1-.889-.89V24zM14.445 19.556h3.556v8.889c0 .488-.4.888-.889.888h-1.778a.891.891 0 0 1-.889-.888v-8.89zM23.332 28.445c0 .488.4.888.889.888h1.778c.489 0 .889-.4.889-.888v-6.667h-3.556v6.667z" fill="#59B9FF"/>
+    </g>
+    <defs>
+        <clipPath id="5vf6lili1a">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/assets/icons/menu/ic_pricing.svg

@@ -0,0 +1,20 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#85p085awba)">
+        <g clip-path="url(#sr56ekclnb)">
+            <path d="M26.51 3.898H8.155a3.489 3.489 0 0 0-3.489 3.489v11.79a3.489 3.489 0 0 0 3.489 3.49H26.51a3.489 3.489 0 0 0 3.488-3.49V7.388a3.489 3.489 0 0 0-3.488-3.489z" fill="#fff" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M23.844 9.676H5.49A3.489 3.489 0 0 0 2 13.165v11.79a3.489 3.489 0 0 0 3.489 3.49h18.355a3.489 3.489 0 0 0 3.49-3.49v-11.79a3.489 3.489 0 0 0-3.49-3.49z" fill="#D8E5F9" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M27.333 14.476H2v3.044h25.333v-3.044z" fill="#3C3C3C"/>
+            <path d="M21.832 24.893a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#fff" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M18.764 21.164a1.997 1.997 0 0 0-3.004 1.729 1.997 1.997 0 0 0 3.066 1.689" fill="#fff"/>
+            <path d="M18.764 21.164a1.997 1.997 0 0 0-3.004 1.729 1.997 1.997 0 0 0 3.066 1.689" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="85p085awba">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+        <clipPath id="sr56ekclnb">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/assets/icons/menu/ic_pricing_on.svg

@@ -0,0 +1,20 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#1c4f11tvpa)">
+        <g clip-path="url(#alsslr2q2b)">
+            <path d="M26.51 3.898H8.155a3.489 3.489 0 0 0-3.489 3.489v11.79a3.489 3.489 0 0 0 3.489 3.49H26.51a3.489 3.489 0 0 0 3.488-3.49V7.388a3.489 3.489 0 0 0-3.488-3.489z" fill="#fff" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M23.844 9.676H5.49A3.489 3.489 0 0 0 2 13.165v11.79a3.489 3.489 0 0 0 3.489 3.49h18.355a3.489 3.489 0 0 0 3.49-3.49v-11.79a3.489 3.489 0 0 0-3.49-3.49z" fill="#59B9FF" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M27.333 14.476H2v3.044h25.333v-3.044z" fill="#0049B9"/>
+            <path d="M21.832 24.893a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#fff" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M18.764 21.164a1.997 1.997 0 0 0-3.004 1.729 1.997 1.997 0 0 0 3.066 1.689" fill="#fff"/>
+            <path d="M18.764 21.164a1.997 1.997 0 0 0-3.004 1.729 1.997 1.997 0 0 0 3.066 1.689" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="1c4f11tvpa">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+        <clipPath id="alsslr2q2b">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/assets/icons/menu/ic_store.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#c6mhelxnoa)" stroke="#3C3C3C" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18.822 19.471a2.154 2.154 0 0 1-1.72-3.244c.168-.285.288-.596.364-.93.262-1.155-.076-2.408-.907-3.355L13.173 8.09c-1.36-1.547-3.61-1.796-5.014-.56l-.417.364c-1.338 1.178-1.445 3.307-.25 4.85.73.937.56 2.293-.377 3.021a2.155 2.155 0 0 1-3.022-.377c-2.591-3.338-2.24-8.05.804-10.725l.418-.369c3.191-2.804 8.164-2.378 11.093.947l3.387 3.853c1.742 1.982 2.44 4.654 1.875 7.156a7.635 7.635 0 0 1-.853 2.16 2.155 2.155 0 0 1-1.995 1.058v.004z" fill="#fff"/>
+        <path d="M21.333 29.538c-2.13-.138-4.254-1.125-5.823-2.907l-3.106-3.533c-2.231-2.538-2.796-6.04-1.44-8.925a2.155 2.155 0 0 1 3.897 1.836c-.617 1.306-.302 3.009.778 4.24l3.111 3.533c1.436 1.631 3.747 1.956 5.151.716l.418-.365c1.307-1.15 1.383-3.315.17-4.929a2.155 2.155 0 1 1 3.444-2.59c2.56 3.4 2.222 8.124-.77 10.755l-.417.364c-1.524 1.338-3.467 1.93-5.413 1.8v.005z" fill="#D8E5F9"/>
+    </g>
+    <defs>
+        <clipPath id="c6mhelxnoa">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/assets/icons/menu/ic_store_on.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#cz5dntpaja)" stroke="#0049B9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18.822 19.471a2.154 2.154 0 0 1-1.72-3.244c.168-.285.288-.596.364-.93.262-1.155-.076-2.408-.907-3.355L13.173 8.09c-1.36-1.547-3.61-1.796-5.014-.56l-.417.364c-1.338 1.178-1.445 3.307-.25 4.85.73.937.56 2.293-.377 3.021a2.155 2.155 0 0 1-3.022-.377c-2.591-3.338-2.24-8.05.804-10.725l.418-.369c3.191-2.804 8.164-2.378 11.093.947l3.387 3.853c1.742 1.982 2.44 4.654 1.875 7.156a7.635 7.635 0 0 1-.853 2.16 2.155 2.155 0 0 1-1.995 1.058v.004z" fill="#fff"/>
+        <path d="M21.333 29.538c-2.13-.138-4.254-1.125-5.823-2.907l-3.106-3.533c-2.231-2.538-2.796-6.04-1.44-8.924a2.155 2.155 0 0 1 3.897 1.835c-.617 1.307-.302 3.009.778 4.24l3.111 3.533c1.436 1.631 3.747 1.956 5.151.716l.418-.364c1.307-1.152 1.383-3.316.17-4.93a2.155 2.155 0 1 1 3.444-2.59c2.56 3.4 2.222 8.124-.77 10.755l-.417.364c-1.524 1.338-3.467 1.93-5.413 1.8v.005z" fill="#59B9FF"/>
+    </g>
+    <defs>
+        <clipPath id="cz5dntpaja">
+            <path fill="#fff" d="M0 0h32v32H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/scaffold/spec-site/src/components/Accordion.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  icon: string
+  title: string
+  badge?: string
+  badgeVariant?: 'red' | 'yellow' | 'green' | 'blue'
+  summary?: string
+  defaultOpen?: boolean
+}>()
+
+const isOpen = ref(props.defaultOpen ?? false)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="accordion" :class="{ open: isOpen }">
+    <button class="accordion-trigger" @click="toggle">
+      <div class="trigger-left">
+        <span class="trigger-icon">{{ icon }}</span>
+        <span>{{ title }}</span>
+        <span v-if="badge" class="trigger-badge" :class="`badge-${badgeVariant ?? 'blue'}`">
+          {{ badge }}
+        </span>
+        <span v-if="summary" class="trigger-summary">{{ summary }}</span>
+      </div>
+      <div class="trigger-right">
+        <span class="chevron">&#9660;</span>
+      </div>
+    </button>
+    <div class="divider" />
+    <div class="accordion-body">
+      <div class="accordion-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.accordion {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+}
+.accordion-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-kr);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: left;
+  transition: background 0.15s;
+}
+.accordion-trigger:hover { background: #fafafa; }
+.trigger-left { display: flex; align-items: center; gap: 10px; }
+.trigger-icon { font-size: 18px; }
+.trigger-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-left: 4px;
+}
+.badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
+.badge-yellow { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }
+.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
+.badge-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
+.trigger-summary {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-secondary);
+  margin-left: 8px;
+}
+.trigger-right { display: flex; align-items: center; gap: 8px; }
+.chevron {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.accordion.open .chevron { transform: rotate(180deg); }
+.accordion-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+}
+.accordion.open .accordion-body { max-height: 4000px; }
+.accordion-content { padding: 0 20px 20px; }
+.divider { height: 1px; background: var(--border-light); margin: 0 20px; }
+</style>

package/scaffold/spec-site/src/components/AppHeader.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { sprints, featurePages, type SprintConfig } from '../data/navigation'
+
+const route = useRoute()
+const router = useRouter()
+
+const currentPageId = computed(() => (route.params.pageId as string) || '')
+const currentSprint = computed(() => (route.params.sprint as string) || sprints[0]?.id || '')
+
+const activeSprintLabel = computed(() => {
+  const s = sprints.find(s => s.id === currentSprint.value)
+  return s?.label ?? currentSprint.value.toUpperCase()
+})
+
+const isPolicyPage = computed(() => route.path.startsWith('/policy'))
+const isRetroPage = computed(() => route.path.startsWith('/retro'))
+
+// Dropdown state
+const sprintOpen = ref(false)
+
+function toggleSprint() {
+  sprintOpen.value = !sprintOpen.value
+}
+
+function selectSprint(s: SprintConfig) {
+  sprintOpen.value = false
+  if (isPolicyPage.value) {
+    router.push(`/policy/${s.id}`)
+  } else if (isRetroPage.value) {
+    router.push(`/retro/${s.id}`)
+  } else {
+    router.push(`/${currentPageId.value}/${s.id}`)
+  }
+}
+
+function goHome() {
+  router.push('/')
+}
+
+// Close dropdown on outside click
+function onDocClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.dropdown')) {
+    sprintOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocClick))
+onUnmounted(() => document.removeEventListener('click', onDocClick))
+</script>
+
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <!-- Logo -->
+      <div class="header-logo" @click="goHome">
+        <!-- TODO: Change logo text to your project name -->
+        <span class="logo-mark">SPEC</span>
+        <span class="logo-sub">SITE</span>
+      </div>
+
+      <!-- Feature page tabs -->
+      <nav class="page-tabs">
+        <router-link
+          v-for="fp in featurePages"
+          :key="fp.id"
+          :to="`/${fp.id}/${currentSprint}`"
+          class="page-tab"
+          :class="{ active: !isPolicyPage && !isRetroPage && currentPageId === fp.id }"
+        >
+          {{ fp.label }}
+        </router-link>
+      </nav>
+    </div>
+
+    <div class="header-right">
+      <!-- Sprint version selector -->
+      <div class="dropdown" :class="{ open: sprintOpen }">
+        <button class="dropdown-trigger" @click.stop="toggleSprint">
+          {{ activeSprintLabel }}
+          <span class="chevron">&#9662;</span>
+        </button>
+        <div v-if="sprintOpen" class="dropdown-menu">
+          <div
+            v-for="s in sprints"
+            :key="s.id"
+            class="dropdown-item"
+            :class="{ active: s.id === currentSprint }"
+            @click="selectSprint(s)"
+          >
+            {{ s.label }}
+            <span class="sprint-theme">{{ s.theme }}</span>
+            <span v-if="s.active" class="dot-active"></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sprint-level links -->
+      <div class="sprint-links">
+        <router-link
+          :to="`/policy/${currentSprint}`"
+          class="sprint-link"
+          :class="{ active: isPolicyPage }"
+        >
+          Policy
+        </router-link>
+        <span class="sprint-link-sep">|</span>
+        <router-link
+          :to="`/retro/${currentSprint}`"
+          class="sprint-link"
+          :class="{ active: isRetroPage }"
+        >
+          Retro
+        </router-link>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  height: var(--header-height);
+  background: #fff;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+  gap: 8px;
+  z-index: 500;
+}
+
+/* ---- Left section ---- */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.header-logo {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: background 0.15s;
+  margin-right: 8px;
+}
+.header-logo:hover { background: var(--bg); }
+
+.logo-mark {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary);
+  letter-spacing: -0.5px;
+}
+.logo-sub {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 2px;
+}
+
+/* ---- Page tabs ---- */
+.page-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.page-tab {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.page-tab:hover { background: var(--bg); color: var(--text-primary); }
+.page-tab.active {
+  background: var(--primary-light);
+  color: var(--primary);
+  font-weight: 600;
+}
+
+/* ---- Right section ---- */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ---- Dropdown ---- */
+.dropdown { position: relative; }
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: none;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-kr);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.dropdown-trigger:hover { background: var(--bg); }
+.dropdown.open .dropdown-trigger {
+  background: var(--bg);
+  border-color: var(--border);
+}
+
+.chevron {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.15s;
+}
+.dropdown.open .chevron { transform: rotate(180deg); }
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 240px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  padding: 4px;
+  z-index: 1000;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.1s;
+}
+.dropdown-item:hover { background: var(--bg); color: var(--text-primary); }
+.dropdown-item.active { color: var(--primary); font-weight: 600; }
+
+.sprint-theme {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+  white-space: nowrap;
+}
+.dropdown-item.active .sprint-theme { color: var(--primary); opacity: 0.6; }
+
+.dot-active {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  flex-shrink: 0;
+}
+
+/* ---- Sprint-level links ---- */
+.sprint-links {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.sprint-link {
+  padding: 6px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.sprint-link:hover { background: var(--bg); color: var(--text-primary); }
+.sprint-link.active {
+  background: var(--primary-light);
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.sprint-link-sep {
+  color: var(--border);
+  font-size: 12px;
+  user-select: none;
+}
+</style>

package/scaffold/spec-site/src/components/Badge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  variant: 'red' | 'yellow' | 'green' | 'blue'
+  label: string
+}>()
+</script>
+
+<template>
+  <span class="badge" :class="`badge-${variant}`">{{ label }}</span>
+</template>
+
+<style scoped>
+.badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+}
+.badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
+.badge-yellow { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }
+.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
+.badge-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
+</style>

package/scaffold/spec-site/src/components/CoachingCard.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  severity: 'red' | 'yellow' | 'green'
+  severityLabel: string
+  title: string
+  action: string
+  effect: string
+  buttons: { label: string; variant: 'primary' | 'outline' }[]
+}>()
+
+const checked = ref(false)
+
+function toggleCheck() {
+  checked.value = !checked.value
+}
+</script>
+
+<template>
+  <div class="coaching-card" :class="[`severity-${severity}`, { done: checked }]">
+    <div class="coaching-card-top">
+      <div class="coaching-severity" :class="severity">
+        ● {{ severityLabel }}
+      </div>
+      <div
+        class="coaching-check"
+        :class="{ checked }"
+        @click.stop="toggleCheck"
+      />
+    </div>
+    <div class="coaching-title">{{ title }}</div>
+    <div class="coaching-action">{{ action }}</div>
+    <div class="coaching-effect">{{ effect }}</div>
+    <div class="coaching-buttons">
+      <button
+        v-for="(btn, i) in buttons"
+        :key="i"
+        class="btn"
+        :class="`btn-${btn.variant}`"
+        @click.stop="btn.variant === 'primary' ? toggleCheck() : undefined"
+      >
+        {{ btn.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.coaching-card {
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  border: 1px solid;
+  position: relative;
+  transition: opacity 0.2s;
+}
+.coaching-card.severity-red { background: var(--red-bg); border-color: var(--red-border); }
+.coaching-card.severity-yellow { background: var(--yellow-bg); border-color: var(--yellow-border); }
+.coaching-card.severity-green { background: var(--green-bg); border-color: var(--green-border); }
+.coaching-card.done { opacity: 0.5; }
+.coaching-card.done .coaching-title { text-decoration: line-through; }
+.coaching-card-top { display: flex; justify-content: space-between; align-items: center; }
+.coaching-severity {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.coaching-severity.red { color: var(--red); }
+.coaching-severity.yellow { color: #92400e; }
+.coaching-severity.green { color: var(--green); }
+.coaching-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
+.coaching-action {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 4px;
+  white-space: pre-wrap;
+}
+.coaching-effect { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+.coaching-check {
+  width: 20px; height: 20px; border-radius: 50%;
+  border: 2px solid var(--border);
+  cursor: pointer; flex-shrink: 0;
+  transition: all 0.2s;
+}
+.coaching-check:hover { border-color: var(--primary); background: var(--primary-light); }
+.coaching-check.checked {
+  border-color: var(--green); background: var(--green);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
+  background-size: 14px; background-position: center; background-repeat: no-repeat;
+}
+.coaching-buttons { display: flex; gap: 8px; justify-content: flex-end; }
+.btn {
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: var(--font-kr);
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+}
+.btn-primary { background: var(--primary); color: #fff; }
+.btn-primary:hover { background: var(--primary-dark); }
+.btn-outline { background: #fff; border: 1px solid var(--border); color: var(--text-primary); }
+.btn-outline:hover { background: #f9fafb; }
+</style>