/* ============================================================
   LIMPID · Solution (솔루션)
   solution.html 전용. 공용 프리미티브는 base.css,
   헤더·푸터는 home.css 를 그대로 빌려 쓴다.
   레이아웃·인터랙션은 limpid.co.kr/brand 레퍼런스를 따른다 :
   브랜드마다 좌측 텍스트 칼럼이 sticky 로 고정된 채,
   우측에 이미지 3장이 세로로 쌓여 스크롤마다 페이드인.
   (레퍼런스 실측 : 텍스트 400px · 이미지 864x461 · 간격 52px · sticky top 70px)
   ============================================================ */

/* ============ 히어로 ============
   뉴스룸과 같은 서브페이지 문법. 좌측 큰 제목 + 우하단 서술.
   등장은 factory 히어로와 같은 1회 연출 :
   글자 차오름 -> 리드 -> 선 긋기 -> 인덱스 순차 등장 */
.sol-hero {
  padding-block: clamp(150px, 20vh, 220px) clamp(40px, 5vh, 72px);
}
.sol-hero__grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.sol-hero__title {
  font-size: clamp(3.2rem, 8.6vw, 8.25rem);
  font-weight: 640;
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--ink);
  /* 차오르는 글자를 자르는 마스크. 위·아래 여유는 어센더·디센더 몫 */
  overflow: hidden;
  padding-top: .06em;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
/* solution.js 가 글자를 <i> 로 분리하면 한 글자씩 차오른다 */
.sol-hero__title i {
  display: inline-block;
  font-style: normal;
  transform: translateY(125%);
  animation: sol-rise .8s var(--ease-out) forwards;
}
@keyframes sol-rise { to { transform: none; } }

.sol-hero__lede {
  padding-bottom: .6em;
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--ink-2);
}
.sol-hero__line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: sol-fade .7s var(--ease-out) forwards;
}
.sol-hero__line:nth-child(1) { animation-delay: .38s; }
.sol-hero__line:nth-child(2) { animation-delay: .5s; }
@keyframes sol-fade { to { opacity: 1; transform: none; } }

/* 모션 최소화 설정에서는 연출 없이 바로 최종 상태를 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .sol-hero__title i,
  .sol-hero__line,
  .sol-index::before,
  .sol-index::after,
  .sol-index__item { animation-delay: 0s !important; }
}

/* ============ 인덱스 (앵커 점프 스트립) ============
   레퍼런스의 Manufacture | Brand 탭 바를 3분할 스트립으로 번안.
   위아래 선은 왼쪽에서 그어지고(factory 선 긋기), 항목은 순차 등장 */
.sol-index { position: relative; }
.sol-index::before,
.sol-index::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  animation: sol-draw .9s var(--ease-out) .55s forwards;
}
.sol-index::before { top: 0; }
.sol-index::after { bottom: 0; }
@keyframes sol-draw { to { transform: none; } }

.sol-index__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sol-index__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 4px;
  min-width: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: sol-fade .6s var(--ease-out) forwards;
  transition: color var(--dur-fast) var(--ease);
}
.sol-index__item:nth-child(1) { animation-delay: .75s; }
.sol-index__item:nth-child(2) { animation-delay: .84s; }
.sol-index__item:nth-child(3) { animation-delay: .93s; }
.sol-index__item + .sol-index__item { border-left: 1px solid var(--line); padding-left: 24px; }
.sol-index__name {
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  /* factory 스텝과 같은 호버 : 밑줄이 왼쪽에서 자라난다 */
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: color var(--dur-fast) var(--ease),
              background-size var(--dur) var(--ease-out);
}
.sol-index__en {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sol-index__item:hover .sol-index__name { color: var(--brand); background-size: 100% 1px; }
.sol-index__item:hover .idx { color: var(--brand); }

/* ============ 브랜드 섹션 ============
   [텍스트 5 | 이미지 7] 그리드. 레퍼런스처럼 텍스트는 늘 왼쪽 */
.sol-brand { padding-block: var(--sec-y); }
.sol-brand--soft { background: var(--paper-soft); }

.sol-brand__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

/* 인터랙션 1 : 이미지 3장이 지나가는 동안 텍스트는 화면에 고정 (레퍼런스 sticky) */
.sol-brand__body {
  position: sticky;
  top: clamp(88px, 12vh, 120px);
}

/* 우측 이미지 스택 : 세로 3장, 레퍼런스 간격 52px */
.sol-brand__media {
  display: grid;
  gap: clamp(28px, 3.6vw, 52px);
}

/* 인터랙션 2 : 각 이미지는 화면에 들어올 때 제자리 페이드인 (레퍼런스 fadeIn)
   base.css 의 reveal 은 아래에서 떠오르므로 이미지만 이동 없이 투명도로 등장 */
.sol-brand__shot.reveal { transform: none; }

/* 인터랙션 3 : 호버 시 이미지가 천천히 확대 (레퍼런스 org_image transform .4s) */
.sol-brand__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* 누끼(투명 배경) 이미지도 사진과 같은 카드로 읽히게 옅은 바탕 */
  background: var(--paper-soft);
}
.sol-brand--soft .sol-brand__shot { background: var(--paper); }
.sol-brand__shot .sol-brand__ph {
  transition: transform .4s var(--ease);
}
.sol-brand__shot:hover .sol-brand__ph { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .sol-brand__shot:hover .sol-brand__ph { transform: none; }
}

.sol-brand__title {
  margin-top: 18px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}
.sol-brand__lede {
  margin-top: 14px;
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.sol-brand__desc {
  margin-top: 10px;
  max-width: 46ch;
  color: var(--ink-2);
}
.sol-brand__checks { margin-top: 26px; }

.sol-brand__foot {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sol-brand__note {
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

/* 이미지 : 레퍼런스 실측 비율 864x461 (= 1.874).
   원본 사진이 1730x925 (= 1.870) 이라 이 비율에서는 잘림이 사실상 없다.
   PC·모바일이 따로 놀지 않게 비율은 변수 한 곳에서만 정한다 -
   예전에 모바일만 16/10 (= 1.600) 으로 덮어써서 사진 좌우가 14% 잘렸다 */
:root { --sol-shot-ar: 864 / 461; }
.sol-brand__ph {
  width: 100%;
  aspect-ratio: var(--sol-shot-ar);
  border-radius: var(--r-lg);
  object-fit: cover;
}
/* soft 섹션 위에서는 플레이스홀더가 묻히지 않게 흰 바탕 */
.sol-brand--soft .sol-brand__ph { background-color: var(--paper); }

/* 스와이프 위치 점 (solution.js 가 만든다). 데스크톱에서는 숨김 */
.sol-swipe-dots { display: none; }

/* ============ 모바일 ============ */
@media (max-width: 900px) {
  .sol-swipe-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }
  .sol-swipe-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .sol-swipe-dots i.is-on {
    background: var(--brand);
    transform: scale(1.25);
  }
  .sol-hero { padding-top: 120px; }
  .sol-hero__grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .sol-hero__lede { padding-bottom: 0; }

  .sol-index__row { grid-template-columns: 1fr; }
  .sol-index__item { padding-block: 14px; }
  .sol-index__item + .sol-index__item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 4px;
  }

  .sol-brand__grid { grid-template-columns: 1fr; gap: 28px; }
  /* 모바일은 레퍼런스처럼 텍스트 먼저, 이미지는 아래에서 좌우 스와이프.
     세로 3장 스택은 스크롤을 너무 잡아먹는다 - 한 장 높이만 차지하게 한다 */
  .sol-brand__body { position: static; }
  .sol-brand__media {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 양옆 여백까지 밀어 화면 끝에서 끝으로 흐르게 */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .sol-brand__media::-webkit-scrollbar { display: none; }
  /* 다음 카드가 살짝 보이게 86% 폭 - 스와이프 가능함을 암시 */
  .sol-brand__shot {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  /* 비율은 PC 와 똑같이 간다 (--sol-shot-ar). 여기서 따로 덮지 않는 것이 핵심 -
     모바일만 세로로 길게 잡으면 object-fit: cover 가 사진 좌우를 잘라낸다 */
  .sol-brand__desc { max-width: none; }
}