/* 소개 페이지 본문 섹션들 — 제품, 원칙 상자, 지금(확인된 것/아직), 확장, 푸터.
   styles.css 의 변수와 리셋에 얹힌다. */

/* ---------- 01. 삼각축 (Rostore / Robotold / Robotwin) ----------
   02(하나의 중심) 섹션도 같은 .axis-row 패턴을 그대로 쓴다.
   축과 그 아래 기반은 시각적으로 같은 급으로 읽혀야 한다. */
.axis-list{ display:flex; flex-direction:column; }
.axis-row{
  display:grid; grid-template-columns:140px 1fr; gap:40px;
  padding:44px 0; border-top:1px solid var(--line);
  align-items:start;
}
.axis-row:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:720px){
  .axis-row{ grid-template-columns:1fr; gap:16px; }
}
.axis-glyph{
  font-family:var(--serif); font-size:15px; color:var(--ink-faint);
  display:flex; flex-direction:column; gap:6px;
}
.axis-glyph .han{ font-size:44px; color:var(--mint); line-height:1; }
.axis-body h3{
  font-family:var(--serif); font-size:24px; font-weight:700; margin-bottom:6px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.axis-body h3 .kr{ font-size:15px; color:var(--ink-faint); font-family:var(--sans); font-weight:500; }
.axis-body .tag{
  font-size:13px; color:var(--mint); margin-bottom:14px; font-weight:600;
}
/* 무엇이 돌아가고 무엇이 아직 계획인지를 제목 옆에서 바로 읽히게 한다.
   이 구분을 지우면 페이지가 있지도 않은 것을 있다고 말하게 된다. */
.axis-state{
  font-family:var(--sans); font-weight:600;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--line-strong); color:var(--ink-faint);
  white-space:nowrap;
}
.axis-state.live{ color:var(--mint); border-color:var(--mint); }
.axis-body p{ color:var(--ink-dim); max-width:64ch; margin-bottom:16px; }
.axis-body p b{ color:var(--ink); font-weight:600; }
.axis-goals{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;
  margin-top:10px;
}
@media (max-width:560px){ .axis-goals{ grid-template-columns:1fr; } }
.axis-goal{ border-left:2px solid var(--line-strong); padding-left:14px; }
.axis-goal .stage{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.axis-goal .desc{ font-size:14.5px; color:var(--ink-dim); }

/* ---------- 원칙 상자 (02. 데이터가 도는 길) ---------- */
.loop-section{ background:var(--bg-raised); }
.principle{
  margin-top:36px; padding:28px 30px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  font-family:var(--serif); font-size:18px; line-height:1.7;
  color:var(--ink);
  position:relative;
}
.principle .label{
  font-family:var(--sans); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--mint); display:block; margin-bottom:12px; font-weight:600;
}
.principle .chain{
  margin-top:16px; font-family:var(--sans); font-size:13px; color:var(--ink-faint);
  letter-spacing:0.02em;
}
.principle .chain b{ color:var(--plum); font-weight:600; }

/* ---------- 03. 지금 ---------- */
/* 확인된 것 / 아직 아닌 것 */
.proof-grid{
  margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:760px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-col{ background:var(--bg); padding:26px 26px 30px; }
.proof-head{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.proof-head.done{ color:var(--mint); }
.proof-head.todo{ color:var(--warm); }
.proof-list{ display:flex; flex-direction:column; gap:14px; }
.proof-list li{
  font-size:14px; line-height:1.7; color:var(--ink-dim); padding-left:16px; position:relative;
}
.proof-list li::before{
  content:''; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--mint-dim);
}
.proof-col:last-child .proof-list li::before{ background:var(--warm-dim); }
.proof-list b{ color:var(--ink); font-weight:600; }

/* ---------- footer / cta ---------- */
footer{
  padding:100px 0 60px; border-top:1px solid var(--line);
}
.cta-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(26px,3.6vw,38px);
  max-width:16ch; line-height:1.3;
}
.cta-title span{ color:var(--mint); }
.cta-row{
  margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; font-size:14.5px; font-weight:600;
  border:1px solid var(--line-strong);
  transition:border-color .2s ease, background .2s ease;
}
.btn.primary{ background:var(--mint); color:var(--on-mint); border-color:var(--mint); }
.btn.primary:hover{ background:var(--mint-hover); }
.btn.ghost:hover{ border-color:var(--ink-dim); }

.foot-mark{
  margin-top:74px; display:flex; align-items:center; gap:14px;
}
.foot-mark img{ width:44px; height:44px; border-radius:9px; border:1px solid var(--line-strong); }
.foot-motto{
  font-family:var(--serif); font-size:14px; color:var(--ink-dim); letter-spacing:0.02em;
}

.foot-meta{
  margin-top:26px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--ink-faint);
}