/* Colors */
:root{
  --sky:#38BDF8;    /* 하늘색 */
  --yellow:#FFD34D; /* 노랑 */
  --brown:#6B4226;  /* 브라운 */
  --ink:#2B2B2B;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#fff; color:var(--brown);
}
a{ color:var(--sky); text-decoration:none }
a:hover{ text-decoration:underline }

.container{ width:min(1100px, 92vw); margin:0 auto }

.site-header{
  border-bottom:2px solid var(--yellow);
  background:#fff;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{ font-weight:800; color:var(--brown); font-size:20px }
.nav a{ color:var(--brown); margin-left:18px; font-weight:600 }
.nav a:hover{ color:var(--sky); text-decoration:none }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center;
  padding:48px 0;
}
.hero-text h1{ color:var(--brown); font-size: clamp(28px, 5vw, 48px); margin:0 0 8px }
.hero-text .hl{ color:var(--sky) }
.tagline{ color:#7b5e57; margin:8px 0 18px }
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700;
  border:2px solid var(--sky); color:#fff; background:var(--sky);
}
.btn:hover{ filter:brightness(.95) }

.hero-images{ display:flex; align-items:flex-end; justify-content:center; gap:20px }
.hero-images .dog{
  max-width: 320px; height:auto; border-radius:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Story */
.story{ padding:24px 0 64px; text-align:center }
.story h2{ margin:0 0 8px; color:var(--brown) }
.story p{ color:#7b5e57; max-width:720px; margin:0 auto }

/* Footer */
.site-footer{
  border-top:2px solid var(--yellow);
  background:#faf7ef; color:#7b5e57;
  padding:16px 0; text-align:center;
}

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; text-align:center }
  .hero-images{ margin-top:6px }
  .nav{ display:none }
}