/* ===========================================================================
   CI (Corporate Identity) — 다국어 일반 스크롤 문서

   패널마다 형태를 달리해 같은 카드 리듬이 반복되지 않게 한다 —
     P1 Signature    : 비대칭 2단(좁은 설명 / 넓은 도판) + 기본형·반전형 스택
     P2 Design Motive: 수식(equation) 행
     P3 Color        : 스펙 테이블형 밴드 (+ 푸터)

   ※ --ci-* 는 로고 CI 규정색이다. 사이트 액센트(--color-gold)와 별개이며
     서로 대체하지 말 것 — 규정색은 브랜드 사실, 골드는 웹 디자인 언어.
   =========================================================================== */
:root {
  --ci-blue:   #0a1c8f;   /* PANTONE 2746C  */
  --ci-red:    #ff0000;   /* PANTONE 186C   */
  --ci-dgray:  #434243;   /* PANTONE 4287C  */
  --ci-silver: #808285;   /* PANTONE 10077C */
  --ci-lgold:  #cdaa7d;   /* PANTONE 4022U  */
  --ci-gold:   #88796a;   /* PANTONE 8004C  */

  --ci-plate:  #f6f7f8;   /* 규정 도판 바탕 — 로고를 얹는 중립면 */
  --ci-line:   #e3e6e9;
}

/* ---------- 공통 타이포 ----------
   섹션 헤딩·설명은 staging 공통 컴포넌트 .section-lede 를 그대로 쓴다
   (골드 세로바 + h3 2.2rem/700/#1c2430 + p 1.45rem/300/#666).
   여기서는 재정의하지 않는다 — 콘텐츠 노트/스펙 텍스트만 보조로 둔다. */
.page-section strong:not(.section-title__main), .page-section b { font-weight: 700; color: #222; }
.ci-red { color: var(--ci-red) !important; }

/* CI 도판 밀도에 맞춘 섹션 간격 */
.page-section .section-lede { margin-bottom: clamp(2rem, 5vh, 4.6rem); }

/* 페이지 타이틀 — staging 공통 .section-title(2톤) + 소개문 패턴(news-head와 동일).
   overview.html의 CORPORATE/SLOGAN/_슬로건 구조를 그대로 따른다. */
/* 타이틀 아래 헤어라인 — 제목 덩어리와 본문 도판의 경계를 준다(제품보증 안내 .wr-pagehead와 동일 처리). */
.ci-pagehead {
  margin-bottom: clamp(1.8rem, 4.5vh, 4rem);
  padding-bottom: clamp(1.6rem, 4vh, 3.4rem);
  border-bottom: 1px solid var(--ci-line);
}
.page-flow .section .ci-pagehead .section-title { margin-bottom: 0; }
.ci-pagehead p { margin-top: 1rem; font-size: 2.2rem; line-height: 1.4; color: #333; font-weight: 400; }

/* ---------- P1. Signature : 비대칭 2단(설명 좌 / 도판 우) ----------
   좌측 설명은 staging .section-lede(골드바 포함) 그대로 — 어사이드엔 바를 두지 않는다. */
/* aside는 도판 스택 윗선에 맞춰 위에서부터 흐른다 — 설명과 다운로드는 한 덩어리로 붙어 있어야
   '이 로고를 받는다'는 관계가 읽힌다(아래로 밀어 붙이면 둘이 무관해 보인다).
   아래 남는 공간은 비운다 — 도판이 주인공인 패널에서 왼쪽 열은 캡션 열이다. */
.ci-signature { display: grid; grid-template-columns: 32rem 1fr; gap: 5rem; align-items: stretch; }
.ci-signature__aside { display: flex; flex-direction: column; }
.ci-dl { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.8rem; }
.ci-dl__label { font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; color: #8d949b; }
.ci-dl__btns { display: flex; flex-wrap: wrap; gap: 1rem; }
/* 라벨을 짧게 뺐으니 알약은 자연 너비 — 줄바꿈만 금지해 알약 형태 보존 */
.ci-dl .btn-more { white-space: nowrap; }

/* 기본형·반전형을 위아래로 붙여 한 덩어리 도판으로.
   도판은 이 패널의 주인공이다 — 남는 세로 예산을 밴드 패딩으로 흘려보내 화면을 채운다.
   (작게 두면 패널 중앙에 작은 도판만 떠서 첫 화면 임팩트가 죽는다.) */
.ci-signature__stack { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vh, 2.6rem); }
.ci-band {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2.4rem, 10vh, 10rem) 6rem;
}
.ci-band img { width: min(62rem, 100%); }
.ci-band figcaption {
  position: absolute; left: 2.4rem; bottom: 1.6rem;
  font-family: var(--font-en); font-size: 1.2rem; font-weight: 500; letter-spacing: .16em;
}
.ci-band--light { background: var(--ci-plate); border: 1px solid var(--ci-line); }
.ci-band--light figcaption { color: #a5aaaf; }
.ci-band--dark { background: var(--color-dark); }
.ci-band--dark figcaption { color: rgba(255, 255, 255, .5); }

/* ---------- P2. Design Motive : 수식 행 ---------- */
/* 단어 라인은 .section-lede p(0,1,1)를 이겨야 하므로 선택자 특이도를 맞춘다 */
.section-lede p.ci-motive__word {
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(1.9rem, 3vh, 2.8rem); line-height: 1.5; color: #555;
}
.ci-motive__word b { font-weight: 700; color: var(--ci-blue); }
.ci-motive__word i, .ci-eq__terms i {
  font-style: normal; font-weight: 400; color: var(--color-gold); margin: 0 .6rem;
}
/* 설명문은 staging .section-lede p 스타일(1.45rem/300/#666) 그대로 사용 */

/* 도판 박스 없이 '항 = 결과' 한 줄로 — 앞 패널의 도판 리듬과 형태를 다르게.
   두 행은 서브그리드로 같은 축을 공유한다 — '=' 와 도판이 한 세로선에 맞아야 두 수식이
   서로 비교되는 하나의 표로 읽힌다. (행마다 독립 그리드로 두면 축이 어긋나 미완성처럼 보인다.) */
.ci-eq { display: grid; grid-template-columns: max-content 3rem max-content 1fr; column-gap: 3rem; }
.ci-eq > li {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: center;
  padding: clamp(2rem, 5.5vh, 5rem) 0;
  border-top: 1px solid var(--ci-line);
}
.ci-eq > li:last-child { border-bottom: 1px solid var(--ci-line); }
.ci-eq__terms {
  font-family: var(--font-en); font-size: 1.8rem; font-weight: 500; color: #333;
}
.ci-eq__op {
  font-family: var(--font-en); font-size: 2.2rem; font-weight: 300;
  color: var(--color-gold); text-align: center;
}
.ci-eq img { height: clamp(4rem, 10vh, 9rem); width: auto; margin: 0 auto; }
.ci-eq__note { font-size: 1.35rem; line-height: 1.85; color: #666; font-weight: 300; }

/* ---------- P3. Color : 스펙 테이블형 밴드 ----------
   주 색상 = 풀폭 행(스펙 테이블), 보조 색상 = 4열 압축 그리드.
   행/그리드로 밀도를 갈라 위계를 만들고, 동시에 푸터 몫 약 210px을 남긴다. */
.ci-color .section-lede { margin-bottom: clamp(.4rem, .8vh, 2.4rem); }
.ci-color .section { padding-bottom: clamp(6rem, 10vh, 10rem); }
.ci-swatch {
  display: grid; align-items: center;
  grid-template-columns: 26rem 20rem 1fr 22rem;
  gap: 0 3rem;
  padding: clamp(.5rem, 1vh, 1.8rem) 0;
  border-top: 1px solid var(--ci-line);
}
.ci-swatches:not(.ci-swatches--sub) > li:last-child { border-bottom: 1px solid var(--ci-line); }
.ci-swatch__chip { height: clamp(3rem, 4vh, 5.4rem); }
.ci-swatch--main .ci-swatch__chip { height: clamp(3.6rem, 4.8vh, 7rem); }
.ci-swatch__name {
  font-family: var(--font-en); font-size: 1.6rem; font-weight: 700;
  letter-spacing: .05em; color: #222;
}
.ci-swatch__desc { font-size: 1.35rem; line-height: 1.8; color: #666; font-weight: 300; }
.ci-swatch__spec {
  font-family: var(--font-en); font-size: 1.25rem; line-height: 1.65;
  color: #8d949b; font-variant-numeric: tabular-nums;
}
.ci-swatch__spec span { display: block; }

.ci-color__subtitle {
  margin-top: clamp(.6rem, 1vh, 3rem);
  font-size: 1.5rem; font-weight: 700; color: #222;
}
.ci-swatches--sub {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem;
  margin-top: clamp(1rem, 1.4vh, 1.6rem);
}
.ci-swatches--sub .ci-swatch {
  display: block; grid-template-columns: none;
  padding: 0; border: 0;
}
.ci-swatches--sub .ci-swatch__name { margin-top: 1.2rem; font-size: 1.4rem; }
.ci-swatches--sub .ci-swatch__spec { margin-top: .6rem; }

.chip-blue   { background: var(--ci-blue); }
.chip-red    { background: var(--ci-red); }
.chip-dgray  { background: var(--ci-dgray); }
.chip-silver { background: var(--ci-silver); }
.chip-lgold  { background: var(--ci-lgold); }
.chip-gold   { background: var(--ci-gold); }

/* ---------- 태블릿 ---------- */
@media (max-width: 1200px) {
  /* aside 폭은 다운로드 버튼 2개(≈30rem)가 한 줄에 들어가도록 확보 — 28rem이면 세로로 wrap됨 */
  .ci-signature { grid-template-columns: 30rem 1fr; gap: 4rem; }
  .ci-eq { column-gap: 2rem; }   /* 축은 유지하고 간격만 좁힌다 (li는 서브그리드) */
  .ci-swatch { grid-template-columns: 20rem 16rem 1fr 19rem; gap: 0 2rem; }
  .ci-swatches--sub { gap: 2rem; }
}

/* ---------- 작은 뷰포트 ---------- */
@media (max-width: 1024px), (max-height: 640px) {
  /* 낮은 화면에서는 vh 기반 도판을 안정적인 고정값으로 바꾼다. */
  .ci-band { padding: 5rem 6rem; }
  .ci-eq > li { padding: 3.4rem 0; }
  .ci-eq img { height: 6.4rem; }
  .ci-swatch { padding: 2.2rem 0; }
  .ci-swatch__chip { height: 6rem; }
  .ci-swatch--main .ci-swatch__chip { height: 10rem; }
}
@media (max-width: 900px) {
  .ci-signature { grid-template-columns: 1fr; gap: 3.2rem; }
  .ci-band { padding: 3.4rem 2.6rem; }
  .section-lede p.ci-motive__word { font-size: 2rem; }

  /* 수식 행: 항 / = / 결과 를 한 줄로 접고 설명을 아래로 */
  .ci-eq > li {
    grid-template-columns: auto 2.4rem auto 1fr;   /* 끝의 1fr = 슬랙: note가 클러스터 열(문구·이미지)을 늘리지 않게 폭을 흡수 */
    grid-template-areas: 'terms op img .' 'note note note note';
    gap: 1.6rem;
  }
  .ci-eq__terms { grid-area: terms; font-size: 1.5rem; }
  .ci-eq__op { grid-area: op; }
  .ci-eq img { grid-area: img; height: 4.4rem; margin: 0; }
  .ci-eq__note { grid-area: note; }

  /* 컬러 행: 칩 위, 텍스트 아래 */
  .ci-swatch { grid-template-columns: 1fr; gap: 1.2rem; }
  .ci-swatch__chip, .ci-swatch--main .ci-swatch__chip { height: 8rem; }
  .ci-swatches--sub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ci-dl { gap: .8rem; }
  .section-lede p.ci-motive__word { font-size: 1.8rem; }
}