/* ==========================================================
   platform.html 전용 스타일 (이 페이지에서만 불러옴)
   ========================================================== */
/* 단계(Sense ~ Record): 왼쪽/오른쪽 사진 + 글. 글 칸은 사진 높이에 맞춰
   위에는 큰 숫자 + 제목(한 줄), 아래 설명 · 목록 · 버튼은 사진 아랫단에 맞춤 */
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.step.rev .media{order:2}
.step .media{aspect-ratio:4/3}
.step .media.fit{background:#fff;display:flex;align-items:center;padding:3%}   /* 가로로 긴 화면 캡처: 자르지 않고 흰 판 위에 전체 표시 */
.step .media.fit img{height:auto;object-fit:contain}
.step .media.fit.dark{background:#11131A}   /* 어두운 화면 캡처는 어두운 판 */
.step-txt{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.step-head{display:flex;align-items:baseline;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.step-body{display:flex;flex-direction:column;gap:28px}
.step .no{font-size:clamp(40px,4vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--mute-2)}   /* 숫자 = 제목과 같은 크기 */
.step h2{margin:0;font-size:clamp(40px,4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}
@media (max-width:860px){.step{grid-template-columns:1fr}.step.rev .media{order:0}.step-txt{gap:28px}}
.layers3{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto;width:100%}
.layers3 > div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:center;padding:26px 28px;border-radius:16px;border:1px solid var(--line-2)}
.layers3 > div:nth-child(1){background:var(--cyan);color:var(--ink);border-color:var(--cyan);margin:0 9%}
.layers3 > div:nth-child(2){background:rgba(0,185,232,.12);border-color:rgba(0,185,232,.35);margin:0 4.5%}
.layers3 > div:nth-child(3){background:rgba(255,255,255,.04)}
.layers3 b{font-size:28px;font-weight:500;letter-spacing:-.03em}
.layers3 span{font-family:var(--kr);font-size:15px;line-height:1.6}
@media (max-width:640px){.layers3 > div{grid-template-columns:1fr;gap:6px;margin:0!important}}
.api{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:center}
.api .hub{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:28px;font-weight:500;letter-spacing:-.02em;box-shadow:0 0 0 12px rgba(0,185,232,.18)}
.api .col{display:flex;flex-direction:column;gap:10px}
.api .col div{padding:16px 18px;border-radius:12px;background:#fff;font-family:var(--kr);font-size:15px;font-weight:600;border:1px solid rgba(4,20,40,.08)}
.api .col small{display:block;font-weight:400;font-size:13px;color:rgba(4,20,40,.55);margin-top:4px}
@media (max-width:760px){.api{grid-template-columns:1fr;justify-items:center}.api .col{width:100%}}