/* 앞부분 장(章) — 왜 지금인가 · 제품 · 현장 스토리.
 * (첫 화면·«일단 핵심부터»·스탯은 hero.css, 도입 사례는 cases.css, 뒷부분은 blocks.css)
 *
 * ★애플 제품 페이지의 문법을 따른다 — 큰 제목, 넉넉한 여백, 바탕색 한 톤 차이로 서는
 *   타일, 선은 머리카락 굵기 하나, 발광 그림자 없음. 색은 전부 토큰이라 같은 조각이
 *   어두운 장(#why · #field)에도 밝은 장(#products)에도 들어간다.
 */

/* ══ 왜 지금인가 (#why) ══
 * 날짜 넷을 크게. 이 장이 30초 안에 말할 것은 «계도기간이 끝났다» 하나다. */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); position: relative; }
/* 위에 얇게 이어지는 선 — 왼쪽의 선 색에서 오른쪽 «지금» 의 경고색으로. */
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--state-offline));
}
.timeline__item { position: relative; padding-top: var(--s-6); }
.timeline__item::before {
  content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-deep); border: 2px solid var(--line-strong);
}
.timeline__item.is-now::before { background: var(--state-offline); border-color: var(--state-offline); }
/* ★큰 숫자는 본문 글꼴로 (hero.css 의 스탯과 같은 이유 — 큰 모노 숫자는 «콘솔» 처럼 읽힌다).
 *   고정폭 원칙은 .num 의 tabular-nums 가 그대로 지킨다. */
.timeline__when {
  display: block; font-family: var(--font); font-size: clamp(26px, 2.6vw, 32px); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--accent);
}
.timeline__item.is-now .timeline__when { color: var(--state-offline); }
.timeline__what {
  display: block; margin-top: var(--s-3); font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.timeline__note { display: block; margin-top: 4px; font-size: 15px; color: var(--text-muted); }

/* 접지 않는 세 문제 — 타일(.card) 셋. 아이콘은 components.css 의 .card .ico 가 잡는다. */
.pains--lead { margin-top: var(--s-9); }

/* 접힌 나머지 문제 — 두 단 목록. 테두리 대신 위에 머리카락 선 하나. */
.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-7); }
.pain { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.pain h3, .pain h4 { font-size: 17px; letter-spacing: -0.02em; }
.pain p { margin-top: 6px; font-size: 15px; color: var(--text-muted); }

/* 비교표 — 표는 왼쪽에서 시작하므로 제목도 왼쪽이다 (base.css 의 shead--left 와 같은 이유). */
.compare { max-width: 960px; margin: var(--s-9) auto 0; }
.compare__title { font-size: clamp(24px, 2.8vw, 28px); margin-bottom: var(--s-6); letter-spacing: -0.03em; }
.compare__title span { color: var(--text-faint); font-weight: 400; margin-inline: 8px; }

/* ══ 제품 (#products · 밝은 장) ══
 * 장 안의 장. 제품 하나가 머리카락 선 하나로 나뉜 한 «절» 이다 —
 * 이름 · 한 줄 · 칩 · 화면, 그리고 접힌 «자세히». */
.product { padding-block: var(--s-9); border-top: 1px solid var(--line-soft); }
.product__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.product--flip .product__inner > .product__copy { order: 2; }

/* ★데스크톱 화면은 한 단으로 쌓고 이미지가 폭을 다 쓴다.
 *   1680px 짜리 스크린샷을 600px 칸에 넣으면 글씨가 하나도 안 읽힌다.
 *   글은 720px 에서 멈추되, 접힌 «자세히» 는 폭을 다 쓴다 — 기능 묶음 4단이 720px 에
 *   들어가면 한 단이 170px 이라 항목이 두 자씩 끊긴다. */
.product--wide .product__inner { grid-template-columns: 1fr; gap: var(--s-7); }
.product--wide .product__copy > :not(.more) { max-width: 720px; }

.product__kicker { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent); }
.kdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.product__name { margin-top: var(--s-3); font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.035em; }
.product__tagline {
  margin-top: var(--s-4); font-size: clamp(21px, 2vw, 24px); font-weight: 500; line-height: 1.35;
  color: var(--text-muted); text-wrap: pretty;
}
.product__platform { margin-top: var(--s-4); font-size: 14px; color: var(--text-faint); }

/* 접힌 «자세히» 의 속 — 요약 · 강조 몇 줄 · 기능 묶음 */
.product__highlights { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.product__highlights li { display: flex; gap: var(--s-3); align-items: baseline; font-size: 15px; }
.product__highlights strong { flex: none; min-width: 9em; font-weight: 600; color: var(--text-strong); }
.product__highlights span { color: var(--text-muted); }
.fgroups { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-5); margin-top: var(--s-7); }
.fgroup { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.fgroup__name { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: var(--s-3); }
.fgroup__list li { position: relative; padding-left: 14px; margin-bottom: 8px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.fgroup__list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong);
}

/* 같은 제품의 다른 화면들 (계그니 스테이션의 subshots).
 * ★칸을 사진에 맞춘다 — 가로로 긴 화면(타임라인)은 한 줄을 다 쓰고, 세로로 긴 두 화면
 *   (통계 웹 · MES 규격)은 나란히 선다. 어느 쪽인지는 템플릿이 가로·세로 크기로 정한다. */
.subshots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
.subshots .shot { margin-top: 0; }
.subshots .shot--landscape { grid-column: 1 / -1; order: -1; }

/* ★제품별 강조색 — 키커 · 점 · 칩 · 기능 묶음 이름에만 쓴다. 본문 색은 바꾸지 않는다.
 *   밝은 장이므로 흰 바탕에서 읽히는 진한 변형이다 (tokens.css 의 amber · accent-alt 와 같은 값).
 *   #F5B942 · #2DD4BF · #A78BFA 는 흰 바탕에서 대비 2 안팎이라 전혀 읽히지 않는다. */
.product--amber  { --accent: #B45309; --accent-soft: rgba(180, 83, 9, .10);   --accent-line: rgba(180, 83, 9, .28);   --on-accent: #fff; }
.product--teal   { --accent: #0F766E; --accent-soft: rgba(15, 118, 110, .10); --accent-line: rgba(15, 118, 110, .28); --on-accent: #fff; }
.product--violet { --accent: #6D28D9; --accent-soft: rgba(109, 40, 217, .10); --accent-line: rgba(109, 40, 217, .28); --on-accent: #fff; }

/* 화면별 역할 — 네 화면이 하나의 원장을 본다는 표. 작은 타일 넷.
 * 마지막 제품이 이미 아래 여백을 갖고 있으므로 선 하나와 위 여백만 더한다. */
.surfaces {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  padding-top: var(--s-9); border-top: 1px solid var(--line-soft);
}
.surface { padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-tile); border: 1px solid var(--line-soft); }
.surface__where { display: block; font-size: 13px; font-weight: 600; color: var(--accent); }
.surface strong { display: block; margin: 6px 0 4px; font-size: 19px; letter-spacing: -0.02em; }
.surface__role { font-size: 14px; color: var(--text-muted); }

/* ══ 현장 스토리 (#field) ══ */
/* ★★ **칸을 사진에 맞춘다. 사진을 칸에 맞춰 자르지 않는다.**
   가로 사진(16:9)을 세로로 긴 칸에 넣고 `cover` 를 걸면 좌우가 잘려 나간다.
   1200px 기준으로 재 보면 687×1260 칸에 1672×941 을 넣는 셈이라 **가로의 69%가
   잘렸다** — 남는 것은 무엇을 찍었는지 알 수 없는 좁은 띠다.
   그래서 가로 사진은 가로 칸(16:9)에, 세로 사진은 세로로 긴 칸에 둔다. */
.field-story {
  display: grid; grid-template-columns: 1.16fr .84fr; grid-template-rows: auto auto;
  gap: var(--s-4); align-items: stretch;
}
.field-photo {
  position: relative; min-height: 260px; margin: 0; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--bg-deep);
  /* ★화면 스크린샷(.shot)과 같은 그림자 토큰. 사진만 그림자가 다르면 다른 재료처럼 보인다. */
  box-shadow: var(--shadow-lg);
}
.field-photo--control { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; }
.field-story__aside   { grid-column: 1; grid-row: 2; }
/* ★`1 / -1` 을 쓰지 마라. `-1` 은 **명시적** 격자의 마지막 선을 가리키는데,
   행을 `grid-template-rows` 로 선언하지 않으면 가리킬 선이 없어 한 칸만 차지한다.
   `span 2` 는 선언 여부와 무관하게 두 칸을 먹는다. */
.field-photo--mobile  { grid-column: 2; grid-row: 1 / span 2; }

/* ★★ **사진이 화면보다 밝으면 검은 배경 위에 «오려 붙인 것»처럼 뜬다.**
   이 사이트의 배경은 #02060A 에 가깝고 강조색은 청록 하나뿐인데, 실사 사진은
   주광·텅스텐이 섞여 밝고 따뜻하다. 그대로 얹으면 사진만 다른 페이지에서 온
   것처럼 보인다. 채도·밝기를 한 단계 내리고 네 변에 배경색을 먹여 앉힌다.
   ★사진 자체를 다시 만들지 않고 CSS 로만 맞춘다 — 원본은 그대로 둔다.
   (아래 그라데이션은 사진 **위에** 얹는 것이라 토큰이 아닌 어두운 값 그대로다.) */
.field-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) brightness(.88) contrast(1.04); }
.field-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 10, .46) 0%, rgba(2, 6, 10, 0) 28%,
                            rgba(2, 6, 10, 0) 48%, rgba(2, 6, 10, .88) 100%),
    linear-gradient(90deg, rgba(2, 6, 10, .34) 0%, rgba(2, 6, 10, 0) 24%,
                           rgba(2, 6, 10, 0) 76%, rgba(2, 6, 10, .34) 100%);
}
/* 사진 위 글자. 사진은 늘 어둡게 눌러 두므로 테마와 무관하게 밝은 글자다. */
.field-photo figcaption {
  position: absolute; z-index: 1; inset: auto var(--s-5) var(--s-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); color: #fff;
}
.field-photo strong { font-size: 15px; }
.field-photo small { font-size: 11px; color: rgba(255, 255, 255, .7); }

/* 곁글 — 바탕색 한 톤 차이로 서는 타일. 그라데이션·발광 없음. */
.field-story__aside {
  display: flex; flex-direction: column; justify-content: center; padding: var(--s-6);
  border-radius: var(--r-xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.field-story__kicker { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--accent); }
.field-story__aside h3 { margin-top: var(--s-4); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.03em; }
.field-story__aside > p:not(.field-story__kicker) { margin-top: var(--s-3); font-size: 17px; color: var(--text-muted); }
.field-story__aside .tlink { align-self: flex-start; margin-top: var(--s-5); font-size: 17px; }

@media (max-width: 1000px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); }
  .timeline::before { display: none; }
  .pains--lead { grid-template-columns: 1fr; }
  .product__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .product--flip .product__inner > .product__copy { order: 0; }
  .fgroups, .surfaces { grid-template-columns: repeat(2, 1fr); }
  .subshots { grid-template-columns: 1fr; }
  /* ★좁아져도 규칙은 같다 — 가로 사진은 가로로, 세로 사진은 세로로. */
  .field-story { grid-template-columns: 1fr 1fr; }
  .field-photo--control { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .field-photo--mobile  { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 5; min-height: 0; }
  .field-story__aside   { grid-column: 2; grid-row: 2; }
}
@media (max-width: 640px) {
  .timeline, .pains, .fgroups, .surfaces { grid-template-columns: 1fr; }
  .timeline { gap: var(--s-6); }
  .product { padding-block: var(--s-8); }
  .product__inner { gap: var(--s-6); }
  .compare__title { font-size: 22px; }
  .field-story { display: flex; flex-direction: column; }
  .field-photo--control { aspect-ratio: 16 / 10; min-height: 0; }
  .field-photo--mobile  { aspect-ratio: 4 / 5;  min-height: 0; }
  .field-story__aside { min-height: 0; padding: var(--s-5); }
}

/* ── 움직임: 시행 일정의 선이 왼쪽에서 그어진다. 마지막 점(계도기간 종료)까지 닿는 것이 요점이다.
 * ★스크립트가 진입 애니메이션을 걸어 둔 동안(data-reveal 이 있고 아직 하나도 안 들어옴)만 접어 둔다.
 *   스크립트가 아예 없으면 선은 처음부터 보인다. */
.timeline::before { transform-origin: left; transition: transform 1.6s var(--ease) .15s; }
.timeline:has([data-reveal]):not(:has(.timeline__item.is-in))::before { transform: scaleX(0); }