:root {
  --bg: #fffcf4; /* 따뜻하고 화사한 크림 옐로우 */
  --surface: #ffffff;
  --soft: #fff5e3; /* 부드러운 크림 오렌지 */
  --text: #4a3525; /* 따뜻한 다크 초콜릿 브라운 */
  --muted: #8c735e; /* 포근한 밀크코코아 브라운 */
  --primary: #ff7b89; /* 사랑스러운 베리 핑크 */
  --primary-dark: #e55f6d;
  --accent: #ffb74d; /* 따뜻한 망고 옐로우 */
  --accent-light: #fff0d4;
  --line: rgba(74, 53, 37, 0.12);
  
  --heading: "Fredoka", "Gowun Dodum", "NanumSquareRound", sans-serif;
  --body: "NanumSquareRound", "Inter", sans-serif;
  
  --side: 88px;
  --container: 1200px;
  --shadow-soft: 0 12px 32px rgba(74, 53, 37, 0.04);
  --shadow-card: 0 16px 36px rgba(255, 123, 137, 0.08);
  --shadow-hover: 0 24px 48px rgba(255, 123, 137, 0.15);
  
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 14px;
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* { 
  box-sizing: border-box; 
}
html { 
  scroll-behavior: smooth; 
}
body { 
  margin: 0; 
  background: var(--bg); 
  color: var(--text); 
  font-family: var(--body); 
  line-height: 1.65; 
  word-break: keep-all; 
  overflow-wrap: break-word; 
  letter-spacing: -0.01em;
}
img { 
  display: block; 
  width: 100%; 
  border-radius: var(--radius-md);
}
a { 
  color: inherit; 
  text-decoration: none; 
}

/* Header */
.header { 
  position: sticky; 
  top: 0; 
  z-index: 10; 
  display: grid; 
  grid-template-columns: 280px 1fr auto auto; 
  align-items: center; 
  gap: 32px; 
  padding: 20px var(--side); 
  background: rgba(255, 252, 244, 0.9); 
  border-bottom: 2px solid var(--line);
  backdrop-filter: blur(20px); 
}
.brand { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
}
.paw { 
  display: grid; 
  place-items: center; 
  width: 50px; 
  height: 50px; 
  border-radius: var(--radius-sm); 
  background: var(--primary); 
  color: white; 
  transition: var(--transition);
  box-shadow: 0 6px 12px rgba(255, 123, 137, 0.2);
  transform: rotate(-8deg);
}
.logo-paw {
  width: 26px;
  height: 26px;
}
.brand:hover .paw {
  transform: rotate(12deg) scale(1.1);
}
.brand strong, .brand b { 
  display: block; 
  font-family: var(--heading);
  font-size: 24px; 
  font-weight: 700;
  line-height: 0.95; 
  letter-spacing: 0.05em; 
}
.brand strong {
  color: var(--text);
}
.brand b { 
  color: var(--primary); 
}
.brand small { 
  display: block; 
  margin-top: 4px; 
  font-size: 9px; 
  font-weight: 800; 
  letter-spacing: 0.14em; 
  text-transform: uppercase; 
  color: var(--muted);
}
.header nav { 
  display: flex; 
  justify-content: center; 
  gap: 38px; 
  font-size: 14px; 
  font-weight: 700; 
}
.header nav a { 
  padding: 8px 12px; 
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.header nav a:hover {
  background: var(--soft);
  color: var(--primary);
}
.header nav .active { 
  color: var(--primary); 
  background: var(--soft);
}
.phone { 
  color: var(--primary-dark); 
  font-weight: 800; 
  font-family: var(--heading);
  white-space: nowrap; 
  font-size: 16px;
  margin-right: 12px;
  transition: var(--transition);
}
.phone:hover {
  transform: scale(1.05);
}
.book, .button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 52px; 
  padding: 0 28px; 
  border-radius: var(--radius-lg); 
  font-weight: 800; 
  font-size: 15px;
  transition: var(--transition);
  cursor: pointer;
}
.book, .primary { 
  background: var(--primary); 
  color: white; 
}
.book:hover, .primary:hover {
  background: var(--primary-dark);
  transform: translateY(-4px);
}
.secondary { 
  border: 2px solid var(--primary); 
  color: var(--primary-dark); 
  background: white; 
}
.secondary:hover {
  background: var(--soft);
  transform: translateY(-4px);
}

/* Hero Section */
.hero { 
  position: relative; 
  min-height: 600px; 
  overflow: hidden; 
  background: #fffcf8; 
  display: flex;
  align-items: center;
}
.hero > img { 
  position: absolute; 
  inset: 0; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 0;
}
.hero::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(90deg, rgba(255, 252, 244, 0.98) 0%, rgba(255, 252, 244, 0.88) 40%, rgba(255, 252, 244, 0) 70%); 
}
.hero::before { 
  content: ""; 
  position: absolute; 
  left: -5%; 
  right: -5%; 
  bottom: -44px; 
  height: 90px; 
  z-index: 1; 
  background: var(--bg); 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
}
.hero-copy { 
  position: relative; 
  z-index: 2; 
  width: min(calc(100% - var(--side) * 2), var(--container)); 
  margin: 0 auto; 
  padding: 80px 0; 
}
h1, h2 { 
  margin: 0; 
  font-family: var(--heading); 
  font-weight: 700; 
  line-height: 1.25; 
  letter-spacing: -0.02em; 
}
h1 { 
  max-width: 610px; 
  font-size: 58px; 
  color: var(--text);
}
h1 span, .kicker { 
  color: var(--primary); 
}
.hero-copy > p { 
  max-width: 560px; 
  margin: 24px 0 32px; 
  color: var(--muted); 
  font-size: 18px; 
}
.actions { 
  display: flex; 
  gap: 18px; 
  flex-wrap: wrap; 
  margin-bottom: 34px; 
}
.trusted { 
  color: var(--muted); 
  font-size: 14px !important; 
  margin: 0 !important; 
  font-weight: 600;
}

/* Services Section */
.kicker { 
  margin: 0 0 10px; 
  font-size: 13px; 
  font-weight: 800; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
}
.services { 
  width: min(calc(100% - var(--side) * 2), var(--container)); 
  margin: 0 auto; 
  padding: 80px 0 40px; 
  text-align: center; 
}
.services h2, .process h2 { 
  font-size: 38px; 
  margin-bottom: 56px; 
  color: var(--text);
}
.service-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 32px; 
  text-align: left; 
}
.service-grid article { 
  position: relative; 
  overflow: hidden; 
  border: 3px solid var(--line); 
  border-radius: var(--radius-md); 
  background: white; 
  box-shadow: var(--shadow-card); 
  transition: var(--transition);
}
.service-grid article:hover {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}
.service-grid img { 
  height: 200px; 
  object-fit: cover; 
  border-radius: 0;
  border-bottom: 3px solid var(--line);
}
.service-grid article:hover img {
  border-bottom-color: var(--primary);
}
.service-grid .icon { 
  position: absolute; 
  top: 18px; 
  left: 18px; 
  display: grid; 
  place-items: center; 
  width: 58px; 
  height: 58px; 
  border-radius: 50%; 
  background: var(--soft); 
  color: var(--primary); 
  border: 2px solid var(--line); 
  box-shadow: 0 4px 10px rgba(74, 53, 37, 0.05);
}
.service-svg {
  width: 24px;
  height: 24px;
}
.service-grid h3 { 
  margin: 20px 24px 6px; 
  font-size: 20px; 
  color: var(--text);
}
.service-grid p { 
  margin: 0 24px 16px; 
  color: var(--muted); 
  font-size: 15px;
}
.service-grid a { 
  display: inline-block; 
  margin: 0 24px 24px; 
  color: var(--primary-dark); 
  font-weight: 800; 
  font-size: 14px;
  transition: var(--transition);
}
.service-grid a:hover {
  transform: translateX(4px);
  color: var(--primary);
}

/* Wellness Section */
.wellness { 
  position: relative; 
  display: grid; 
  grid-template-columns: 0.95fr 1.05fr; 
  align-items: center; 
  min-height: 480px; 
  margin: 60px 0; 
  background: linear-gradient(135deg, #fff0d4, #ffffff); 
  border-top: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  overflow: hidden; 
}
.wellness-copy { 
  padding-left: max(var(--side), calc((100vw - var(--container)) / 2)); 
  padding-right: 70px; 
  padding-top: 40px;
  padding-bottom: 40px;
}
.wellness h2, .clinic h2 { 
  font-size: 40px; 
  color: var(--text);
  margin-bottom: 18px;
}
.wellness p, .clinic p { 
  color: var(--muted); 
  font-size: 17px;
}
.wellness ul { 
  padding: 0; 
  margin: 24px 0 32px; 
  list-style: none; 
}
.wellness li { 
  margin: 12px 0; 
  color: var(--text); 
  font-weight: 600;
  display: flex;
  align-items: center;
}
.wellness li::before { 
  content: "♥"; 
  display: inline-grid; 
  place-items: center; 
  width: 24px; 
  height: 24px; 
  margin-right: 12px; 
  border-radius: 50%; 
  background: var(--primary); 
  color: white; 
  font-size: 11px; 
}
.wellness img { 
  height: 480px; 
  object-fit: cover; 
  border-radius: 0;
  border-left: 3px solid var(--line);
}
.wellness-badge { 
  position: absolute; 
  left: 45%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  display: grid; 
  place-items: center; 
  align-content: center;
  width: 160px; 
  height: 160px; 
  border-radius: 50%; 
  background: var(--accent); 
  color: var(--text); 
  text-align: center; 
  font-weight: 800; 
  font-size: 15px;
  line-height: 1.3;
  border: 3px solid var(--text);
  box-shadow: 0 8px 0 var(--text);
  transition: var(--transition);
  z-index: 2;
}
.wellness-badge:hover {
  transform: translate(-50%, -55%) rotate(-5deg) scale(1.05);
}

/* Clinic Section */
.clinic { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  align-items: center; 
  background: white; 
  border-bottom: 3px solid var(--line);
}
.clinic img { 
  height: 450px; 
  object-fit: cover; 
  border-radius: 0;
}
.clinic-copy { 
  padding: 60px max(var(--side), calc((100vw - var(--container)) / 2)) 60px 80px; 
}
.feature-icons { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 18px; 
  margin: 34px 0; 
}
.feature-icons span {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--soft);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  border: 2px solid var(--line);
}

/* Process Section */
.process { 
  width: min(calc(100% - var(--side) * 2), var(--container)); 
  margin: 0 auto; 
  padding: 80px 0 60px; 
}
.process-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 34px; 
  text-align: center; 
}
.process-grid article {
  background: white;
  padding: 32px 24px;
  border-radius: var(--radius-md);
  border: 3px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.process-grid article:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
}
.process-grid span { 
  display: grid; 
  place-items: center; 
  width: 46px; 
  height: 46px; 
  margin: 0 auto 20px; 
  border-radius: 50%; 
  background: var(--accent); 
  color: var(--text); 
  font-weight: 900; 
  font-family: var(--heading);
  font-size: 18px;
  border: 2px solid var(--text);
}
.process-grid h3 { 
  margin: 0 0 12px; 
  font-size: 18px; 
  color: var(--text);
}
.process-grid p { 
  margin: 0; 
  color: var(--muted); 
  font-size: 14px; 
}

/* Emergency Section */
.emergency { 
  width: min(calc(100% - var(--side) * 2), var(--container)); 
  margin: 30px auto; 
  display: grid; 
  grid-template-columns: 80px 1fr auto; 
  gap: 32px; 
  align-items: center; 
  padding: 34px 48px; 
  border-radius: var(--radius-lg); 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color: white; 
  border: 3px solid var(--text);
  box-shadow: 0 10px 0 var(--text);
}
.cross { 
  display: grid; 
  place-items: center; 
  width: 68px; 
  height: 68px; 
  border-radius: 50%; 
  background: white; 
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.cross-svg {
  width: 28px;
  height: 28px;
}
.emergency h2 { 
  font-size: 30px; 
  color: white;
}
.emergency p { 
  margin: 6px 0 0; 
  font-size: 16px;
  opacity: 0.95;
}
.emergency a { 
  font-family: var(--heading); 
  font-size: 32px; 
  font-weight: 700; 
  white-space: nowrap; 
  background: var(--accent);
  color: var(--text);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  border: 2px solid var(--text);
  box-shadow: 0 4px 0 var(--text);
  transition: var(--transition);
}
.emergency a:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--text);
}
.emergency small { 
  display: block; 
  font-family: var(--body); 
  font-size: 11px; 
  font-weight: 800; 
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Footer */
.footer { 
  display: grid; 
  grid-template-columns: 1.2fr repeat(3, 1fr) 1.35fr; 
  gap: 48px; 
  padding: 64px var(--side) 32px; 
  background: var(--soft); 
  color: var(--text); 
  border-top: 3px solid var(--line);
}
.footer strong { 
  display: block; 
  margin-bottom: 14px; 
  color: var(--primary-dark); 
  font-size: 16px;
}
.footer-brand strong { 
  color: var(--text); 
  font-size: 24px; 
  line-height: 1.05; 
  letter-spacing: 0.05em; 
  font-family: var(--heading);
}
.footer-brand p {
  color: var(--muted);
  font-size: 14px;
}
.footer nav { 
  display: grid; 
  align-content: start; 
  gap: 10px; 
}
.footer nav a {
  font-size: 14px;
  color: var(--muted);
  transition: var(--transition);
}
.footer nav a:hover {
  color: var(--primary);
  transform: translateX(4px);
}
.footer address { 
  font-style: normal; 
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}
.footer form p {
  font-size: 14px;
  color: var(--muted);
}
.footer form div { 
  display: flex; 
  gap: 8px;
}
.footer input { 
  flex: 1; 
  min-height: 48px; 
  border: 2px solid var(--line); 
  border-radius: var(--radius-sm);
  padding: 0 16px; 
  font-family: var(--body);
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.footer input:focus {
  border-color: var(--primary);
}
.footer button { 
  border: 2px solid var(--text); 
  background: var(--primary); 
  color: white; 
  padding: 0 20px; 
  font-weight: 800; 
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 var(--text);
  transition: var(--transition);
  cursor: pointer;
}
.footer button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--text);
}
.footer small { 
  grid-column: 1 / -1; 
  color: var(--muted); 
  border-top: 2px solid var(--line); 
  padding-top: 24px; 
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1000px) {
  :root { 
    --side: 24px; 
  }
  .header { 
    grid-template-columns: 1fr auto; 
    gap: 16px;
    padding: 14px var(--side);
  }
  .brand {
    justify-content: flex-start;
  }
  .brand strong, .brand b {
    font-size: 20px;
  }
  .brand small {
    display: none;
  }
  .paw {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
  }
  .logo-paw {
    width: 20px;
    height: 20px;
  }
  .header nav { 
    display: none; 
  }
  .phone {
    display: none;
  }
  .book {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: var(--radius-md);
  }
  h1 { 
    font-size: 38px; 
  }
  .hero {
    flex-direction: column;
    min-height: auto;
    background: var(--bg);
  }
  .hero > img {
    position: relative;
    inset: auto;
    height: 280px;
    width: calc(100% - var(--side) * 2);
    margin: 24px auto 0;
    border-radius: var(--radius-lg);
    object-fit: cover;
  }
  .hero::after, .hero::before {
    display: none;
  }
  .hero-copy {
    width: 100%;
    padding: 32px var(--side) 48px;
    text-align: center;
  }
  .hero-copy h1 {
    margin: 0 auto;
  }
  .hero-copy p {
    margin: 16px auto 24px;
    font-size: 16px;
  }
  .actions {
    justify-content: center;
  }
  .trusted {
    margin: 16px auto 0 !important;
  }
  .service-grid, .wellness, .clinic, .process-grid, .emergency, .footer { 
    grid-template-columns: 1fr; 
  }
  .wellness img, .clinic img {
    border: none;
    height: 320px;
  }
  .wellness-copy, .clinic-copy { 
    padding: 48px var(--side); 
  }
  .wellness-badge { 
    position: static; 
    transform: none; 
    margin: 20px auto 0; 
    z-index: 1; 
  }
  .feature-icons { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .emergency {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px var(--side);
  }
  .cross {
    margin: 0 auto;
  }
  .emergency a {
    align-self: center;
    margin-top: 10px;
  }
}