/* 뒷부분 장(章) — 작동 방식 · 데이터 무결성 · 차별점 · 적용 산업.
 * (요금·FAQ·문의는 commerce.css, 내비·푸터·CTA 띠는 chrome.css, 도입 사례는 cases.css)
 *
 * ★전부 토큰만 본다. 차별점 장은 밝은 장(`theme-light`)이라 어두운 값을 직접 적으면
 *   그 장에서만 깨진다. 타일은 `--bg-tile` + 실선 한 가닥(`--line-soft`)으로 서고,
 *   마우스를 얹어도 움직이지 않는다 — components.css 의 .card 와 같은 원칙이다.
 */

/* ══ 작동 방식 ══ */
/* 3계층 — 현장 · 연결 · 클라우드. 타일 셋 사이에 → 하나씩. (첫 그림 sysmap 은 sysmap.css) */
.layers {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-4); align-items: stretch;
}
.layer {
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.layer__no { display: block; font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: var(--s-3); }
.layer h3 { font-size: 24px; letter-spacing: -0.03em; }
.layer__sub { font-size: 15px; color: var(--text-faint); margin-top: 4px; }
.layer__list {
  display: grid; gap: 10px; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.layer__list li { font-size: 15px; color: var(--text-muted); padding-left: 16px; position: relative; line-height: 1.5; }
.layer__list li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--line-strong);
}
.layer__arrow { align-self: center; color: var(--text-faint); font-size: 24px; }

.flow { margin-top: var(--s-9); }
.flow__title { font-size: clamp(24px, 2.6vw, 28px); letter-spacing: -0.03em; margin-bottom: var(--s-6); }
/* ★8단계다. 한 줄에 8칸을 밀어 넣으면 칸마다 글자가 두 자씩 끊긴다 — 4칸 2행.
 *   칸을 상자로 두르지 않는다. 위에 실선 한 가닥과 큰 번호면 «단계» 로 읽힌다. */
.flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-6); }
.fstep { padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
/* ★큰 번호는 본문 글꼴로 그린다. 고정폭은 tabular-nums 가 지키고(base.css .num),
 *   큰 모노 숫자는 «콘솔» 처럼 읽힌다 — hero.css 의 스탯 숫자와 같은 이유다. */
.fstep__no {
  display: block; font-family: var(--font); font-size: 28px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--accent);
}
.fstep h4 { font-size: 17px; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-2); }
.fstep p { font-size: 15px; color: var(--text-muted); }

/* ══ 데이터 무결성 — 가로 카드 레일 ══
 * 애플의 «Get to know» 레일. 조항 일곱을 한 줄에 눕히고 옆으로 넘긴다.
 * ★레일은 화면 폭 전체로 번지고(100vw), 첫 칸의 왼쪽 선만 .wrap 과 맞춘다.
 * ★패들(‹ ›)은 site.js 가 켠다 — 넘칠 때만. `hidden` 은 반드시 숨겨진 채여야 한다:
 *   여기서 display 를 새로 주는 순간 UA 의 [hidden] 이 지므로 아래에서 다시 명시한다. */
.rail { width: 100vw; margin-inline: calc(50% - 50vw); }
.rail__track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, (100vw - var(--wrap)) / 2);
  padding-inline: max(20px, (100vw - var(--wrap)) / 2);
  /* ★진입 애니메이션이 칸을 22px 내려 두는 동안 트랙에 세로 스크롤이 생기지 않게
   *   아래 여백을 두고 같은 만큼 되돌린다. 안 그러면 손가락이 위아래로도 걸린다. */
  padding-bottom: 28px; margin-bottom: -28px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; }
.rail__paddles {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  width: min(100% - 40px, var(--wrap)); margin: var(--s-5) auto 0;
}
.rail__paddles[hidden] { display: none; }
.rail__paddles button {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent-line); background: var(--bg-tile); color: var(--accent);
  font-size: 22px; line-height: 1; padding: 0 0 2px; cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.rail__paddles button:hover { background: var(--accent-soft); }
.rail__paddles button[disabled] { opacity: 0.35; cursor: default; }

/* 조항 한 칸 — 키 큰 타일. ★기능이 아니라 «약속» 이라 번호(01…07)를 붙인다. */
.clause {
  display: flex; flex-direction: column; min-height: 260px; padding: var(--s-6);
  border-radius: var(--r-xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.clause__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.clause__no { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.clause__tag { font-size: 13px; font-weight: 600; color: var(--accent); }
.clause h3 { font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.clause p { font-size: 15px; color: var(--text-muted); margin-top: var(--s-3); }

/* ══ 차별점 — 밝은 장, 벤토 타일 ══ */
.strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.strength {
  display: flex; flex-direction: column; min-height: 220px; padding: var(--s-6);
  border-radius: var(--r-xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.strength__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.strength__icon { display: grid; place-items: center; color: var(--accent); }
.strength .ico { width: 28px; height: 28px; }
.strength__no { font-size: 12px; font-weight: 600; color: var(--text-faint); padding-top: 4px; }
.strength h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; }
.strength p { font-size: 15px; color: var(--text-muted); margin-top: var(--s-3); }

/* 대리점과의 관계 — 넓은 타일 하나. 왼쪽 문단, 오른쪽 세 줄. */
.partner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center;
  margin-top: var(--s-4); padding: var(--s-7);
  border-radius: var(--r-2xl); background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.partner__copy h3 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.03em; text-wrap: balance; }
.partner__copy p { font-size: 17px; color: var(--text-muted); margin-top: var(--s-4); }
.partner__list li {
  display: grid; grid-template-columns: 8em 1fr; gap: var(--s-4); align-items: baseline;
  padding-block: var(--s-4); border-top: 1px solid var(--line-soft); font-size: 15px;
}
.partner__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.partner__list strong { color: var(--text-strong); font-weight: 600; }
.partner__list span { color: var(--text-muted); }

/* ══ 적용 산업 ══ ★점수 막대가 주인공이다 — 시장조사보고서 6장의 5축 3점 척도. */
.tiers { display: grid; gap: var(--s-8); }
.tier__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.tier__badge {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
}
.tier--2 .tier__badge { background: var(--accent-alt); color: #fff; }
.tier--3 .tier__badge { background: var(--bg-elevated); color: var(--text-muted); }
.tier__label { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.tier__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

.ind {
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.ind__top { display: flex; align-items: baseline; gap: 10px; }
.ind__rank { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.ind__name { font-size: 19px; flex: 1; letter-spacing: -0.025em; }
.ind__score { font-size: 20px; font-weight: 700; color: var(--accent); }
.ind__score small { font-size: 12px; font-weight: 400; color: var(--text-faint); margin-left: 1px; }

/* 5축 막대 — 축마다 세 칸(20×4). 켜진 칸 수가 곧 점수라 색이 아니라 개수로 읽힌다. */
.axes {
  display: grid; gap: 8px; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.axis { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.axis__name { font-size: 13px; color: var(--text-muted); }
.axis__bar { display: flex; gap: 4px; }
.axis__bar i { width: 20px; height: 4px; border-radius: 2px; background: var(--line-soft); }
.axis__bar i.on { background: var(--accent); }

@media (max-width: 1000px) {
  .layers { grid-template-columns: 1fr; }
  .layer__arrow { justify-self: center; transform: rotate(90deg); }
  .flow__steps, .strengths, .tier__list { grid-template-columns: repeat(2, 1fr); }
  .partner { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6); }
}
@media (max-width: 640px) {
  .flow__steps, .strengths, .tier__list { grid-template-columns: 1fr; }
  .flow__steps { gap: var(--s-5); }
  .layer, .clause, .strength, .ind { padding: var(--s-5); }
  .clause { min-height: 220px; }
  .partner { padding: var(--s-5); border-radius: var(--r-xl); }
  .partner__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ── 움직임: 흐름 단계의 윗줄이 차례로 켜진다 — 차 한 대가 지나가는 순서다.
 * ★기본 실선(border-top)은 그대로 있고 그 위에 시안 선이 덧그어진다. 스크립트가 없으면
 *   시안 선만 없을 뿐이다. */
.fstep { position: relative; }
.fstep::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) calc(var(--i, 0) * .12s);
}
.fstep.is-in::before { transform: scaleX(1); }
.fstep:nth-child(2) { --i: 1; } .fstep:nth-child(3) { --i: 2; } .fstep:nth-child(4) { --i: 3; }
.fstep:nth-child(5) { --i: 4; } .fstep:nth-child(6) { --i: 5; } .fstep:nth-child(7) { --i: 6; }
.fstep:nth-child(8) { --i: 7; }