:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fb;
  --color-page-bg: #f7f8fc;
  --color-card-bg: #ffffff;
  --color-text: #172033;
  --color-copy: #4c5666;
  --color-muted: #657083;
  --color-border: #d9e1ec;
  --color-card-border: #d1d7e2;
  --color-divider: #dfe4ec;
  --color-primary: #009900;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-h: #e86324;
  --color-s: #f4bc1a;
  --color-d: #29993c;
  --color-c: #449cd6;
  --color-about-soft: #f3f9ff;
  --color-works-soft: #dff3ff;
  --color-export-soft: #eaf8ee;

  --container-width: 1120px;
  --button-radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: Arial, "Noto Sans KR", sans-serif;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

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


/* Common typography and sections */

/* Sections */

.section {
  padding: 88px 0;
}

.intro-section {
  border-top: 1px solid var(--color-border);
}

.about-content {
  display: grid;
  gap: 42px;
}

.about-intro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 64px;
}

.about-logo-wrap {
  display: flex;
  justify-content: center;
}

.about-logo {
  width: min(100%, 360px);
  height: auto;
}

.about-copy p,
.about-detail p {
  color: var(--color-muted);
}

.about-copy p {
  margin-bottom: 12px;
}

.about-divider {
  width: min(100%, 760px);
  height: 1px;
  margin: 4px auto;
  background: linear-gradient(
    90deg,
    rgba(217, 225, 236, 0),
    rgba(217, 225, 236, 0.9) 22%,
    rgba(101, 112, 131, 0.35) 50%,
    rgba(217, 225, 236, 0.9) 78%,
    rgba(217, 225, 236, 0)
  );
}

.about-detail {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-decoration {
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto 28px;
}

.about-concept-title {
  margin-bottom: 24px;
}

.about-detail .business-heading {
  margin: 36px 0 12px;
  color: var(--color-text);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0;
}

.business-heading span {
  margin-left: 8px;
}

.business-image {
  width: min(100%, 760px);
  height: auto;
  margin: 36px auto 0;
}


h2 {
  margin-bottom: 20px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.05em;
}