/* AItira V20 — canonical mobile header guard + playground DOM repair + compact mobile UX */
:root{--aitira-v20-header-h:64px;--aitira-v20-bottom-h:64px}

/* The canonical header must occupy exactly one bar. Legacy generic header rules must not inflate it. */
@media(max-width:1140px){
  html{scroll-padding-top:calc(var(--aitira-v20-header-h) + 12px)!important}
  body{padding-top:var(--aitira-v20-header-h)!important}
  body>.aitira-global-header{
    position:fixed!important;inset:0 0 auto 0!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;height:var(--aitira-v20-header-h)!important;min-height:var(--aitira-v20-header-h)!important;max-height:var(--aitira-v20-header-h)!important;
    margin:0!important;padding:0!important;border-radius:0!important;overflow:visible!important;
    z-index:2147483000!important;transform:none!important;translate:none!important;opacity:1!important;visibility:visible!important;display:block!important;
    background:rgba(255,255,255,.985)!important;border-bottom:1px solid #dfe6ef!important;box-shadow:0 3px 14px rgba(21,45,74,.055)!important;
  }
  body>.aitira-global-header>.aitira-global-header__inner{
    position:relative!important;display:flex!important;align-items:center!important;
    width:min(100%,1240px)!important;height:var(--aitira-v20-header-h)!important;min-height:var(--aitira-v20-header-h)!important;max-height:var(--aitira-v20-header-h)!important;
    margin:0 auto!important;padding:0 14px!important;gap:8px!important;overflow:visible!important;
  }
  .aitira-global-brand{
    flex:0 1 auto!important;width:calc(100% - 112px)!important;max-width:360px!important;min-width:0!important;
    display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  .aitira-global-brand img{flex:0 0 auto!important;width:84px!important;max-width:84px!important;height:auto!important;margin:0!important}
  .aitira-global-brand span{
    display:block!important;flex:1 1 auto!important;min-width:0!important;max-width:160px!important;
    color:#65758a!important;font-size:10.5px!important;font-weight:800!important;line-height:1.22!important;letter-spacing:-.02em!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:keep-all!important;
  }
  .aitira-global-nav,.aitira-global-hub,.aitira-global-cta{display:none!important}
  .aitira-global-mobile-actions{
    position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-50%)!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;
    width:auto!important;height:auto!important;margin:0!important;padding:0!important;z-index:2!important;
  }
  .aitira-global-hub-mini{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    width:50px!important;min-width:50px!important;max-width:50px!important;height:42px!important;min-height:42px!important;
    margin:0!important;padding:0 6px!important;border-radius:11px!important;
  }
  .aitira-global-hub-mini b{font-size:10.5px!important;line-height:1!important}
  .aitira-global-hub-mini>span{font-size:8px!important;line-height:1!important}
  .aitira-global-menu-btn{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;
    margin:0!important;padding:0!important;border-radius:13px!important;font-size:26px!important;
  }
}
@media(max-width:390px){
  :root{--aitira-v20-header-h:62px}
  .aitira-global-brand{width:calc(100% - 104px)!important;gap:7px!important}
  .aitira-global-brand img{width:76px!important;max-width:76px!important}
  .aitira-global-brand span{max-width:108px!important;font-size:9.5px!important;line-height:1.18!important}
  .aitira-global-mobile-actions{right:10px!important;gap:5px!important}
  .aitira-global-hub-mini{width:46px!important;min-width:46px!important;max-width:46px!important;height:40px!important}
  .aitira-global-menu-btn{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important}
}
@media(max-width:330px){
  .aitira-global-brand img{width:70px!important;max-width:70px!important}
  .aitira-global-brand span{max-width:92px!important;font-size:8.8px!important}
}

/* Prevent old page bundles from hiding or translating the canonical bar after first render. */
@media(max-width:1140px){
  html.aitira-shell-v20 body>.aitira-global-header,
  html.aitira-shell-v20 body>.aitira-global-header *{animation:none!important}
  html.aitira-shell-v20 body>.aitira-global-header{filter:none!important;clip:auto!important;clip-path:none!important}
}

/* AI Playground live section now lives inside <main>; do not create a second pseudo-page above the body. */
#live-playground.aitira-live-playground{box-sizing:border-box!important;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:760px){
  #live-playground.aitira-live-playground{width:calc(100% - 28px)!important;padding:34px 0 54px!important;margin:0 auto!important}
  #live-playground .aitira-live-play-head{margin-bottom:18px!important}
  #live-playground .aitira-live-play-head h2{font-size:clamp(30px,9vw,40px)!important;line-height:1.12!important}
  #live-playground .aitira-live-play-head p{font-size:14px!important;line-height:1.65!important}
  #live-playground .aitira-quiz,#live-playground .aitira-mission{padding:22px 18px!important;border-radius:22px!important}
}

/* Board mascot: image and speech copy must both remain readable on mobile. */
@media(max-width:760px){
  .board-hero-art{
    display:grid!important;grid-template-columns:86px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;
    width:min(100%,300px)!important;max-width:300px!important;margin-top:18px!important;overflow:visible!important;
  }
  .board-hero-art img{display:block!important;width:86px!important;max-width:86px!important;height:86px!important;object-fit:cover!important;border-radius:24px!important;margin:0!important;flex:none!important}
  .board-hero-art span{
    display:block!important;min-width:0!important;width:auto!important;max-width:100%!important;margin:0!important;padding:10px 11px!important;
    border-radius:14px!important;background:#fff!important;color:#243850!important;font-size:11.5px!important;font-weight:650!important;line-height:1.42!important;
    white-space:normal!important;overflow:visible!important;word-break:keep-all!important;box-shadow:0 5px 16px rgba(28,55,79,.05)!important;
  }
  .board-hero-art span b{display:inline!important;color:#0f3158!important;font-size:11.5px!important}
}

/* Playground mascot follows the same readable image + bubble pattern. */
@media(max-width:760px){
  .trend-character{display:grid!important;grid-template-columns:86px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;width:min(100%,310px)!important;margin:20px 0 0!important;overflow:visible!important}
  .trend-character img{width:86px!important;max-width:86px!important;height:auto!important;margin:0!important}
  .trend-character>div{min-width:0!important;margin:0!important;padding:10px 12px!important;font-size:11.5px!important;line-height:1.45!important;white-space:normal!important;overflow:visible!important}
}

/* AI Match criteria: exactly one horizontal strip on phones; scroll only if the viewport is very narrow. */
@media(max-width:760px){
  .match-hero__card{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:7px!important;overflow-x:auto!important;padding:15px 14px!important;scroll-snap-type:x proximity!important}
  .match-hero__card strong,.match-hero__card span{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start!important;margin:0!important}
  .match-hero__card strong{font-size:13px!important}
  .match-hero__card span{padding:7px 10px!important;font-size:11.5px!important}
}

/* Compact footer + safe mobile viewport. */
@media(max-width:760px){
  .aitira-global-footer{margin-top:30px!important;padding-bottom:calc(var(--aitira-v20-bottom-h) + 10px + env(safe-area-inset-bottom))!important}
  .aitira-global-footer__grid{width:calc(100% - 28px)!important;padding:20px 0 8px!important}
  .aitira-global-footer__brand{padding-bottom:8px!important}
  .aitira-global-footer__brand img{width:76px!important;max-width:76px!important;margin:0 0 4px!important}
  .aitira-global-footer nav[aria-label="FlowLabs 관련 서비스"]{padding:8px 0 2px!important;gap:5px!important}
  .aitira-global-footer nav[aria-label="FlowLabs 관련 서비스"]>a:not(.aitira-related-sites-nav__mail){padding:6px 8px!important;font-size:10.5px!important}
  .aitira-global-footer__bottom{width:calc(100% - 28px)!important;padding:8px 0 10px!important;gap:5px 10px!important}
  .aitira-global-footer__bottom,.aitira-global-footer__bottom nav a{font-size:10px!important}
  body{padding-bottom:calc(var(--aitira-v20-bottom-h) + env(safe-area-inset-bottom))!important}
  .aitira-mobile-bottom-v17{min-height:var(--aitira-v20-bottom-h)!important}
}

/* Newsletter and article pages: hard stop against horizontal overflow. */
@media(max-width:760px){
  .newsletter-subscribe-wide,.newsletter-subscribe-form,.newsletter-subscribe-form input,.newsletter-subscribe-form button,
  .nl-pro-wrap,.nl-letter,.pro-article-wrap,.pro-article,.article-body-prose{box-sizing:border-box!important;width:auto!important;max-width:100%!important;min-width:0!important}
  .newsletter-subscribe-form{grid-template-columns:minmax(0,1fr)!important}
  .newsletter-subscribe-form input,.newsletter-subscribe-form button{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
}