:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-muted: #ebe7de;
  --text: #1d211f;
  --text-soft: #626963;
  --line: #d8d3c8;
  --brand: #173f35;
  --brand-strong: #0f2d26;
  --accent: #b98337;
  --danger: #a63f35;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(29, 33, 31, 0.09);
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  line-height: 1.6;
}

a {
  color: inherit;
}

.container {
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--surface);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(216, 211, 200, 0.8);
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-size: 20px;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--text-soft);
  font-size: 12px;
}

.primary-nav {
  display: flex;
  gap: 22px;
  font-weight: 700;
}

.primary-nav a {
  text-decoration: none;
}

.hero {
  padding: 84px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 48px;
  align-items: center;
}

.hero h1,
.page-heading h1 {
  margin: 8px 0 20px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.hero-copy {
  max-width: 680px;
  font-size: 19px;
  color: var(--text-soft);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero-card,
.panel,
.metric-card,
.service-card,
.status-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 32px;
}

.badge {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 13px;
  font-weight: 800;
}

.feature-list {
  margin: 28px 0 0;
}

.feature-list div {
  display: grid;
  grid-template-columns: 70px 1fr;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.feature-list dt {
  color: var(--text-soft);
}

.feature-list dd {
  margin: 0;
  font-weight: 700;
}

.button-row,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
}

.button-primary {
  background: var(--brand);
  color: white;
}

.button-secondary {
  border: 1px solid var(--line);
  background: var(--surface);
}

.section {
  padding: 72px 0;
}

.section-muted {
  background: var(--surface-muted);
}

.section-heading {
  margin-bottom: 28px;
}

.section-heading h2,
.panel h2 {
  margin: 6px 0;
}

.card-grid,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.service-card,
.metric-card {
  padding: 24px;
}

.service-card h3 {
  margin-top: 0;
}

.split-panel,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.status-panel {
  padding: 28px;
  background: var(--brand);
  color: white;
}

.status-panel span,
.metric-card span {
  display: block;
  color: var(--text-soft);
  font-size: 14px;
}

.status-panel span {
  color: rgba(255, 255, 255, 0.7);
}

.status-panel strong {
  display: block;
  margin: 8px 0;
  font-size: 26px;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 32px;
}

.page-heading h1 {
  font-size: clamp(38px, 5vw, 60px);
}

.metric-card strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 38px;
}

.metric-card a {
  color: var(--brand);
  font-weight: 800;
}

.dashboard-grid {
  margin-top: 24px;
}

.panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.empty-state {
  padding: 42px 10px;
  text-align: center;
  color: var(--text-soft);
}

.empty-state strong {
  display: block;
  color: var(--text);
}

.site-footer {
  padding: 42px 0;
  background: var(--brand-strong);
  color: white;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.footer-grid p {
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .header-inner,
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 16px;
  }

  .primary-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hero-grid,
  .split-panel,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 54px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .card-grid,
  .metric-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .button-row .button,
  .page-actions .button {
    width: 100%;
  }
}

/* SITE5_BLOG_DESIGN_BEGIN */
.blog-hero {
  padding: 5rem 0 4rem;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(12, 14, 16, .98),
      rgba(55, 57, 59, .92)
    );
}

.blog-hero-compact {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.blog-hero h1 {
  margin: .5rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.blog-kicker,
.blog-category-label {
  color: #a8733f;
  font-weight: 700;
  letter-spacing: .08em;
}

.blog-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.blog-category-grid,
.blog-post-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.blog-category-card,
.blog-post-card {
  overflow: hidden;
  border: 1px solid #d8d8d8;
  border-radius: .75rem;
  background: #fff;
}

.blog-category-card,
.blog-card-body {
  padding: 1.25rem;
}

.blog-category-card a,
.blog-post-card a {
  color: inherit;
  text-decoration: none;
}

.blog-post-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-article {
  max-width: 880px;
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.blog-breadcrumb {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
}

.blog-article-header h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.blog-excerpt {
  color: #555;
  font-size: 1.15rem;
}

.blog-featured-image img {
  width: 100%;
  height: auto;
  border-radius: .75rem;
}

.blog-body {
  margin: 2rem 0;
  font-size: 1.08rem;
  line-height: 1.85;
}

.blog-article-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}

@media (max-width: 800px) {
  .blog-category-grid,
  .blog-post-grid {
    grid-template-columns: 1fr;
  }

  .blog-article-footer {
    flex-direction: column;
  }
}
/* SITE5_BLOG_DESIGN_END */


/* BLOG C10 IMAGES SEO */
.blog-card-placeholder {
  align-items: center;
  background: linear-gradient(135deg, #0a362d, #343b39);
  color: #f5ead8;
  display: flex;
  justify-content: center;
  min-height: 190px;
  padding: 1.5rem;
  text-align: center;
}
.blog-card-placeholder span {
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  font-weight: 700;
  padding: .55rem 1rem;
}
.blog-inline-gallery {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.blog-inline-image { margin: 0; }
.blog-inline-image img {
  border-radius: 14px;
  display: block;
  height: auto;
  max-height: 760px;
  object-fit: contain;
  width: 100%;
}
.blog-inline-image figcaption {
  color: #5c625f;
  font-size: .95rem;
  line-height: 1.6;
  padding-top: .65rem;
  text-align: center;
}
@media (min-width: 900px) {
  .blog-inline-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-inline-image:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
  }
}


/* SITE5_BLOG_MODERN_DETAIL_BEGIN */
.blog-reading-progress{position:fixed;z-index:1000;top:0;left:0;width:100%;height:4px;background:transparent}.blog-reading-progress span{display:block;width:0;height:100%;background:#b97936;transition:width .1s linear}.blog-article{max-width:1120px}.blog-article-header{max-width:880px;margin:0 auto 2.5rem;text-align:center}.blog-article-header h1{line-height:1.22;letter-spacing:-.035em}.blog-article-meta{display:flex;justify-content:center;gap:.55rem;color:#6a6f6c;font-size:.95rem}.blog-featured-image{max-width:1040px;margin:0 auto 3rem}.blog-featured-image img{aspect-ratio:16/9;object-fit:cover}.blog-reading-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(210px,260px);justify-content:center;align-items:start;gap:3rem}.blog-reading-main{min-width:0}.blog-body{margin-top:0}.blog-body p{scroll-margin-top:5rem}.blog-toc{position:sticky;top:2rem;padding:1.2rem;border:1px solid #e0ddd7;border-radius:14px;background:#faf8f4}.blog-toc h2{margin:0 0 .8rem;font-size:1rem}.blog-toc ol{margin:0;padding-left:1.2rem}.blog-toc li+li{margin-top:.55rem}.blog-toc a{color:#4d5350;font-size:.9rem;line-height:1.45;text-decoration:none}.blog-keywords{margin:3rem 0 1.5rem}.blog-keyword-list{display:flex;flex-wrap:wrap;gap:.55rem}.blog-keyword-list span{padding:.5rem .75rem;border-radius:999px;background:#f0eee9;color:#4b504d;font-size:.9rem}.blog-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;margin:1.5rem 0 3rem;padding:1rem 0;border-top:1px solid #e3e0da;border-bottom:1px solid #e3e0da}.blog-actions button{min-height:42px;padding:.6rem .9rem;border:1px solid #cfcac1;border-radius:10px;background:#fff;color:#26312e;cursor:pointer}.blog-actions button:hover{border-color:#0b3b33;color:#0b3b33}.blog-actions button:focus-visible,.blog-back-to-top:focus-visible{outline:3px solid #d89a52;outline-offset:3px}.blog-action-status{color:#54605c;font-size:.9rem}.blog-related{margin:4rem 0}.blog-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.blog-related-grid article{padding:1.2rem;border:1px solid #dedbd5;border-radius:14px;background:#fff}.blog-related-grid h3{font-size:1.05rem;line-height:1.5}.blog-related-grid a{color:inherit;text-decoration:none}.blog-post-navigation{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0}.blog-post-navigation a{display:flex;flex-direction:column;gap:.35rem;padding:1rem;border:1px solid #dedbd5;border-radius:12px;color:inherit;text-decoration:none}.blog-post-navigation a:last-child{text-align:right}.blog-back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:46px;height:46px;border:0;border-radius:50%;background:#0b3b33;color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.blog-reading-layout{grid-template-columns:1fr}.blog-toc{position:static;grid-row:1}.blog-related-grid{grid-template-columns:1fr}.blog-post-navigation{grid-template-columns:1fr}.blog-post-navigation a:last-child{text-align:left}}
@media(max-width:600px){.blog-article-header{text-align:left}.blog-article-meta{justify-content:flex-start}.blog-actions button{flex:1 1 auto}.blog-back-to-top{right:.8rem;bottom:.8rem}}
@media print{.blog-reading-progress,.blog-breadcrumb,.blog-toc,.blog-actions,.blog-related,.blog-post-navigation,.blog-article-footer,.blog-back-to-top,header nav,footer{display:none!important}.blog-article{max-width:none;padding:0}.blog-reading-layout{display:block}.blog-body{font-size:11pt}.blog-featured-image img{max-height:120mm;object-fit:contain}}
/* SITE5_BLOG_MODERN_DETAIL_END */