<template>
  <header class="theme-aqua-hdr" :data-theme="'aqua'">
    <div class="hdr-inner">
      <a class="brand" href="/">
        <span class="mark">{{ 'A' }}</span>
        <b>Aqua Site</b>
      </a>
      <nav>
        <a href="/">홈</a><a href="/about">소개</a><a href="/product">제품</a>
        <a href="/pricing">요금제</a><a href="/contact">문의</a>
      </nav>
      <a class="cta" href="/contact">시작하기</a>
    </div>
  </header>
</template>
<style scoped>
.theme-aqua-hdr { background:#fff; border-bottom:1px solid #eee; }
.hdr-inner { max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#0e5392; font-weight:800; }
.brand .mark { width:32px; height:32px; border-radius:8px; background:#0f5fa8; color:#fff; display:grid; place-items:center; font-weight:900; }
nav { flex:1; display:flex; gap:18px; }
nav a { text-decoration:none; color:#333; font-size:14px; font-weight:600; }
nav a:hover { color:#0f5fa8; }
.cta { background:#0f5fa8; color:#fff; padding:9px 16px; border-radius:8px; text-decoration:none; font-weight:700; }
.cta:hover { background:#0e5392; }
</style>
