:root {
  --color-1: #12232E;
  --color-2: #007CC7;
  --color-3: #EEFBFB;
  --color-4: #4DA8DA;
  --color-5: #203647;
  --font-display: 'Do Hyeon', system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: 'IBM Plex Sans KR', system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--color-3);
  color: var(--color-1);
}

h1, h2, h3, .logo {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-1);
}

header.site-header {
  background: var(--color-1);
}
.logo { color: #fff; }
header.site-header nav a { text-decoration: none; color: #fff; }
.nav-toggle {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}

section.hero {
  background: linear-gradient(180deg, var(--color-1), var(--color-5));
  color: #fff;
}
section.hero h1 { color: #fff; font-size: 2.2rem; margin: 0 0 0.75rem; }
section.hero p { max-width: 42em; }

.tel-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.9rem 1.8rem;
  background: var(--color-2);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
}

section h2 { border-bottom: 3px solid var(--color-4); padding-bottom: 0.5rem; }

/* signature: vertical timeline, time label fixed left */
.timeline-section { background: #fff; border-radius: 12px; padding: 2rem 1.5rem; }
.timeline {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 0 90px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 70px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--color-4);
}
.timeline li {
  position: relative;
  padding: 0 0 2rem 1.5rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-2);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--color-4);
}
.timeline .time {
  position: absolute;
  left: -90px;
  top: 0;
  width: 70px;
  font-weight: 700;
  color: var(--color-2);
  text-align: right;
}
.timeline .ti-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.timeline .ti-body p { margin: 0; }

@media (max-width: 560px) {
  .timeline { padding-left: 0; }
  .timeline::before { left: 6px; }
  .timeline li { padding-left: 2rem; }
  .timeline li::before { left: -0.05rem; }
  .timeline .time {
    position: static;
    display: inline-block;
    width: auto;
    text-align: left;
    margin-bottom: 0.25rem;
  }
}

section.reviews, section.related { background: var(--color-3); }
blockquote.review {
  background: #fff;
  border-left: 4px solid var(--color-2);
}
.related-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.related-list a { color: var(--color-2); font-weight: 700; text-decoration: none; }

section.cta { background: var(--color-5); color: #fff; }
section.cta .cta-heading { color: #fff; }

footer.site-footer { background: var(--color-1); color: #dbe7ee; }
footer.site-footer a { color: #dbe7ee; }

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-4); }
  50% { box-shadow: 0 0 0 6px rgba(77,168,218,0.35); }
}
.timeline li:first-child::before { animation: pulseDot 2s ease-in-out infinite; }

.hero-figure { max-width: 240px; margin: 1.5rem 0 0; }
.hero-figure figcaption { color: inherit; opacity: 0.85; }