<template>
  <div class="theme-coral-home">
    <section class="hero">
      <div class="hero-in">
        <span class="eyebrow">Coral · W·Dot Theme</span>
        <h1>당신만의 스타일을 표현하세요</h1>
        <p>5분 만에 사이트를 만들고, 그누보드처럼 테마/스킨을 자유롭게 교체하세요.</p>
        <div class="actions">
          <a class="btn p" href="/contact">무료로 시작</a>
          <a class="btn o" href="/product">제품 보기</a>
        </div>
      </div>
      <div class="visual"></div>
    </section>
    <section class="features">
      <div class="f"><span class="ic">★</span><h3>빠른 설치</h3><p>5분 마법사로 즉시 시작</p></div>
      <div class="f"><span class="ic">◆</span><h3>그누보드 패리티</h3><p>theme.json + skin.json 표준</p></div>
      <div class="f"><span class="ic">◉</span><h3>플러그앤플레이</h3><p>ZIP 업로드만으로 자동 인식</p></div>
    </section>
  </div>
</template>
<style scoped>
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; max-width:1200px; margin:0 auto; padding:80px 24px; align-items:center; }
.eyebrow { color:#ff6b6b; font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:48px; line-height:1.15; margin:12px 0 20px; color:#c1272d; font-weight:800; }
p { color:#555; font-size:17px; line-height:1.6; }
.actions { display:flex; gap:12px; margin-top:24px; }
.btn { padding:12px 22px; border-radius:8px; font-weight:700; text-decoration:none; }
.btn.p { background:#ff6b6b; color:#fff; }
.btn.o { background:transparent; border:1.5px solid #ff6b6b; color:#ff6b6b; }
.visual { aspect-ratio:1.1; background:linear-gradient(135deg,#ff6b6b,#c1272d); border-radius:16px; min-height:320px; }
.features { max-width:1200px; margin:0 auto 80px; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.f { background:#fff; border:1px solid #eee; border-radius:12px; padding:28px; }
.f .ic { display:inline-flex; width:42px; height:42px; border-radius:10px; background:#ff6b6b; color:#fff; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.f h3 { margin:0 0 6px; font-size:18px; font-weight:800; color:#c1272d; }
.f p { font-size:14px; color:#666; }
@media (max-width:768px) { .hero { grid-template-columns:1fr; } .features { grid-template-columns:1fr; } }
</style>
