:root {
  --color-1: #101820;
  --color-2: #F2AA4C;
  --color-3: #E5E5E5;
  --color-4: #4A6572;
  --color-5: #FFFFFF;
  --font-display: 'Gasoek One', system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: 'Nanum Gothic', system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

body { background: var(--color-1); color: var(--color-3); font-family: var(--font-body); }
h1, h2 { font-family: var(--font-display); color: var(--color-5); font-weight: 400; line-height: 1.35; }

header.site-header { background: var(--color-1); border-bottom: 1px solid var(--color-4); }
.logo { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-2); text-decoration: none; }
header.site-header nav ul li a { color: var(--color-3); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
header.site-header nav ul li a:hover { color: var(--color-2); }
.nav-toggle { background: var(--color-2); color: var(--color-1); border: none; border-radius: 6px; padding: 0.5rem 1.1rem; cursor: pointer; font-weight: 700; }

.hero { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(242, 170, 76, 0.15), var(--color-1) 70%); padding-block: 4rem; }
.hero h1 { font-size: 2.1rem; margin: 0 0 1rem; animation: glowIn 0.8s ease both; }
.hero p { max-width: 600px; margin: 0 auto 1.75rem; color: var(--color-3); }
.hero-figure { max-width: 300px; margin: 2rem auto 0; }

@keyframes glowIn {
  from { opacity: 0; text-shadow: 0 0 0 rgba(242, 170, 76, 0); }
  to { opacity: 1; text-shadow: 0 0 18px rgba(242, 170, 76, 0.35); }
}

.btn-tel {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: var(--color-2);
  color: var(--color-1);
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(242, 170, 76, 0.35);
  transition: box-shadow 0.2s ease;
}
.btn-tel:hover { box-shadow: 0 0 34px rgba(242, 170, 76, 0.55); }

.content-block { max-width: 900px; margin-inline: auto; padding: 3rem 1.25rem; }
.content-block p { color: var(--color-3); }

.tag-section { background: #0B1218; padding: 3rem 1.25rem; }
.tag-section h2, .tag-section > p { max-width: 900px; margin-inline: auto; }
.tag-cloud {
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-4);
  color: var(--color-2);
  background: rgba(242, 170, 76, 0.08);
}
.tag-lg { font-size: 1.05rem; padding: 0.65rem 1.25rem; }
.tag-md { font-size: 0.95rem; }
.tag-sm { font-size: 0.85rem; color: var(--color-3); border-color: rgba(229, 229, 229, 0.3); background: rgba(255, 255, 255, 0.04); }

.masonry-section { padding: 3rem 1.25rem; max-width: 1100px; margin-inline: auto; }
.masonry { column-count: 2; column-gap: 1.5rem; }
.m-card {
  break-inside: avoid;
  background: #171F28;
  border: 1px solid var(--color-4);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border-top: 3px solid var(--color-2);
}
.m-card-accent { background: #1C2733; }
.m-card h2 { font-size: 1.3rem; margin-top: 0; }
.m-card p { color: var(--color-3); }
.m-card figure { margin: 1.5rem 0 0; max-width: 100%; }

.reviews { background: #0B1218; padding: 3rem 1.25rem; }
.reviews h2 { max-width: 1100px; margin: 0 auto 1.5rem; }
.review-grid {
  max-width: 1100px;
  margin-inline: auto;
  columns: 3;
  column-gap: 1.25rem;
}
blockquote.review {
  break-inside: avoid;
  background: #171F28;
  border-radius: 12px;
  border-top: 3px solid var(--color-2);
}
blockquote.review p { margin: 0; color: var(--color-3); }
blockquote.review cite { display: block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-2); font-style: normal; }

.related-pages { max-width: 1100px; margin-inline: auto; padding: 3rem 1.25rem; }
.related-pages ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.related-pages a { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 10px; background: #171F28; text-decoration: none; color: var(--color-2); font-weight: 700; border: 1px solid var(--color-4); }

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

footer.site-footer { background: var(--color-1); border-top: 1px solid var(--color-4); color: var(--color-3); }
footer.site-footer a { color: var(--color-2); text-decoration: none; }

@media (max-width: 780px) {
  .masonry { column-count: 1; }
  .review-grid { columns: 2; }
}
@media (max-width: 480px) {
  .review-grid { columns: 1; }
}