/* ===== 모션 레이어: 호버 마이크로 인터랙션 · 스크롤 페이드 인 업 · 로딩 스태거 (2026-10) =====
   - 마우스 기기에서만 호버 효과, '동작 줄이기' 설정 시 움직임 없음
   - html.mo-js(머리 인라인 스크립트가 붙임)일 때만 숨김/등장 효과가 동작 → 스크립트 실패 시 콘텐츠는 그대로 보임 */
:root{--mo-ease:cubic-bezier(.45,0,.55,1);--mo-ease-out:cubic-bezier(.22,.7,.3,1);--mo-fast:.28s;--mo-slow:.8s}

/* 1) 호버 마이크로 인터랙션 */
.brand-btn,a.brand-btn,.head-cta,.home-cta__btns a,.yt-channel,.link-arrow,.hub-related__grid a,.sitemap-col li a,#footer p.btn a,#footer .sns_group a,
#nav > ul > li > a,#nav .sub li a,.v3-lnb li a,.lnb li a,#quick a span,.home-hero__links a,.concern-grid a,.brand-focus__grid a,.entry-grid a,.brand-hero__cards a,.yt-card,.yt-card__thumb,.yt-card__thumb img,.concern-grid a img,.doc-profile__photo img{
  transition:color var(--mo-fast) var(--mo-ease),background-color var(--mo-fast) var(--mo-ease),border-color var(--mo-fast) var(--mo-ease),box-shadow .35s var(--mo-ease),transform .35s var(--mo-ease-out),opacity var(--mo-fast) var(--mo-ease),background-size .35s var(--mo-ease)}
#nav > ul > li > a{background:linear-gradient(currentColor,currentColor) no-repeat center calc(50% + 15px)/0 2px}
#nav > ul > li.is-current > a,#nav > ul > li > a:focus-visible{background-size:60% 2px}
@media (hover:hover) and (pointer:fine){
  .brand-btn:hover,a.brand-btn:hover,.head-cta:hover,.home-cta__btns a:hover,.yt-channel:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(36,36,36,.14)}
  .brand-btn:active,a.brand-btn:active,.head-cta:active,.home-cta__btns a:active{transform:translateY(0);box-shadow:0 3px 8px rgba(36,36,36,.12)}
  .brand-btn.ghost:hover{background:rgba(167,71,0,.06)}
  .brand-btn.ghost.light:hover,.vis-cta .brand-btn.ghost:hover,.footer-cta .brand-btn.ghost:hover{background:rgba(255,255,255,.08)}
  .hub-cta .brand-btn.ghost:hover{background:rgba(227,193,136,.10);box-shadow:0 8px 20px rgba(0,0,0,.35)}
  #nav > ul > li:hover > a{background-size:60% 2px}
  .concern-grid a:hover,.brand-focus__grid a:hover,.entry-grid a:hover,.brand-hero__cards a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(36,36,36,.10)}
  .concern-grid a:hover img{transform:scale(1.025)}
  .yt-card:hover{transform:translateY(-3px)}
  .yt-card:hover .yt-card__thumb{box-shadow:0 12px 28px rgba(36,36,36,.14)}
  .yt-card:hover .yt-card__thumb img{transform:scale(1.025)}
  .hub-related__grid a:hover{transform:translateY(-2px)}
  #quick li a:hover span:first-child{transform:translateY(-2px)}
  #quick li a span:first-child{display:block;transition:transform .3s var(--mo-ease-out)}
  .home-hero__links a:hover,#footer p.btn a:hover{opacity:.75}
}

/* 2) 로딩 스태거: 첫 화면 히어로 글·하위 메뉴가 시간차를 두고 등장 (CSS만, JS 대기 없음) */
@keyframes moUp{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes moFade{from{opacity:0}to{opacity:1}}
.mo-js .brand-hero__in > *,.mo-js .v3-hero__copy > *,.mo-js .sub_visual .title > *,.mo-js .hub-intro .inbox > *{animation:moUp .7s var(--mo-ease) both}
.mo-js .brand-hero__in > :nth-child(1),.mo-js .v3-hero__copy > :nth-child(1),.mo-js .sub_visual .title > :nth-child(1){animation-delay:0s}
.mo-js .brand-hero__in > :nth-child(2),.mo-js .v3-hero__copy > :nth-child(2),.mo-js .sub_visual .title > :nth-child(2){animation-delay:.09s}
.mo-js .brand-hero__in > :nth-child(3),.mo-js .v3-hero__copy > :nth-child(3){animation-delay:.18s}
.mo-js .brand-hero__in > :nth-child(4),.mo-js .v3-hero__copy > :nth-child(4){animation-delay:.27s}
.mo-js .brand-hero__in > :nth-child(5),.mo-js .v3-hero__copy > :nth-child(5){animation-delay:.34s}
.mo-js .brand-hero__in > :nth-child(n+6),.mo-js .v3-hero__copy > :nth-child(n+6){animation-delay:.4s}
.mo-js .hub-intro .inbox > :nth-child(1){animation-delay:.2s}.mo-js .hub-intro .inbox > :nth-child(2){animation-delay:.28s}.mo-js .hub-intro .inbox > :nth-child(n+3){animation-delay:.36s}
.mo-js .v3-hero__media{animation:moFade .8s var(--mo-ease) both}
.mo-js .v3-lnb > ul > li,.mo-js .sub_visual .lnb li{animation:moFade .6s var(--mo-ease) both}
.mo-js .v3-lnb > ul > li:nth-child(1),.mo-js .sub_visual .lnb li:nth-child(1){animation-delay:.15s}
.mo-js .v3-lnb > ul > li:nth-child(2),.mo-js .sub_visual .lnb li:nth-child(2){animation-delay:.2s}
.mo-js .v3-lnb > ul > li:nth-child(3),.mo-js .sub_visual .lnb li:nth-child(3){animation-delay:.25s}
.mo-js .v3-lnb > ul > li:nth-child(4),.mo-js .sub_visual .lnb li:nth-child(4){animation-delay:.3s}
.mo-js .v3-lnb > ul > li:nth-child(5),.mo-js .sub_visual .lnb li:nth-child(5){animation-delay:.35s}
.mo-js .v3-lnb > ul > li:nth-child(n+6),.mo-js .sub_visual .lnb li:nth-child(n+6){animation-delay:.4s}
.subnav-fixed li{animation:none!important}

/* 3) 스크롤 페이드 인 업: motion.js가 화면 아래 요소에 .mo를 붙이고, 들어오면 .is-in */
.mo-js .mo{opacity:0;transform:translate3d(0,22px,0);transition:none}
.mo-js .mo.is-in{opacity:1;transform:none;transition:opacity var(--mo-slow) var(--mo-ease),transform var(--mo-slow) var(--mo-ease)}

@media (prefers-reduced-motion:reduce){
  .mo-js .mo{opacity:1!important;transform:none!important;transition:none!important}
  .mo-js .brand-hero__in > *,.mo-js .v3-hero__copy > *,.mo-js .sub_visual .title > *,.mo-js .hub-intro .inbox > *,.mo-js .v3-hero__media,.mo-js .v3-lnb > ul > li,.mo-js .sub_visual .lnb li{animation:none!important}
  .brand-btn:hover,a.brand-btn:hover,.head-cta:hover,.home-cta__btns a:hover,.yt-channel:hover,.concern-grid a:hover,.brand-focus__grid a:hover,.entry-grid a:hover,.brand-hero__cards a:hover,.yt-card:hover,.hub-related__grid a:hover,#quick li a:hover span:first-child,.concern-grid a:hover img,.yt-card:hover .yt-card__thumb img{transform:none!important}
}
@media print{.mo-js .mo{opacity:1!important;transform:none!important}}