/* ==========================================================
   index.html 전용 스타일 (이 페이지에서만 불러옴)
   ========================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-photo{position:absolute;inset:0;background:url(../../img/photos/hero-city.jpg) center bottom/cover no-repeat;opacity:.28;mask-image:linear-gradient(to bottom,transparent 0%,#000 55%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 55%)}
.hero-in{position:relative;padding-top:clamp(72px,10vw,140px);padding-bottom:56px;display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.since{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(237,238,242,.6)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,185,232,.2)}
.hero-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;align-items:end}
.hero-copy{display:flex;flex-direction:column;gap:28px;max-width:520px}
.hero-copy p{margin:0;font-family:var(--kr);font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:rgba(237,238,242,.8)}
.pipe{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(7,32,61,.7);overflow:hidden;backdrop-filter:blur(6px)}
.pipe-h{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(237,238,242,.5)}
.pipe-h em{font-style:normal;color:var(--green)}
.prow{display:grid;grid-template-columns:40px 120px minmax(0,1fr);gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .5s}
.prow:last-child{border-bottom:0}
.prow .n{font-family:var(--mono);font-size:11px;color:rgba(237,238,242,.35)}
.prow .en{font-size:15px;font-weight:500;color:rgba(237,238,242,.55)}
.prow .d{font-family:var(--kr);font-size:13px;color:rgba(237,238,242,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow.on{background:rgba(0,185,232,.16)}
.prow.on .n,.prow.on .d{color:var(--cyan-2)}
.prow.on .en{color:#fff}
a.prow:hover{background:rgba(0,185,232,.1)}
/* 플랫폼 3계층 — 왼쪽에 판 3장을 쌓은 그림, 오른쪽에 계층별 설명 (판에 마우스를 올리면 살짝 떠오름) */
.stack3{display:flex;flex-direction:column;padding-top:8px}
.lv{display:grid;grid-template-columns:clamp(160px,20vw,260px) minmax(0,.8fr) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);align-items:center}
.lv + .lv{margin-top:clamp(-52px,-3.6vw,-30px)}
.lv:nth-child(1){position:relative;z-index:3}.lv:nth-child(2){position:relative;z-index:2}
.slab{display:block;width:100%;height:auto;transition:transform .3s}
.lv:hover .slab{transform:translateY(-8px)}
.lv3 .tp{fill:#00B9E8}.lv3 .s1{fill:#0098C2}.lv3 .s2{fill:#007BA0}
.lv2 .tp{fill:#123E6B}.lv2 .s1{fill:#0B2E52}.lv2 .s2{fill:#072340}
.lv1 .tp{fill:#C7D1DD}.lv1 .s1{fill:#AAB8C8}.lv1 .s2{fill:#93A3B6}
.lv-t,.lv-d{padding:18px 0;border-top:1px solid rgba(4,20,40,.14)}
.lv-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lv-t b{font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.03em}
.lv-t small{font-family:var(--kr);font-size:14px;font-weight:600;color:var(--cyan-ink)}
.lv-d{display:flex;flex-direction:column;gap:4px;font-family:var(--kr)}
.lv-d b{font-size:17px;font-weight:600}
.lv-d span{font-size:15px;color:rgba(4,20,40,.58)}
@media (max-width:760px){
  .stack3{gap:18px}
  .lv{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:0 16px}
  .lv + .lv{margin-top:0}
  .slab{grid-row:1 / span 2;align-self:center}
  .lv-t{border-top:0;padding:0;align-self:end}
  .lv-t b{font-size:24px}
  .lv-d{grid-column:2;border-top:0;padding:2px 0 0;align-self:start}
  .lv-d b{font-size:15px}
  .lv-d span{font-size:13.5px}
}
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px;align-items:start}
.sol-list{border-top:1px solid var(--line-2)}
.sol-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto 20px;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-2);color:rgba(237,238,242,.5)}
.sol-item.on,.sol-item:hover{color:#fff}
.sol-item .n{font-family:var(--mono);font-size:12px;color:rgba(237,238,242,.4)}
.sol-item .en{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.02em}
.sol-item .ko{font-family:var(--kr);font-size:14px;color:var(--mute)}
.sol-item .ar{opacity:0;transition:.2s;color:var(--cyan-2)}
.sol-item.on .ar{opacity:1}
.sol-item.on .n{color:var(--cyan-2)}
.sol-view{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.sol-img{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--navy-3);border:1px solid rgba(255,255,255,.08);display:block}
.sol-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sol-img:hover img{transform:scale(1.03)}
.sol-img .tagbox{position:absolute;right:18px;bottom:16px;font-family:var(--mono);font-size:11px;color:var(--cyan-2);background:rgba(4,20,40,.7);padding:5px 9px;border-radius:6px}
.eco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;font-family:var(--kr)}
.eco a{display:block;padding:20px 0;border-top:1px solid var(--line-2)}
.eco b{display:block;font-size:17px;font-weight:600}
.eco span{display:block;font-size:14px;color:var(--mute);margin-top:6px}
@media (max-width:640px){
  .prow{grid-template-columns:28px minmax(0,1fr);row-gap:2px}
  .prow .d{grid-column:2;white-space:normal;overflow:visible}   /* 설명을 이름 아래 줄로 — 말줄임 없이 */
  .sol-view{position:static}
  .sol-item{grid-template-columns:32px minmax(0,1fr) 20px}
  .sol-item .ko{display:none}
  .eco{grid-template-columns:1fr}
}
/* 히어로 오른쪽 빈 공간 — 뇌 모양 점 구름 (assets/js/brain.js). 글자는 그 위에 */
.hero-brain{position:absolute;top:clamp(24px,4vw,64px);right:clamp(40px,9vw,180px);width:clamp(320px,30vw,470px);aspect-ratio:1/1;pointer-events:none;z-index:0}
.hero-in > :not(.hero-brain){position:relative;z-index:1}
@media (max-width:1100px){.hero-brain{display:none}}
/* 첫 화면 아래 '함께한 기관 · 기업' 로고 띠 — 옆으로 천천히 흐름, 마우스를 올리면 멈춤 */
.logos-band{border-bottom:1px solid var(--line);background:var(--navy)}
.logos-in{display:flex;align-items:center;gap:28px;padding-top:24px;padding-bottom:24px}
.logos-in .lb{flex:none;font-family:var(--kr);font-size:14px;font-weight:600;color:var(--soft)}
.logo-row{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;width:max-content;animation:logo-roll 48s linear infinite}
.logo-track .set{display:flex;gap:10px;padding-right:10px}   /* 같은 묶음 2개 → -50% 이동 시 이음새 없이 반복 */
.logo-row:hover .logo-track{animation-play-state:paused}
.logo-row .plogo{flex:none;display:flex;align-items:center;justify-content:center;width:132px;height:52px;padding:6px 10px;border-radius:8px;background:#fff}
.logo-row img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.logo-row .plogo:hover img{filter:none;opacity:1}
@keyframes logo-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}
@media (max-width:1100px){.logos-in{flex-wrap:wrap;gap:14px 20px}.logo-row{flex-basis:100%;order:3}}
@media (max-width:560px){.logo-row .plogo{width:104px;height:44px}}