@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --color-bg: #F6F3EF;
  --color-ink: #2A211A;
  --color-tan: #A2724C;
  --color-gray: #5B6B72;
  --color-pale: #D8CCC0;
  --font-display: "Jua", sans-serif;
  --font-body: "Pretendard Variable", system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-ink);
}
.site-header__nav a {
  font-size: 0.9rem;
  color: var(--color-ink);
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--color-gray);
  text-decoration: underline;
}

.hero {
  background: var(--color-pale);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.7rem);
}
.hero__cta {
  background: var(--color-ink);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.85em 1.6em;
  font-weight: 700;
  width: fit-content;
}

.section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
}

/* ---- 시그니처: 재발 간격별 원인 추정 세로 타임라인 ---- */
.timeline {
  position: relative;
  max-width: 640px;
  margin: 1.5rem auto;
  padding-left: 2rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  background: var(--color-pale);
}
.timeline .point {
  position: relative;
  padding-bottom: 1.75rem;
}
.timeline .point::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ink);
}
.timeline h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.timeline p { font-size: 0.92rem; line-height: 1.7; }

/* ---- 후기 ---- */
.reviews blockquote {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 1.1rem;
}
.reviews cite {
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---- figure ---- */
figure figcaption {
  font-size: 0.85rem;
  color: var(--color-ink);
  text-align: center;
}

/* ---- CTA ---- */
.cta-block {
  background: var(--color-ink);
  color: #FFFFFF;
}
.cta-block__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.cta-block__button {
  background: #FFFFFF;
  color: var(--color-ink);
  border-radius: 999px;
  font-weight: 700;
}

/* ---- related links ---- */
.related-links__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}
.related-links a {
  background: var(--color-pale);
  border-radius: 999px;
  padding: 0.5em 1em;
  font-size: 0.9rem;
}
.related-links a:hover,
.related-links a:focus-visible {
  background: var(--color-ink);
  color: #FFFFFF;
}

/* ---- footer ---- */
.site-footer {
  background: var(--color-ink);
  color: #FFFFFF;
  font-size: 0.85rem;
}
.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  text-decoration: underline;
}