@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap");
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-bg: #F0F6FA;
  --color-deep: #12344B;
  --color-blue: #3E86B5;
  --color-pale: #B8D8EA;
  --color-darkest: #08202E;
  --font-display: "NanumSquareNeo", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

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

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

.hero {
  background: var(--color-deep);
  color: #FFFFFF;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}
.hero__lead { color: #FFFFFF; }
.hero__cta {
  background: #FFFFFF;
  color: var(--color-deep);
  border-radius: 999px;
  padding: 0.85em 1.7em;
  font-weight: 700;
  width: fit-content;
}

/* ---- 세로 스크롤 스토리: 1스텝 1섹션, 배경 교차 ---- */
.story .section {
  padding-block: clamp(3rem, 8vw, 5rem);
}
.story .section:nth-child(odd) { background: var(--color-bg); }
.story .section:nth-child(even) { background: var(--color-pale); }
.story .section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  max-width: 640px;
  margin-inline: auto;
}
.story .section p {
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.85;
}

/* ---- 시그니처: 빗물 유입 경로 3단 CSS 도해 ---- */
.path-diagram {
  display: grid;
  gap: 1rem;
  max-width: 640px;
  margin: 1.5rem auto 0;
}
.path-diagram .stage {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
}
.path-diagram .stage-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-deep);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
}
.path-diagram .stage:not(:last-child)::after {
  content: "";
}
.path-diagram h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.path-diagram p {
  font-size: 0.92rem;
  line-height: 1.7;
}
.path-arrow {
  text-align: center;
  color: var(--color-blue);
  font-size: 1.2rem;
  margin-left: 24px;
}

/* ---- 후기 ---- */
.reviews blockquote {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 1.1rem;
  max-width: 640px;
}
.reviews cite {
  color: var(--color-deep);
  font-size: 0.85rem;
  font-weight: 700;
}
.reviews ul {
  max-width: 640px;
  margin-inline: auto;
}

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

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

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

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