@font-face {
  font-family: 'Cafe24 Ssurround';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-white: #FFFFFF;
  --c-navy-800: #274C77;
  --c-blue-500: #6096BA;
  --c-blue-200: #A3CEF1;
  --c-grey-100: #E7ECEF;
  --font-display: 'Cafe24 Ssurround', 'Noto Sans KR', system-ui, sans-serif;
  --font-body: 'Noto Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--c-white);
  color: var(--c-navy-800);
}
h1, h2, .logo { font-family: var(--font-display); }
h3 { font-family: var(--font-body); font-weight: 700; }

header { background: var(--c-white); border-bottom: 1px solid var(--c-grey-100); }
header .logo { font-size: 1.15rem; color: var(--c-navy-800); }
header nav a { color: var(--c-blue-500); font-size: 0.9rem; }
header nav a:hover, header nav a:focus-visible { color: var(--c-navy-800); }

.hero { background: var(--c-grey-100); }
.hero .container { max-width: 720px; }
.hero h1 { font-size: clamp(1.75rem, 4vw, 2.3rem); color: var(--c-navy-800); }
.hero .lead { margin-top: 0.9rem; color: #4a5c6b; max-width: 34rem; font-family: var(--font-body); }
.hero .btn-tel {
  margin-top: 1.4rem;
  display: inline-block;
  background: var(--c-navy-800);
  color: #fff;
  padding: 0.85em 1.7em;
  border-radius: 6px;
  font-weight: 700;
  font-family: var(--font-body);
}
.hero .btn-tel:hover { background: #1c3a5e; }

main section > h2 { font-size: 1.4rem; color: var(--c-navy-800); margin-bottom: 1.3rem; }
main p { color: #4a5c6b; }
main p + p { margin-top: 0.8rem; }

/* blueprint-style grid: floor / system cards */
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  border: 2px solid var(--c-blue-200);
  border-radius: 8px;
  padding: 1rem;
  background: repeating-linear-gradient(0deg, transparent, transparent 39px, #eef4f9 40px);
}
.bp-card {
  background: #fff;
  border: 1px solid var(--c-blue-200);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}
.bp-card.private { border-left: 4px solid var(--c-blue-500); }
.bp-card.shared { border-left: 4px solid var(--c-navy-800); grid-column: span 3; }
.bp-card .bp-label { font-family: var(--font-display); font-size: 0.78rem; color: var(--c-blue-500); display: block; margin-bottom: 0.3rem; }
.bp-card.shared .bp-label { color: var(--c-navy-800); }
.bp-card h3 { font-size: 0.98rem; margin-bottom: 0.4rem; }
.bp-card p { font-size: 0.86rem; color: #4a5c6b; }

.diag-list { display: grid; gap: 0.8rem; }
.diag-list li {
  border-left: 2px solid var(--c-blue-500);
  padding-left: 1rem;
  color: #4a5c6b;
  font-size: 0.94rem;
}

.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
blockquote.review {
  background: var(--c-grey-100);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: #4a5c6b;
}
blockquote.review cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.8rem; color: var(--c-navy-800); }

.related-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.related-links a {
  background: var(--c-grey-100);
  color: var(--c-navy-800);
  border-radius: 6px;
  padding: 0.5em 1.1em;
  font-size: 0.88rem;
}
.related-links a:hover { background: var(--c-blue-200); }

.cta { background: var(--c-navy-800); color: #fff; }
.cta h3 { color: #fff; margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.25rem; }
.cta p { color: #c3d3e0; margin-bottom: 1.1rem; }
.cta a[href^="tel:"] { background: var(--c-blue-200); color: var(--c-navy-800); border-radius: 6px; font-weight: 700; }
.cta a[href^="tel:"]:hover { background: #8fbde2; }

footer { background: var(--c-grey-100); color: #4a5c6b; font-size: 0.85rem; }
footer a { color: #4a5c6b; }
footer nav a { margin-right: 0.2rem; }

figcaption { color: #4a5c6b; margin-top: 0.5rem; }

@media (max-width: 780px) {
  .blueprint-grid { grid-template-columns: 1fr; }
  .bp-card.shared { grid-column: span 1; }
  .review-grid { grid-template-columns: 1fr; }
}