/* =========================================================
   ELEA 1280 laptop final pass — 1201px to 1366px only.
   Tablet/mobile (<=1200px) and standard desktop (>=1367px)
   keep their existing layout rules.
   ========================================================= */
.tech-static-details{display:none}
.loop-visual-slot{display:contents}

@media (min-width:1201px) and (max-width:1366px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }
  body>main,.main-page,.elea-shared-footer{max-width:100%;overflow-x:clip}
  img,video,svg,canvas{max-width:100%}

  .section-shell,.page-shell,.wrap,.elm-inner,
  .overview-grid>*,.different-grid>*,.meet-grid>*,.data-grid>*,
  .technology-columns>*,.learning-grid>*,.impact-grid>*,
  .intro-grid>*,.metrics-grid>*,.language-grid>*,.elm-grid>*,.loop-grid>*,
  .process>*,.human-cards>*,.interaction-content>*,
  .textbook-grid>*,.flow-top>*,.assess-cards>*,.report-cards>*,.mini-flow>*{
    min-width:0!important;
  }

  /* MAIN / HERO — override the global PC -500px lift at 1280.
     Keep the complete title block below the 96px fixed header. */
  body.main-page .hero-inner{
    width:calc(100% - 96px)!important;
    max-width:1270px!important;
    margin:0 auto!important;
    padding:96px 0 48px!important;
    align-items:center!important;
  }
  html body.main-page .hero .hero-copy{
    width:min(720px,68vw)!important;
    max-width:calc(100% - 48px)!important;
    margin-top:0!important;
  }
  html body.main-page .hero .hero-copy h1{
    font-size:clamp(50px,4.15vw,56px)!important;
    line-height:1.22!important;
    letter-spacing:-1.2px!important;
    white-space:normal!important;
  }
  html body.main-page .hero .hero-copy p{
    margin-top:16px!important;
    font-size:clamp(22px,1.9vw,25px)!important;
    line-height:1.5!important;
    letter-spacing:-.2px!important;
  }

  /* MAIN / OVERVIEW — replace colliding absolute positioning with two tracks. */
  body.main-page .overview-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 520px!important;
    gap:32px!important;
    align-items:center!important;
  }
  body.main-page .overview-copy{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }
  body.main-page .overview-copy h2{
    font-size:clamp(36px,3.2vw,42px)!important;
    overflow-wrap:anywhere;
  }
  body.main-page .elm-orbit{
    position:relative!important;
    inset:auto!important;
    width:520px!important;
    height:520px!important;
    justify-self:end!important;
  }

  /* MAIN / DIFFERENT — the desktop absolute coordinates overlap at 1280. */
  body.main-page .different{
    height:auto!important;
    min-height:0!important;
    padding:90px 48px 104px!important;
  }
  body.main-page .different .section-shell{
    width:100%!important;
    max-width:1270px!important;
  }
  body.main-page .different-grid{
    display:grid!important;
    grid-template-columns:300px minmax(0,1fr)!important;
    column-gap:48px!important;
    align-items:start!important;
  }
  body.main-page .different-cards{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:52px 28px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  body.main-page .diff-card,
  body.main-page .card-data,
  body.main-page .card-elm,
  body.main-page .card-human{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
  }
  body.main-page .diff-card:last-child{
    grid-column:1/-1!important;
    width:calc((100% - 28px)/2)!important;
    justify-self:center!important;
  }
  body.main-page .diff-card img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:420/486!important;
    object-fit:cover!important;
  }

  /* KOR + ENG / DIFFERENT — reserve the real width of the first headline line. */
  html[lang="ko"] body.main-page .different-grid,
  html[lang="en"] body.main-page .different-grid{
    grid-template-columns:350px minmax(0,1fr)!important;
    column-gap:44px!important;
  }
  html[lang="ko"] body.main-page .different-title h2,
  html[lang="en"] body.main-page .different-title h2{
    font-size:40px!important;
    line-height:1.42!important;
    letter-spacing:-1.4px!important;
  }

  /* KOR + ENG / DATA MOAT CTA — keep the first metric from touching View More. */
  html[lang="ko"] body.main-page .data-moat-more,
  html[lang="en"] body.main-page .data-moat-more{
    margin-bottom:32px!important;
  }

  /* MAIN / MEET ELEA — reserve a stable video track. */
  body.main-page .meet-grid{
    grid-template-columns:minmax(320px,360px) minmax(0,1fr)!important;
    gap:48px!important;
  }
  body.main-page .video-card,
  body.main-page .video-card.meet-video-trigger{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1080/611!important;
    margin:0!important;
  }
  body.main-page .video-card>img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* MAIN / LEARNING — equal copy space and a common artwork baseline. */
  body.main-page .learning-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:480px!important;
    min-height:480px!important;
    padding:26px 24px 20px!important;
  }
  body.main-page .learning-card:first-child,
  body.main-page .learning-card:last-child{padding-left:24px!important;padding-right:24px!important}
  body.main-page .learning-card h3{font-size:26px!important;line-height:1.25!important}
  body.main-page .learning-card p{font-size:15px!important;line-height:1.5!important}
  body.main-page .learning-card img{
    width:100%!important;
    height:205px!important;
    max-height:205px!important;
    margin-top:auto!important;
    object-fit:contain!important;
    align-self:center!important;
  }

  /* Keep long section heads and CTAs from entering one another. */
  body.main-page .technology-head,
  body.main-page .learning-head{gap:32px!important}
  body.main-page .technology-head>*,
  body.main-page .learning-head>*{min-width:0!important}

  /* KOR + ENG / LANGUAGE TO DIGITAL — one shared baseline for icon, title and body. */
  html[lang="ko"] body.main-page .shared-language-tech .technology-panel,
  html[lang="en"] body.main-page .shared-language-tech .technology-panel{
    height:500px!important;
    min-height:500px!important;
  }
  html[lang="ko"] body.main-page .shared-language-tech .technology-item,
  html[lang="en"] body.main-page .shared-language-tech .technology-item{
    display:grid!important;
    grid-template-rows:58px 92px 90px!important;
    row-gap:12px!important;
    align-content:center!important;
    justify-items:center!important;
    padding:48px 24px!important;
    overflow:hidden!important;
  }
  html[lang="ko"] body.main-page .shared-language-tech .technology-icon-glass,
  html[lang="en"] body.main-page .shared-language-tech .technology-icon-glass{
    grid-row:1!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
  }
  html[lang="ko"] body.main-page .shared-language-tech .technology-item h3,
  html[lang="en"] body.main-page .shared-language-tech .technology-item h3{
    grid-row:2!important;
    width:100%!important;
    min-height:92px!important;
    margin:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    font-size:30px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  html[lang="ko"] body.main-page .shared-language-tech .technology-item p,
  html[lang="en"] body.main-page .shared-language-tech .technology-item p{
    grid-row:3!important;
    width:100%!important;
    max-width:350px!important;
    min-height:90px!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.55!important;
    white-space:normal!important;
  }

  /* DATA MOAT / LOOP — fit the 670px desktop diagram into its 520px track. */
  body:has(.intro-grid) .loop-grid{
    grid-template-columns:520px minmax(0,1fr)!important;
    gap:56px!important;
    align-items:center!important;
  }
  body:has(.intro-grid) .loop-visual{
    width:670px!important;
    height:670px!important;
    max-width:none!important;
    transform:scale(.776)!important;
    transform-origin:left center!important;
    margin:-75px -150px -75px 0!important;
  }

  /* DATA LOOP / KOR + ENG — the right node must end before the copy column. */
  body:has(.intro-grid) .loop-grid{
    grid-template-columns:430px minmax(0,1fr)!important;
    gap:96px!important;
  }
  body:has(.intro-grid) .loop-visual-slot{
    display:block!important;
    position:relative!important;
    width:430px!important;
    height:430px!important;
    overflow:hidden!important;
    overflow:clip!important;
    contain:layout paint!important;
  }
  body:has(.intro-grid) .loop-visual-slot>.loop-visual{
    position:absolute!important;
    left:10px!important;
    top:10px!important;
    width:620px!important;
    height:620px!important;
    max-width:none!important;
    transform:scale(.66)!important;
    transform-origin:left top!important;
    margin:0!important;
  }
  body:has(.intro-grid) .loop-copy{
    min-width:0!important;
    padding-left:0!important;
  }
  body:has(.intro-grid) .loop-copy h2{
    font-size:40px!important;
    line-height:1.3!important;
  }

  /* DIGITAL HUMAN / ELM — cancel the ENG-only desktop shift at 1280. */
  body:has(.tech-section) .elm-section .elm-feature-connectors,
  html[lang="en"] body:has(.tech-section) .elm-section .elm-feature-connectors,
  body:has(.tech-section) .elm-section .elm-visual-viewport,
  html[lang="en"] body:has(.tech-section) .elm-section .elm-visual-viewport{
    transform:none!important;
  }
  body:has(.tech-section) .elm-copy{width:560px!important;max-width:52%!important}
  body:has(.tech-section) .feature-list{width:540px!important;max-width:50%!important}
  body:has(.tech-section) .elm-visual-viewport{
    right:28px!important;
    bottom:118px!important;
    width:500px!important;
    height:650px!important;
  }
  html[lang="en"] body:has(.tech-section) .elm-model-title-line{
    display:inline!important;
    white-space:normal!important;
  }

  /* KOR / ELEA TECHNOLOGY — smaller diagram plus the missing detail copy. */
  html[lang="ko"] body:has(.tech-section) .tech-static-visual{
    width:780px!important;
    max-width:72vw!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-visual img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-details{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:20px!important;
    width:min(100%,1000px)!important;
    margin:32px auto 0!important;
    padding-top:24px!important;
    border-top:1px solid #d9dee2!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-detail{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    min-width:0!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-detail>span{
    color:#30cacb!important;
    font-size:18px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-detail strong{
    display:block!important;
    font-size:18px!important;
    line-height:1.35!important;
  }
  html[lang="ko"] body:has(.tech-section) .tech-static-detail p{
    margin:6px 0 0!important;
    color:#71767e!important;
    font-size:15px!important;
    line-height:1.5!important;
  }

  /* ENG / ELEA TECHNOLOGY — match the Korean tablet scale and detail rhythm. */
  html[lang="en"] body:has(.tech-section) .tech-pc.tech-pc-static-eng{
    width:780px!important;
    max-width:72vw!important;
    height:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-pc.tech-pc-static-eng>img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile{
    display:block!important;
    width:min(100%,1000px)!important;
    margin:32px auto 0!important;
    padding-top:24px!important;
    border-top:1px solid #d9dee2!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-visual{
    display:none!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-details{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:20px!important;
    width:100%!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-detail{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    min-width:0!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-detail>span{
    color:#30cacb!important;
    font-size:18px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-detail strong{
    display:block!important;
    font-size:18px!important;
    line-height:1.35!important;
  }
  html[lang="en"] body:has(.tech-section) .tech-mobile-detail p{
    margin:6px 0 0!important;
    color:#71767e!important;
    font-size:15px!important;
    line-height:1.5!important;
  }

  /* KOR + ENG / ELM — stable two-column bounds; decorative lines are removed here. */
  html[lang="ko"] body:has(.tech-section) .elm-section,
  html[lang="en"] body:has(.tech-section) .elm-section{
    height:980px!important;
    min-height:980px!important;
    overflow:hidden!important;
  }
  html[lang="ko"] body:has(.tech-section) .elm-inner,
  html[lang="en"] body:has(.tech-section) .elm-inner{
    width:100%!important;
    max-width:1366px!important;
    height:100%!important;
    margin:0 auto!important;
    padding:76px 48px 64px!important;
  }
  html[lang="ko"] body:has(.tech-section) .elm-copy,
  html[lang="en"] body:has(.tech-section) .elm-copy{
    width:560px!important;
    max-width:49%!important;
  }
  html[lang="ko"] body:has(.tech-section) .feature-list,
  html[lang="en"] body:has(.tech-section) .feature-list{
    width:520px!important;
    max-width:47%!important;
    gap:16px!important;
    margin-top:30px!important;
  }
  html[lang="ko"] body:has(.tech-section) .feature,
  html[lang="en"] body:has(.tech-section) .feature{
    padding:14px 22px!important;
  }
  html[lang="ko"] body:has(.tech-section) .elm-feature-connectors,
  html[lang="en"] body:has(.tech-section) .elm-feature-connectors{
    display:none!important;
  }
  html[lang="ko"] body:has(.tech-section) .elm-visual-viewport,
  html[lang="en"] body:has(.tech-section) .elm-visual-viewport{
    position:absolute!important;
    left:auto!important;
    right:48px!important;
    top:auto!important;
    bottom:54px!important;
    width:440px!important;
    height:590px!important;
    overflow:hidden!important;
    transform:none!important;
  }
  html[lang="ko"] body:has(.tech-section) .elm-visual-viewport .elm-source-visual,
  html[lang="en"] body:has(.tech-section) .elm-visual-viewport .elm-source-visual{
    width:700px!important;
    height:800px!important;
    transform:translate(-50%,-50%) scale(.64)!important;
  }

  /* DIGITAL HUMAN / ASSESSMENT — four equal cards without arrow tracks. */
  body:has(.tech-section) .process{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
    align-items:stretch!important;
  }
  body:has(.tech-section) .process .arrow{display:none!important}
  body:has(.tech-section) .process-card{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-width:0!important;
    padding:16px 16px 24px!important;
  }
  body:has(.tech-section) .process-card .shot{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    margin-bottom:22px!important;
  }
  body:has(.tech-section) .process-card h3{font-size:22px!important;line-height:1.3!important}
  body:has(.tech-section) .process-card p{font-size:16px!important;line-height:1.5!important}

  /* DIGITAL HUMAN / INTERACTION — remove absolute copy/image collision. */
  body:has(.tech-section) .interaction-box{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body:has(.tech-section) .tabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
  }
  body:has(.tech-section) .tab{min-width:0!important;font-size:16px!important;padding:0 10px!important}
  body:has(.tech-section) .interaction-content{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important;
    gap:36px!important;
    align-items:center!important;
    min-height:500px!important;
    padding:40px!important;
  }
  body:has(.tech-section) .interaction-copy{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    margin:0!important;
  }
  body:has(.tech-section) .interaction-copy h3{font-size:28px!important;line-height:1.3!important}
  body:has(.tech-section) .interaction-copy p{font-size:16px!important;line-height:1.55!important}
  body:has(.tech-section) .interaction-environment{width:100%!important;max-width:100%!important}
  body:has(.tech-section) .environment-group li{white-space:normal!important}
  body:has(.tech-section) .interaction-img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:807/511!important;
    margin:0!important;
    border-radius:26px!important;
  }

  /* LEARNING EXPERIENCE — preserve two columns but give artwork real space. */
  body:has(.textbook-exp) .headline{font-size:45px!important;overflow-wrap:anywhere}
  body:has(.textbook-exp) .textbook-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,680px)!important;
    gap:40px!important;
    align-items:start!important;
  }
  body:has(.textbook-exp) .textbook-exp .loop-stage{
    width:680px!important;
    max-width:100%!important;
    margin:0 auto!important;
    transform:none!important;
    transform-origin:center!important;
    margin-bottom:0!important;
  }
  body:has(.textbook-exp) .flow-top{
    grid-template-columns:minmax(0,1fr) minmax(0,620px)!important;
    gap:40px!important;
  }
  body:has(.textbook-exp) .flow-image{
    width:100%!important;
    height:auto!important;
    aspect-ratio:807/511!important;
  }
  body:has(.textbook-exp) .assess-card,
  body:has(.textbook-exp) .report-card{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-width:0!important;
  }
  body:has(.textbook-exp) .assess-card p,
  body:has(.textbook-exp) .report-card p{overflow-wrap:anywhere}
  body:has(.textbook-exp) .report-card .visual{height:380px!important}
  body:has(.textbook-exp) .mini-step{min-width:0!important;padding:10px 16px!important}
  body:has(.textbook-exp) .mini-step strong,
  body:has(.textbook-exp) .mini-step span{overflow-wrap:anywhere}

  /* KOR + ENG / TEXTBOOK EXPERIENCE — shrink the complete right composition together. */
  html[lang="ko"] body:has(.textbook-exp) .textbook-grid,
  html[lang="en"] body:has(.textbook-exp) .textbook-grid{
    grid-template-columns:minmax(0,1fr) 560px!important;
    gap:56px!important;
  }
  html[lang="ko"] body:has(.textbook-exp) .textbook-exp .loop-stage,
  html[lang="en"] body:has(.textbook-exp) .textbook-exp .loop-stage{
    width:806px!important;
    max-width:none!important;
    height:718px!important;
    zoom:.68;
    transform:none!important;
    margin:0 auto!important;
  }
  html[lang="ko"] body:has(.textbook-exp) .textbook-exp .headline{
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
}