@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 반응형 — index.html 에 적힌 순서대로 불러온다 */
/* ============ RESPONSIVE ============ */
@media(max-width:1120px){
  .el-kw{white-space:normal}
}
@media(max-width:980px){
  .el-grid{grid-template-columns:repeat(3,1fr)}
  .ana-in{grid-template-columns:1fr;gap:var(--sp-7)}
  .read-in{grid-template-columns:1fr;gap:var(--sp-7)}
  .el-detail{grid-template-columns:1fr;text-align:center;gap:var(--sp-5)}
  .el-detail .d-viz{margin:0 auto;max-width:236px}
  .d-tags{justify-content:center}
}
@media(max-width:880px){
  .value-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  /* 좁은 화면 : 메뉴는 Energy 하나만 남겨 헤더가 로고만 남지 않게.
     혼자 남으면 'Energy' 만으로는 무엇을 하는 곳인지 안 읽힌다 → '내 기운 읽기' 로 바꿔 보여 준다 */
  .nav-menu a:not(.nav-key){display:none}
  .nav-key .nk-d{display:none}.nav-key .nk-m{display:inline}
  .el-head-row{flex-direction:column;align-items:flex-start;gap:var(--sp-6)}
  .el-specimen{align-self:center}
}
@media(max-width:780px){
  .el-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .hero{padding:var(--sp-8) 0 var(--sp-8)}
  .band,.elements,.analysis,.curation{padding:var(--sp-8) 0}
  .stage{height:380px}
}
@media(max-width:560px){
  .el-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  /* 1단에서 4:5 플레이트가 과도해지므로 좌우 배치로 전환 */
  .el-card{display:grid;grid-template-columns:112px 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-4)}
  .el-viz{margin-bottom:0;aspect-ratio:4/5}
  .el-kw{white-space:normal}
  .el-detail{padding:var(--sp-5) var(--sp-5)}
  .el-detail .d-viz{max-width:210px;margin:0 auto}
  .foot-nav{gap:var(--sp-6)}
  .foot-in{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .bar-fill{transition:none}
}