/* ELEA full mobile QC — 2026-08-11
   Loaded last on all pages. Desktop/tablet layouts stay untouched. */
@media (max-width:760px){
  :root{--mobile-gutter:20px;--mobile-section-y:64px}
  html{overflow-x:hidden;scroll-padding-top:72px}
  body{width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
  img,video,svg{max-width:100%}
  h1,h2,h3,h4,p{word-break:keep-all;overflow-wrap:break-word}
  section{scroll-margin-top:72px}

  /* === Shared mobile header: Main is the reference for every page === */
  .site-header{height:72px!important;--elea-header-h:72px!important;overflow:visible!important}
  .site-header .header-inner{height:72px!important;padding-inline:20px!important;position:relative;z-index:5}
  .site-header .brand{min-width:82px!important;z-index:6}
  .site-header .brand img{width:82px!important;max-height:32px!important}
  .site-header .header-tools{gap:14px!important;z-index:6}
  .site-header .language-switch{font-size:13px!important;gap:6px!important}
  .site-header .mobile-toggle{
    display:block!important;position:relative!important;width:30px!important;height:28px!important;flex:0 0 30px!important;
    border:0!important;background:transparent!important;padding:0!important;color:inherit!important;z-index:7!important;
  }
  .site-header .mobile-toggle span{
    display:block!important;position:absolute!important;left:2px!important;width:26px!important;height:2px!important;
    border-radius:999px!important;background:currentColor!important;transition:transform .28s cubic-bezier(.22,1,.36,1),top .28s cubic-bezier(.22,1,.36,1),opacity .2s ease!important;
  }
  .site-header .mobile-toggle span:nth-child(1){top:6px!important}
  .site-header .mobile-toggle span:nth-child(2){top:13px!important}
  .site-header .mobile-toggle span:nth-child(3){top:20px!important}
  .site-header.menu-open .mobile-toggle span:nth-child(1){top:13px!important;transform:rotate(45deg)!important}
  .site-header.menu-open .mobile-toggle span:nth-child(2){opacity:0!important;transform:scaleX(.25)!important}
  .site-header.menu-open .mobile-toggle span:nth-child(3){top:13px!important;transform:rotate(-45deg)!important}

  .site-header .gnb{
    display:flex!important;position:fixed!important;inset:0!important;width:100%!important;height:100svh!important;max-height:none!important;
    padding:118px 24px max(42px,env(safe-area-inset-bottom))!important;margin:0!important;
    flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;
    background:rgba(5,20,31,.985)!important;color:#fff!important;border:0!important;box-shadow:none!important;
    backdrop-filter:blur(22px) saturate(120%)!important;-webkit-backdrop-filter:blur(22px) saturate(120%)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-12px)!important;
    transition:opacity .28s ease,transform .36s cubic-bezier(.22,1,.36,1),visibility .28s!important;z-index:4!important;overflow-y:auto!important;
  }
  .site-header .gnb.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}
  .site-header .gnb a{
    width:100%!important;padding:18px 0 19px!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
    color:#fff!important;font-size:clamp(25px,7.2vw,31px)!important;line-height:1.25!important;font-weight:600!important;letter-spacing:-.02em!important;
  }
  .site-header .gnb a:first-child{border-top:1px solid rgba(255,255,255,.12)!important}
  .site-header .gnb a::after{left:0!important;right:100%!important;bottom:-1px!important;height:2px!important;background:#30cacb!important}
  .site-header .gnb a.is-active{font-weight:800!important;color:#8fe8e9!important}
  .site-header .gnb a.is-active::after{right:0!important}
  .site-header.menu-open,.site-header.is-light.menu-open,.site-header.is-scrolled.menu-open{background:transparent!important;color:#fff!important;box-shadow:none!important;backdrop-filter:none!important}
  .site-header.menu-open .brand img{filter:brightness(0) invert(1)}
  .site-header.menu-open .language-switch .is-disabled{color:rgba(255,255,255,.45)!important}
  .site-header.menu-open .language-switch .lang-separator{color:rgba(255,255,255,.45)!important}
  .shared-header-spacer{height:72px!important}

  /* === General type / spacing guardrails === */
  .section{padding:var(--mobile-section-y) var(--mobile-gutter)!important}
  .wrap,.page-shell{width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .heading-block{margin-bottom:36px!important}
  .eyebrow{font-size:14px!important;line-height:1.4!important;margin-bottom:10px!important}
  .headline{font-size:clamp(30px,8.4vw,34px)!important;line-height:1.32!important;letter-spacing:-.035em!important}
  .desc{font-size:16px!important;line-height:1.65!important;margin-top:20px!important;color:#71767e}
  .desc br{display:none}

  /* === Main: sections not already manually QC'd from screenshots === */
  body:has(.hero) .hero{min-height:640px!important;height:100svh!important;max-height:760px!important}
  body:has(.hero) .hero-inner{padding:116px 20px 72px!important;align-items:flex-end!important}
  body:has(.hero) .hero-copy{width:100%!important;max-width:100%!important}
  body:has(.hero) .hero-copy h1{font-size:clamp(29px,8.2vw,35px)!important;line-height:1.28!important;white-space:normal!important}
  body:has(.hero) .hero-copy p{font-size:16px!important;line-height:1.55!important;margin-top:14px!important}
  body:has(.hero) .scroll-cue{display:none!important}

  .overview{height:auto!important;min-height:0!important;padding:72px 0!important;overflow:hidden}
  .overview .section-shell{width:calc(100% - 40px)!important;margin:0 auto!important}
  .overview-grid{height:auto!important;display:flex!important;flex-direction:column!important;gap:32px!important}
  .overview-copy{position:static!important;padding:0!important;width:100%!important}
  .overview-copy h2{font-size:30px!important;line-height:1.36!important}
  .elm-orbit{position:relative!important;inset:auto!important;width:min(340px,92vw)!important;height:auto!important;aspect-ratio:1!important;margin:2px auto 0!important;align-self:center!important}
  .elm-core span{font-size:clamp(31px,10vw,44px)!important}

  .different{min-height:0!important;padding:72px 0!important}
  .different .section-shell{width:calc(100% - 40px)!important;margin:0 auto!important}
  .different-grid{display:block!important}
  .different-title{position:static!important;padding:0!important}
  .different-title h2{font-size:30px!important;line-height:1.36!important}
  .different-cards{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:46px!important;margin-top:44px!important}
  .diff-card,.card-data,.card-elm,.card-human{position:static!important;inset:auto!important;width:100%!important}
  .diff-card img{width:100%!important;height:auto!important;aspect-ratio:4/4.35!important;object-fit:cover!important;border-radius:16px!important}
  .diff-card h3{font-size:27px!important;line-height:1.3!important;margin:20px 0 8px!important}
  .diff-card p{font-size:15px!important;line-height:1.6!important}

  .meet{height:auto!important;min-height:0!important;padding:72px 0!important}
  .meet .section-shell{width:calc(100% - 40px)!important;margin:0 auto!important}
  .meet-grid{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:34px!important;padding:0!important}
  .meet-copy h2{font-size:30px!important;line-height:1.35!important;margin-bottom:20px!important}
  .meet-copy>p:not(.eyebrow){font-size:16px!important;line-height:1.65!important}
  .meet-copy .under-link{margin-top:28px!important}
  .video-card{width:100%!important;height:auto!important;aspect-ratio:16/9!important;border-radius:16px!important}

  .impact{padding:72px 0!important}
  .impact .section-shell{width:calc(100% - 40px)!important;margin:0 auto!important}
  .impact-head h2{font-size:30px!important;line-height:1.35!important}
  .impact-head>p:last-child{font-size:16px!important;line-height:1.6!important;margin-top:20px!important}
  .impact-grid{display:grid!important;grid-template-columns:1fr!important;gap:20px!important;margin-top:36px!important}
  .impact-card{min-height:0!important;padding:24px 20px!important;border-radius:18px!important}
  .impact-card h3{font-size:21px!important;margin:6px 0 14px!important}
  .impact-card p{font-size:14px!important;line-height:1.6!important;margin-bottom:18px!important}
  .impact-card img{height:auto!important;aspect-ratio:16/10!important;border-radius:14px!important}

  .contact{height:auto!important;min-height:560px!important;padding:72px 0!important}
  .contact-inner{width:calc(100% - 40px)!important;max-width:none!important;padding:0!important;margin:auto!important}
  .contact-inner h2{font-size:34px!important;line-height:1.28!important}
  .contact-inner>p:not(.eyebrow){font-size:15px!important;line-height:1.65!important;margin-top:18px!important}
  .mail-link{width:100%!important;margin-top:38px!important;padding:18px 0!important;font-size:16px!important}

  /* === Data Moat page: mobile reflow / no horizontal overflow === */
  body:has(.intro.section-pad) .page-shell{width:calc(100% - 40px)!important}
  .intro.section-pad{padding:48px 0 64px!important}
  .intro-grid{display:flex!important;flex-direction:column!important;gap:34px!important}
  .intro-copy{order:1!important;min-height:0!important;gap:36px!important}
  .intro-media{order:2!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:16px!important;overflow:hidden!important}
  .intro-top h1{font-size:32px!important;line-height:1.35!important}
  .view-more{margin-top:28px!important}
  .metrics-grid{display:grid!important;grid-template-columns:1fr!important;gap:0!important;border-top:1px solid #d0d6e1!important}
  .metric-card,.metric-a,.metric-b,.metric-c{min-height:0!important;height:auto!important;padding:24px 0!important;border-bottom:1px solid #d0d6e1!important;border-left:0!important;border-right:0!important;display:grid!important;grid-template-columns:46px 1fr!important;column-gap:14px!important;align-items:center!important}
  .metric-card img{grid-column:1!important;grid-row:1 / span 2!important;width:40px!important;height:40px!important;margin:0!important}
  .metric-card strong{grid-column:2!important;font-size:28px!important;line-height:1.2!important}
  .metric-card p{grid-column:2!important;font-size:15px!important;margin:6px 0 0!important}
  .why-child{padding:64px 0!important}
  .why-inner{gap:36px!important}
  .why-tab{padding:24px 20px!important;border-radius:18px!important}
  .language-data.section-pad,.data-elm.section-pad,.loop-section.section-pad{padding:64px 0!important}
  .language-grid,.elm-grid,.loop-grid{gap:38px!important}
  .data-row{padding:25px 0!important}
  .data-row>strong{font-size:38px!important;line-height:1.15!important}
  .accordion-item button{padding:16px 8px!important}
  .elm-image{width:100%!important;height:auto!important;aspect-ratio:16/10!important}
  .loop-visual{max-width:350px!important;margin-inline:auto!important}

  /* === Digital Human: keep the carefully tuned ELM artwork position, optimize surrounding layout only === */
  .dh-intro .toprow{display:block!important;margin-bottom:36px!important}
  .dh-intro .toprow .view-link{margin-top:20px!important}
  .hero-three{height:auto!important;border-radius:20px!important}
  .three-cols{grid-template-columns:1fr!important}
  .three-col{min-height:200px!important;padding:30px 20px!important;border-right:0!important;border-bottom:1px solid rgba(208,214,225,.55)!important}
  .three-col:last-child{border-bottom:0!important}
  .three-col h3{font-size:25px!important}
  .three-col p{font-size:14px!important}

  .tech-section .tech-pc{display:none!important}
  .tech-section .tech-mobile{display:block!important;margin:0 auto!important}
  .tech-section .tech-mobile-visual,.tech-section .tech-mobile-details{margin-left:auto!important;margin-right:auto!important}

  .elm-section{height:auto!important;min-height:0!important;padding:64px 20px 56px!important;overflow:hidden!important}
  .elm-inner{height:auto!important;padding:0!important;width:100%!important;max-width:none!important}
  .elm-copy{width:100%!important}
  .feature-list{width:100%!important;margin-top:34px!important;gap:14px!important}
  .feature{padding:16px 18px!important;border-radius:14px!important;gap:12px!important}
  .feature img{width:38px!important;height:38px!important}
  .feature h4{font-size:18px!important}
  .feature p{font-size:14px!important;line-height:1.5!important}
  /* Do not alter .elm-rise-* coordinates/core positioning; only keep its wrapper in the viewport. */
  .elm-visual-viewport{width:100%!important;max-width:100%!important;margin:28px auto 0!important;position:relative!important;left:auto!important;right:auto!important}
  .elm-feature-connectors{display:none!important}

  .process{grid-template-columns:1fr!important;gap:18px!important}
  .process .arrow{display:none!important}
  .process-card{padding:16px 16px 24px!important;border-radius:16px!important}
  .process-card .shot{height:auto!important;aspect-ratio:16/10!important;margin-bottom:20px!important}
  .process-card h3{font-size:23px!important}
  .process-card p{font-size:15px!important}
  .human-cards,.assess-cards,.report-cards{grid-template-columns:1fr!important;gap:18px!important}
  .human-card,.assess-card,.report-card{padding:20px!important;border-radius:20px!important}
  .human-card .visual,.assess-card .visual,.report-card .visual{height:auto!important;aspect-ratio:16/10!important;border-radius:15px!important;overflow:hidden!important}
  .human-card h3,.assess-card h3,.report-card h3{font-size:24px!important;line-height:1.3!important}

  .interaction-head{display:block!important}
  .interaction-head .desc{width:100%!important;text-align:left!important}
  .interaction-box{height:auto!important;margin-top:34px!important;padding-bottom:24px!important;overflow:hidden!important}
  .tabs{display:flex!important;grid-template-columns:none!important;gap:0!important;height:64px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto!important;min-width:150px!important;padding:0 18px!important;font-size:15px!important;white-space:nowrap!important}
  .interaction-content{display:flex!important;flex-direction:column!important}
  .interaction-copy{position:relative!important;inset:auto!important;margin:26px 20px 0!important;order:1!important}
  .interaction-copy h3{font-size:26px!important;line-height:1.3!important}
  .interaction-copy p{font-size:15px!important;line-height:1.6!important}
  .interaction-environment{display:flex;flex-direction:column;gap:24px!important}
  .interaction-environment[hidden]{display:none!important}
  .environment-group h3{font-size:23px!important;color:#111!important}
  .environment-group ul{padding-left:0!important;margin:12px 0 0!important;list-style:none!important}
  .environment-group li{font-size:15px!important;line-height:1.65!important;color:#4b4b4b!important}
  .interaction-img{position:relative!important;inset:auto!important;width:calc(100% - 40px)!important;height:auto!important;aspect-ratio:16/10!important;margin:24px 20px 0!important;border-radius:18px!important;order:2!important}

  /* === Learning Experience: keep the user-directed card imagery, tighten all other mobile components === */
  .flow-top{grid-template-columns:1fr!important;gap:32px!important}
  .flow-image{width:100%!important;height:auto!important;aspect-ratio:16/10!important;border-radius:16px!important;overflow:hidden!important}
  .flow-tabs{display:flex!important;gap:0!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;margin-top:26px!important}
  .flow-tabs::-webkit-scrollbar{display:none}
  .flow-tab{flex:0 0 168px!important;min-height:74px!important;padding:12px 10px!important;font-size:14px!important}
  .flow-caption{margin-top:18px!important}
  .flow-caption h3{font-size:24px!important}
  .assess-card p,.report-card p{font-size:14px!important;line-height:1.6!important}
  .mini-flow{grid-template-columns:1fr!important;gap:0!important;margin-top:28px!important}
  .mini-arrow{display:none!important}
  .mini-step{padding:18px 16px!important;border-bottom:1px solid #d0d6e1!important}
  .closing{padding:22px 18px!important;font-size:15px!important;line-height:1.6!important;border-radius:16px!important}

  /* === Footer: Family Site menu must sit immediately above its select box === */
  .elea-shared-footer{padding:42px 0 max(48px,env(safe-area-inset-bottom))!important}
  .elea-footer-shell{width:calc(100% - 40px)!important;max-width:none!important}
  .elea-shared-footer .footer-top{padding-bottom:26px!important}
  .elea-shared-footer .footer-main{padding-top:26px!important}
  .elea-family-wrap{position:relative!important;width:100%!important;max-width:none!important;margin-top:28px!important;z-index:50!important}
  .elea-family-toggle{width:100%!important;height:50px!important}
  .elea-family-menu{
    position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:calc(100% + 8px)!important;width:100%!important;max-width:none!important;
    margin:0!important;transform:translateY(8px)!important;z-index:60!important;
  }
  .elea-family-menu.is-open{transform:translateY(0)!important}
  .elea-shared-footer .footer-bottom{margin-top:30px!important;padding-right:44px!important}
  .elea-shared-to-top{right:14px!important;bottom:max(16px,env(safe-area-inset-bottom))!important}
}

@media (max-width:380px){
  .site-header .header-inner{padding-inline:16px!important}
  .site-header .language-switch{font-size:12px!important}
  .site-header .gnb{padding-left:20px!important;padding-right:20px!important}
  .site-header .gnb a{font-size:25px!important}
  .section{padding-left:16px!important;padding-right:16px!important}
  .headline{font-size:29px!important}
  .elea-footer-shell{width:calc(100% - 32px)!important}
}

/* === 2026-08-12 mobile polish v3 ===
   1) AI-Powered Textbook Experience responsive rebuild
   2) Data Moat header controls visible on first paint
   3) ELM core +10% upward / artwork +10% scale on mobile only */
@media (max-width:760px){
  /* Data Moat and all shared-header pages: keep KOR | ENG + hamburger visible from first paint. */
  .site-header .header-tools{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    margin-left:auto!important;
    gap:12px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .site-header .language-switch{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    opacity:1!important;
    visibility:visible!important;
    color:inherit!important;
  }
  .site-header .mobile-toggle{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    color:inherit!important;
  }

  /* AI-Powered Textbook Experience: remove legacy 806px/scaled stage and build a real mobile composition. */
  .textbook-exp{
    padding-top:64px!important;
    padding-bottom:64px!important;
    overflow:hidden!important;
  }
  .textbook-exp .textbook-grid{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:38px!important;
    width:100%!important;
    max-width:none!important;
  }
  .textbook-exp .textbook-grid>.fade:first-child{
    width:100%!important;
    max-width:none!important;
  }
  .textbook-exp .eyebrow{
    margin-bottom:10px!important;
  }
  .textbook-exp .headline{
    font-size:31px!important;
    line-height:1.34!important;
    letter-spacing:-.035em!important;
  }
  .textbook-exp .headline br{display:none!important}
  .textbook-exp .desc{
    margin-top:20px!important;
    font-size:16px!important;
    line-height:1.7!important;
    color:#71767e!important;
  }
  .textbook-exp .desc br{display:none!important}
  .textbook-exp .loop-stage{
    position:relative!important;
    width:100%!important;
    max-width:360px!important;
    height:460px!important;
    margin:0 auto!important;
    transform:none!important;
    transform-origin:center!important;
    overflow:visible!important;
  }
  .textbook-exp .loop-stage::before{
    width:300px!important;
    height:300px!important;
    max-width:calc(100% - 32px)!important;
    max-height:calc(100% - 72px)!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }
  .textbook-exp .textbook-composite{
    left:50%!important;
    top:50%!important;
    width:220px!important;
    max-width:64%!important;
    transform:translate(-50%,-48%)!important;
    z-index:2!important;
  }
  .textbook-exp .orbit-node{
    width:112px!important;
    height:112px!important;
    padding:10px!important;
    z-index:3!important;
    box-shadow:0 8px 24px rgba(12,43,48,.11)!important;
  }
  .textbook-exp .orbit-node strong{
    font-size:18px!important;
    line-height:1.16!important;
  }
  .textbook-exp .orbit-node span{
    margin-top:4px!important;
    font-size:15px!important;
    line-height:1.3!important;
  }
  .textbook-exp .orbit-node.n1{left:0!important;top:12px!important}
  .textbook-exp .orbit-node.n2{right:0!important;top:12px!important}
  .textbook-exp .orbit-node.n3{right:0!important;bottom:12px!important}
  .textbook-exp .orbit-node.n4{left:0!important;bottom:12px!important}

  /* E CLOUD AI LANGUAGE MODEL: enlarge the complete artwork by 10%, keep the tuned viewport, lift only the ELM core. */
  .elm-visual-viewport .elm-source-visual{
    transform:translate(-50%,-50%) scale(.682)!important;
  }
  .elm-rise-layer-main .elm-layer-core{
    top:40%!important;
  }
}

@media (max-width:380px){
  .textbook-exp .loop-stage{height:440px!important;max-width:344px!important}
  .textbook-exp .loop-stage::before{width:286px!important;height:286px!important}
  .textbook-exp .textbook-composite{width:210px!important}
  .textbook-exp .orbit-node{width:106px!important;height:106px!important}
  .textbook-exp .orbit-node strong{font-size:17px!important}
  .textbook-exp .orbit-node span{font-size:14px!important}
}

/* === 2026-08-12 mobile polish v4 — verified hotfix ===
   1) data-moat shared header controls must be visible on first paint
   2) ELM mobile core truly moves upward by 10 percentage points
   3) ELM complete artwork remains exactly 10% larger than the prior .62 scale */
@media (max-width:760px){
  /* Override legacy data-moat.css: .language-switch{display:none} */
  body .site-header .header-inner{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%!important;
  }
  body .site-header .header-tools{
    display:flex!important;
    margin-left:auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    min-width:max-content!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body .site-header .language-switch{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    color:#0b2027!important;
    opacity:1!important;
    visibility:visible!important;
    white-space:nowrap!important;
  }
  body .site-header .language-switch .lang-option,
  body .site-header .language-switch .lang-separator{
    display:inline-block!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body .site-header .language-switch .is-active{color:#0b2027!important;font-weight:800!important}
  body .site-header .language-switch .is-disabled{color:#8b8f94!important;font-weight:500!important}
  body .site-header .language-switch .lang-separator{color:#b1b4b7!important}
  body .site-header .mobile-toggle{
    display:block!important;
    flex:0 0 30px!important;
    opacity:1!important;
    visibility:visible!important;
    color:#0b2027!important;
  }

  /* ELM mobile refinement: move only the ELM core another 20 percentage points upward (30% -> 10%). */
  body .elm-visual-viewport .elm-source-visual{
    transform:translate(-50%,-50%) scale(.682)!important;
    transform-origin:center center!important;
  }
  body .elm-rise-layer-main .elm-layer-core{
    top:0%!important;
  }
}