.page-ci {
  --ci-green: #1f3a2e;
  --ci-taupe: #a69c90;
  --ci-beige: #e7e5e1;
  --ci-charcoal: #2b2b2b;
  --ci-paper: #f8f7f3;
}

.page-ci .subhero-identity {
  background: linear-gradient(135deg, var(--ci-beige), var(--ci-paper) 62%, #d8ded9);
  color: var(--ci-green);
}

.page-ci .subhero-identity::before {
  background-image: linear-gradient(rgba(31, 58, 46, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 58, 46, 0.055) 1px, transparent 1px);
}

.page-ci .ci-primary,
.page-ci .ci-concept-section,
.page-ci .ci-signature-section,
.page-ci .ci-construction-section,
.page-ci .ci-color-section,
.page-ci .ci-application-section,
.page-ci .ci-usage-section { position: relative; }

.page-ci .section-heading h2 {
  color: var(--ci-green);
  font-family: "DM Serif Display", Georgia, "Noto Serif KR", serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.page-ci .ci-primary-label {
  grid-template-columns: 1fr;
  margin-bottom: clamp(42px, 5vw, 66px);
}

.page-ci .section-heading.ci-label-only {
  grid-template-columns: 1fr;
  margin-bottom: 34px;
}

.page-ci .section-heading.ci-compact-heading h2 {
  max-width: 760px;
  font-size: clamp(34px, 3.15vw, 46px);
  line-height: 1.24;
}

.page-ci .ci-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr);
  gap: clamp(36px, 7vw, 96px);
  min-height: 520px;
  padding: clamp(54px, 8vw, 108px);
  align-items: center;
  background: var(--ci-paper);
  border: 1px solid rgba(31, 58, 46, 0.14);
}

.page-ci .ci-showcase > img { width: 100%; max-height: none; object-fit: contain; }
.ci-showcase-copy { padding-left: 28px; border-left: 1px solid var(--ci-taupe); }

.ci-showcase-copy > span,
.ci-slogan > span,
.ci-concept-grid small,
.ci-signature-grid figcaption span {
  color: var(--ci-green);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ci-concept-grid small { font-size: 12px; }

.ci-showcase-copy p { margin: 28px 0 0; color: #625f59; font-size: 14px; line-height: 1.85; }
.ci-showcase-copy p strong {
  display: block;
  margin-bottom: 12px;
  color: var(--ci-charcoal);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.ci-slogan {
  display: grid;
  grid-template-columns: 0.45fr 1fr 0.8fr;
  gap: 34px;
  margin: 0;
  padding: 56px 0;
  align-items: end;
  border-bottom: 1px solid rgba(31, 58, 46, 0.18);
}

.ci-slogan p {
  margin: 0;
  color: var(--ci-green);
  font-family: "DM Serif Display", Georgia, "Noto Serif KR", serif;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.38;
}

.ci-slogan footer { color: #66615b; font-size: 14px; letter-spacing: 0.03em; }
.ci-essence {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 56px;
  border-block: 1px solid rgba(31, 58, 46, 0.24);
}

.ci-essence article { min-height: 150px; padding: 24px 20px; border-right: 1px solid rgba(31, 58, 46, 0.14); }
.ci-essence article:last-child { border-right: 0; }
.ci-essence span { color: var(--ci-taupe); font-size: 10px; }
.ci-essence strong { display: block; margin-top: 36px; color: var(--ci-charcoal); font-size: 15px; font-weight: 550; }
.ci-essence small { display: block; margin-top: 6px; color: #77716a; font-size: 10px; letter-spacing: 0.04em; }

.ci-concept-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 120px);
  padding: 48px 0;
  align-items: center;
  border-block: 1px solid rgba(31, 58, 46, 0.2);
}

.ci-concept-intro strong {
  color: var(--ci-green);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(64px, 9vw, 126px);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.ci-concept-intro p { max-width: 660px; margin: 0; color: #66615b; font-size: 15px; line-height: 1.9; }
.ci-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 50px;
  border: 1px solid rgba(31, 58, 46, 0.18);
  background: var(--ci-paper);
}

.ci-concept-grid article {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 20px;
  min-height: 330px;
  padding: 40px 34px;
  border-right: 1px solid rgba(31, 58, 46, 0.14);
}

.ci-concept-grid article:last-child { border-right: 0; }
.ci-concept-grid article > span { display: grid; min-height: 92px; place-items: start center; }
.ci-concept-grid .ci-concept-glyph img { width: 100%; height: 82px; object-fit: contain; object-position: 50% 0; }
.ci-concept-grid h3 { margin: 40px 0 14px; color: var(--ci-charcoal); font-size: 19px; font-weight: 550; line-height: 1.55; }
.ci-concept-grid p { margin: 0; color: #77716a; font-size: 13px; line-height: 1.75; }

.page-ci .ci-signature-grid { background: rgba(31, 58, 46, 0.14); border-color: rgba(31, 58, 46, 0.14); }
.page-ci .ci-signature-grid figure { min-height: 410px; background: var(--ci-paper); }
.page-ci .ci-signature-grid img { max-height: 230px; }
.page-ci .ci-signature-grid .ci-signature-icon { min-height: 400px; }
.page-ci .ci-signature-icon img { max-width: 210px; max-height: 270px; }
.page-ci .ci-construction-board { border-color: rgba(31, 58, 46, 0.2); background: var(--ci-paper); }
.page-ci .ci-construction-board figcaption { padding: 20px 22px; color: #68635d; font-size: 12px; line-height: 1.75; }

.page-ci .color-ledger { border-top-color: var(--ci-green); }
.page-ci .color-ledger > div { grid-template-columns: 1fr auto; }
.page-ci .color-ledger span { height: 150px; }
.page-ci .color-ledger small { grid-column: 1 / -1; color: #7b746c; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.color-ledger .color-deep-green span { background: #1f3a2e; }
.color-ledger .color-warm-taupe span { background: #a69c90; }
.color-ledger .color-light-beige span { background: #e7e5e1; }
.color-ledger .color-charcoal span { background: #2b2b2b; }

.ci-application-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ci-application-grid figure { margin: 0; }
.ci-application-grid figure > div { display: grid; min-height: 430px; padding: 46px; place-items: center; overflow: hidden; }
.ci-application-grid img { width: 100%; max-height: 230px; object-fit: contain; }
.ci-application-grid figcaption { padding: 14px 2px; color: #716c65; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ci-application-card > div { background: var(--ci-green); }
.ci-application-card img { filter: brightness(0) invert(92%) sepia(8%) saturate(124%) hue-rotate(350deg); }
.ci-application-paper > div { background: linear-gradient(135deg, #f8f7f3, var(--ci-beige)); box-shadow: inset 0 0 0 1px rgba(43, 43, 43, 0.08); }
.ci-application-paper img { opacity: 0.24; filter: grayscale(1); }
.ci-application-sign > div { background: radial-gradient(circle at 50% 40%, #454541, var(--ci-charcoal) 62%, #151515); }
.ci-application-sign img { max-width: 160px; max-height: 220px; filter: brightness(0) invert(92%) sepia(8%) saturate(124%) hue-rotate(350deg); }

.page-ci .ci-usage-grid figure { min-height: 460px; }
.page-ci .ci-usage-grid img { width: 138px; }
.page-ci .ci-dark { background: radial-gradient(circle at 50% 42%, #44554d 0, var(--ci-green) 42%, #102219 100%); }
.page-ci .ci-dark img { width: 138px; filter: brightness(0) invert(92%) sepia(8%) saturate(124%) hue-rotate(350deg); }
.page-ci .usage-rules-four { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top-color: var(--ci-green); }
.page-ci .usage-rules-four article { min-height: 205px; }
.page-ci .download-row { border-top-color: rgba(31, 58, 46, 0.2); }

@media (max-width: 980px) {
  .page-ci .ci-showcase { grid-template-columns: 1fr; min-height: 0; }
  .ci-showcase-copy { padding: 26px 0 0; border-top: 1px solid var(--ci-taupe); border-left: 0; }
  .ci-slogan { grid-template-columns: 0.45fr 1.2fr; }
  .ci-slogan footer { grid-column: 2; }
  .ci-essence { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ci-essence article:nth-child(3) { border-right: 0; }
  .ci-essence article:nth-child(-n + 3) { border-bottom: 1px solid rgba(31, 58, 46, 0.14); }
  .ci-concept-grid { grid-template-columns: 1fr; }
  .ci-concept-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid rgba(31, 58, 46, 0.14); }
  .ci-concept-grid article:last-child { border-bottom: 0; }
  .ci-application-grid { grid-template-columns: 1fr; }
  .ci-application-grid figure > div { min-height: 330px; }
  .page-ci .usage-rules-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-ci .usage-rules-four article:nth-child(2) { border-right: 0; }
  .page-ci .usage-rules-four article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .page-ci .ci-primary-label { margin-bottom: 34px; }
  .page-ci .ci-showcase { padding: 44px 24px; }
  .ci-slogan { grid-template-columns: 1fr; gap: 18px; padding: 42px 0; }
  .ci-slogan footer { grid-column: 1; }
  .ci-essence { grid-template-columns: 1fr; }
  .ci-essence article { min-height: 112px; border-right: 0; border-bottom: 1px solid rgba(31, 58, 46, 0.14); }
  .ci-essence article:last-child { border-bottom: 0; }
  .ci-essence strong { margin-top: 22px; }
  .ci-concept-intro { grid-template-columns: 1fr; gap: 10px; }
  .ci-concept-grid article { grid-template-columns: 60px 1fr; padding: 32px 22px; }
  .ci-concept-grid article > span { min-height: 72px; }
  .ci-concept-grid .ci-concept-glyph img { height: 62px; }
  .ci-concept-grid h3 { margin-top: 24px; font-size: 17px; }
  .page-ci .color-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-ci .color-ledger > div:nth-child(2) { border-right: 0; }
  .page-ci .color-ledger > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .page-ci .color-ledger > div { grid-template-columns: 1fr; gap: 5px; padding-right: 12px; }
  .page-ci .color-ledger span { height: 110px; }
  .page-ci .color-ledger small { grid-column: 1; margin-top: 5px; }
  .ci-application-grid figure > div { min-height: 270px; padding: 34px; }
  .page-ci .usage-rules-four { grid-template-columns: 1fr; }
  .page-ci .usage-rules-four article { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); }
}