/* ==========================================================
   solutions.html 전용 스타일 — 핵심 기술 목록 · 가치 흐름 도식 (옛 technology.html) (이 페이지에서만 불러옴)
   ========================================================== */
.tech{border-top:1px solid var(--line-3)}
.tech-i{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:20px 32px;padding:36px 0;border-bottom:1px solid var(--line-2);align-items:start}
.tech-i h2{margin:0;font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.tech-i .one{font-family:var(--kr);font-size:17px;font-weight:600;margin-top:12px}
.tech-i .d{font-family:var(--kr);font-size:15px;line-height:1.75;color:var(--soft)}
.tech-i .root{font-family:var(--kr);font-size:14px;line-height:1.7;color:var(--mute);display:flex;flex-direction:column;gap:10px}
.tech-i .root b{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cyan-2);font-weight:500}
.tech-i .root a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.tech-i .root a:hover{color:var(--cyan-2)}
.tech-i:target,.tech-i.hl{background:linear-gradient(90deg,rgba(0,185,232,.08),transparent)}
@media (max-width:960px){.tech-i{grid-template-columns:1fr;gap:12px;padding:28px 0}}
/* 가치 흐름 — 여러 현장 데이터가 모여(왼쪽) AI 모델 · 플랫폼을 거쳐(가운데) 현실의 변화로 나감(오른쪽) */
.vf{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1.25fr) 64px minmax(0,1fr);align-items:center}
.vf h3{margin:0 0 14px;font-family:var(--kr);font-size:14px;font-weight:600;color:rgba(4,20,40,.55)}
.vf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vf li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px;background:#fff;border:1px solid rgba(4,20,40,.1);font-family:var(--kr);font-size:16px;font-weight:600}
.vf li .ico-svg{width:22px;height:22px;color:var(--cyan-ink)}
.vf .out li{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.vf .out li .ico-svg{color:var(--navy)}
.vf-arr{position:relative;height:2px;margin:0 10px;background:rgba(4,20,40,.3)}
.vf-arr::after{content:"";position:absolute;right:-2px;top:50%;width:9px;height:9px;border-top:2px solid rgba(4,20,40,.45);border-right:2px solid rgba(4,20,40,.45);transform:translateY(-50%) rotate(45deg)}
.vf-core{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;border:1px dashed rgba(4,20,40,.25)}
.vf-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:20px 22px;border-radius:12px;background:#DCE6EF}
.vf-box .ico-svg{grid-row:span 2;width:30px;height:30px;color:var(--cyan-ink)}
.vf-box b{font-family:var(--kr);font-size:20px;font-weight:600;letter-spacing:-.02em}
.vf-box span{font-family:var(--kr);font-size:14px;color:rgba(4,20,40,.62)}
.vf-box.dark{background:var(--ink);color:#fff}
.vf-box.dark .ico-svg{color:var(--cyan-2)}
.vf-box.dark span{color:rgba(255,255,255,.65)}
@media (max-width:900px){
  .vf{grid-template-columns:1fr;gap:0}
  .vf-arr{width:2px;height:36px;margin:8px auto}
  .vf-arr::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
  .vf ul{flex-direction:row;flex-wrap:wrap}
  .vf li{flex:1 1 calc(50% - 8px);padding:11px 14px;font-size:15px}
}