/* CI 소개 페이지 전용. 브랜드 색(CI 규격 값)은 .ci-page 맨 위 변수에만 쓰고 아래에서는 변수로만 쓴다. */
.ci-page{
  --ci-dark:#07111F;
  --ci-navy:#08275F;
  --ci-accent:#175CFF;
  --ci-arc:#4D8AFF;
  --ci-x:#5B9AFF;
  --ci-glow:rgba(23,92,255,.08);
}

/* ── 어두운 첫 화면 ───────────────────────────────────────────────────── */
.ci-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-block-size:calc(100vh - var(--utilbar-height) - var(--gnb-height));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-12) var(--space-5);
  background:var(--ci-dark);color:var(--ink-text);text-align:center;
}
.ci-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(var(--ink-surface) 1px,transparent 1px),
    linear-gradient(90deg,var(--ink-surface) 1px,transparent 1px);
  background-size:48px 48px;
}
.ci-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,var(--ci-glow),transparent);
}
.ci-hero-inner{max-inline-size:800px;inline-size:100%}

.ci-logo{
  display:block;inline-size:min(400px,80vw);block-size:auto;
  margin:0 auto var(--space-12);color:var(--ink-text);
}

.ci-eq{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);
  margin-block-end:var(--space-12);
}
.ci-eq-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5)}
.ci-eq-item svg{display:block;block-size:90px;inline-size:auto}
.ci-eq-item .is-f,.ci-eq-item .is-p{color:var(--ink-text)}
.ci-eq-item .is-arc{color:var(--ci-arc)}
.ci-eq-word{
  font-size:clamp(40px,7vw,72px);line-height:1;font-weight:900;letter-spacing:.03em;
  block-size:90px;display:flex;align-items:center;
}
.ci-eq-op{font-size:clamp(24px,4vw,40px);line-height:1;font-weight:300;color:var(--ink-text-muted);padding-block-end:var(--space-6)}
.ci-eq-label{font-family:var(--font-mono);font-size:var(--text-xs-size);line-height:var(--text-xs-line);letter-spacing:.1em;color:var(--ink-text-muted)}
.ci-eq-label.is-arc{color:var(--ci-arc)}

.ci-fx{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--space-3);
  margin-block-end:var(--space-10);
  font-size:clamp(28px,4vw,52px);line-height:1;font-weight:300;
}
.ci-fx .op{color:var(--ink-text-muted)}
.ci-fx .x{color:var(--ci-x);font-style:italic;font-weight:500}

.ci-desc{
  max-inline-size:36em;margin:0 auto;
  font-size:clamp(14px,1.8vw,17px);line-height:1.95;color:var(--ink-text-muted);
}
.ci-desc strong{color:var(--ink-text)}

.ci-scroll{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-block-start:var(--space-10);
  font-size:var(--text-xs-size);letter-spacing:.12em;color:var(--ink-text-muted);
}
.ci-scroll i{display:block;inline-size:1px;block-size:32px;background:var(--ink-border);animation:ci-pulse 1.8s ease-in-out infinite}
@keyframes ci-pulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.5)}}

/* ── 로고 뜻 풀이 ─────────────────────────────────────────────────────── */
.ci-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.ci-logo-box{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-12);
  background:var(--color-brand-tint);border-radius:var(--radius-xl);
  color:var(--ci-navy);
}
.ci-logo-box svg{display:block;inline-size:100%;max-inline-size:280px;block-size:auto}
.ci-note{
  margin-block-start:var(--space-6);padding:var(--space-5) var(--space-6);
  background:var(--ci-dark);color:var(--ink-text-muted);
  border-inline-start:3px solid var(--ci-accent);border-radius:var(--radius-md);
}
.ci-note strong{color:var(--ink-text)}

@media (max-width:768px){
  .ci-detail{grid-template-columns:1fr;gap:var(--space-8)}
  .ci-logo-box{padding:var(--space-8)}
  .ci-eq-item{padding:var(--space-2) var(--space-3)}
  .ci-eq-item svg,.ci-eq-word{block-size:56px}
}