/* RANIS site layer — page-level rules on top of the Industry DS (styles.css). */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Barlow", "IBM Plex Sans KR", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }
h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "IBM Plex Sans KR", system-ui, sans-serif;
  font-weight: 600; letter-spacing: 0.005em;
}

/* — layout primitives — */
.container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }
.kicker {
  display: block;
  font-family: "Barlow Condensed", "IBM Plex Sans KR", sans-serif;
  font-size: 13px; line-height: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700); margin: 0 0 12px;
}
.kicker-light { color: var(--color-accent-300); }
.rule { height: 1px; border: 0; margin: 0 0 28px; background: var(--color-divider); }
.rule-light { background: color-mix(in srgb, var(--color-bg) 28%, transparent); }

/* — responsive split grids (inline styles cannot carry media queries) — */
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split-75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 880px) {
  .split-75, .split-57, .split-11 { grid-template-columns: 1fr; }
}

/* — navigation — */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  padding-inline: clamp(20px, 5vw, 72px);
  gap: 20px; flex-wrap: wrap;
}
.site-nav .nav-links {
  display: flex; gap: 22px; align-items: center; margin-left: auto;
  font-size: 14px; font-weight: 500; flex-wrap: wrap;
}
.site-nav .nav-links a { color: var(--color-text); }
.site-nav .nav-links a[aria-current="page"] { color: var(--color-accent-700); }
.site-nav .nav-cta { margin-left: 20px; white-space: nowrap; }
@media (max-width: 720px) {
  .site-nav { padding-block: 10px; }
  .site-nav .nav-cta { margin-left: auto; }
}

/* — scroll reveal (home). Scoped to html.js so no-JS visitors and crawlers
     always see content. — */
html.js [data-reveal-group] > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
html.js [data-reveal-group][data-in] > * { opacity: 1; transform: none; }
html.js [data-reveal-group][data-in] > *:nth-child(2) { transition-delay: .10s; }
html.js [data-reveal-group][data-in] > *:nth-child(3) { transition-delay: .20s; }
html.js [data-reveal-group][data-in] > *:nth-child(4) { transition-delay: .30s; }
html.js [data-reveal-group][data-in] > *:nth-child(5) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
}

/* — honeypot: invisible to humans, present for bots — */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }