/* 협회 홈페이지 모션 CSS — 추가 CSS(wp-custom-css)에서 옮긴 모션 절(0918 모션 1~4차·헤더 전환·감속 규칙)과 모션 토큰(2026-09-25 배치 M1), 등장 어휘 5종·문서 간 전환(2026-09-26 배치 M2) */
/* 원본 = 62_서버파일/custom_css_0921_cleanup.css 의 83~84·136~166·168~201·204~206·310~460행. 선택자·값·순서는 원본 그대로이고, 아래 토큰과 값이 같은 곳만 var()로 바꿨다. */
/* 토큰 값은 현재 화면에 실제로 적용되는 값이다(헤더 전환은 0918 보정 2의 1.2s·1.05s·1.15s). M2에서 참조 없는 키프레임·빈 주석과 뒤 규칙에 덮여 효력 없던 헤더 전환 1차·2차 블록을 지웠다(계산 스타일 차이 0건). */
:root{--hm-ease:cubic-bezier(.16,1,.3,1);--hm-ease-ui:cubic-bezier(.2,.7,.2,1);--hm-dur-hover:.25s;--hm-dur-reveal:1.25s;--hm-dur-header-bg:1.2s;--hm-dur-header-text:1.05s;--hm-dur-menu-drop:1.15s;--hm-stagger:80ms;--hm-shift:14px}

/* 모션 축소 — ::before·::after 도 포함(제목 밑줄·소식 카드 띠의 스크롤 연동 성장이 * 만으로는 멈추지 않았다, 2026-09-26 M2 실측) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ===== 0918 모션 — 스크롤 연동(CSS scroll-driven animation, JS 없음) + 첫 화면 등장 ===== */
/* 1) 첫 화면 등장: 히어로 문구·버튼 순차 페이드업, 배경 살짝 줌아웃, 퀵메뉴 슬라이드인 */
@keyframes hm-in-right{from{opacity:0;transform:translate(24px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.hm-quick{animation:hm-in-right .7s var(--hm-ease-ui) .9s both}
/* 2) 스크롤 연동: 지원 브라우저에서만(미지원은 정적 표시) */
@supports (animation-timeline: view()){
  @keyframes hm-reveal{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  @keyframes hm-reveal-scale{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
  .hm-band,.hm-section>*{animation:hm-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .hm-card,.hm-news-card{animation:hm-reveal-scale linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .wp-block-columns>.wp-block-column:nth-child(2) .hm-card,.wp-block-columns>.wp-block-column:nth-child(2) .hm-news-card{animation-range:entry 10% entry 65%}
  .wp-block-columns>.wp-block-column:nth-child(3) .hm-card,.wp-block-columns>.wp-block-column:nth-child(3) .hm-news-card{animation-range:entry 20% entry 75%}
  .hm-section .wp-block-buttons .wp-block-button{animation:hm-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(2){animation-range:entry 8% entry 68%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(3){animation-range:entry 16% entry 76%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(4){animation-range:entry 24% entry 84%}
  .hm-footer{animation:hm-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
}
/* 3) 마이크로 인터랙션 */
.hm-card,.hm-news-card{transition:transform var(--hm-dur-hover) var(--hm-ease-ui),box-shadow var(--hm-dur-hover)}
.hm-news-card:hover{transform:translateY(-3px);box-shadow:var(--hm-shadow-lift)}
.wp-block-button__link,.header-button,.hm-quick-item,.hm-tab{transition:transform .15s,background-color .2s,color .2s,box-shadow .2s}
.hm-cta-edu .wp-block-button__link:hover,.header-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(184,90,20,.3)}
.hm-quick-item:hover .hm-quick-ico{transform:scale(1.12);transition:transform .2s}
.hm-more{position:relative}.hm-more::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:currentColor;transition:width var(--hm-dur-hover)}.hm-card:hover .hm-more::after,.hm-news-card:hover .hm-more::after{width:100%}
html{scroll-behavior:smooth}
/* 모션 축소 설정 사용자는 전부 정지(기존 규칙이 담당) */

/* ===== 0918 모션 2차 — 속도 완화 + 섹션별 동적 요소 (사용자 요청) ===== */
/* 1) 첫 화면 등장: 조금 느리게·간격 넓게 */
.hm-quick{animation-delay:1.3s;animation-duration:.9s}
@supports (animation-timeline: view()){
  /* 2) 스크롤 리빌: 더 긴 구간에 걸쳐 천천히 */
  .hm-band,.hm-section>*{animation-range:entry 0% entry 70%}
  .hm-card,.hm-news-card{animation-range:entry 0% entry 75%}
  .wp-block-columns>.wp-block-column:nth-child(2) .hm-card,.wp-block-columns>.wp-block-column:nth-child(2) .hm-news-card{animation-range:entry 12% entry 87%}
  .wp-block-columns>.wp-block-column:nth-child(3) .hm-card,.wp-block-columns>.wp-block-column:nth-child(3) .hm-news-card{animation-range:entry 24% entry 99%}
  .hm-section .wp-block-buttons .wp-block-button{animation-range:entry 0% entry 80%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(2){animation-range:entry 10% entry 90%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(3){animation-range:entry 20% entry 100%}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(4){animation-range:entry 30% cover 10%}
  /* 3) 섹션 제목: 왼쪽에서 밀려 나오고, 제목 아래 강조선이 자라남 */
  @keyframes hm-slide-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  @keyframes hm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hm-section .hm-eyebrow,.hm-section h2{animation:hm-slide-left linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .hm-section h2{position:relative;padding-bottom:14px}
  .hm-section h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:2px;background:var(--hm-accent);transform-origin:left;animation:hm-grow linear both;animation-timeline:view();animation-range:entry 30% entry 90%}
  /* 4) 협회 소개 카드: 사진이 카드 안에서 살짝 위로 흐르는 패럴랙스 + 하단 그라데이션 */
  @keyframes hm-img-drift{from{transform:translateY(6%) scale(1.12)}to{transform:translateY(-6%) scale(1.12)}}
  .hm-card figure{overflow:hidden;margin:0}
  .hm-card figure img{animation:hm-img-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;will-change:transform}
  .hm-card:hover figure img{filter:saturate(1.15)}
  /* 5) 중앙회 소식 카드: 칩이 톡 튀어나오고, 카드 위쪽 색 띠가 왼쪽에서 채워짐 */
  @keyframes hm-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
  .hm-news-card{position:relative;overflow:hidden}
  .hm-news-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--hm-cta),var(--hm-mint));transform-origin:left;animation:hm-grow linear both;animation-timeline:view();animation-range:entry 20% entry 95%}
  .hm-news-card .hm-chip{animation:hm-pop linear both;animation-timeline:view();animation-range:entry 30% entry 85%}
  .hm-news-card h3{transition:color .2s}.hm-news-card:hover h3{color:var(--hm-cta)}
  /* 6) 회원 서비스 칩 버튼: 아래에서 튀어오르며 등장, hover 시 채움 */
  @keyframes hm-bounce-in{0%{opacity:0;transform:translateY(24px) scale(.9)}70%{opacity:1;transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
  .hm-section .wp-block-buttons .wp-block-button{animation-name:hm-bounce-in}
}

/* 7) 교육 CTA 띠: 버튼이 은은하게 숨 쉬듯(주목 유도, 3회만) */
@keyframes hm-breathe{0%,100%{box-shadow:0 0 0 0 rgba(184,90,20,.35)}50%{box-shadow:0 0 0 12px rgba(184,90,20,0)}}
.hm-band .hm-cta-edu .wp-block-button__link{animation:hm-breathe 2.4s ease-out 1.5s 3}

/* ===== 0918 모션 3차 — 놀러와 방식(아래에서 위로 올라오는 리빌)로 교체 =====
   놀러와 public.css 실측: translateY(18px) → 0, .7s cubic-bezier(.22,.61,.36,1),
   IntersectionObserver threshold 0.12 / rootMargin -40px, 그리드 내 60ms 스태거.
   여기서는 JS 없이 스크롤 연동 애니메이션으로 같은 값·같은 곡선을 재현한다. */
@supports (animation-timeline: view()){
  @keyframes hm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  /* 공통: 진입 12%에서 시작해 42%에서 끝난다(놀러와의 threshold 0.12 + .7s 전환에 대응) */
  .hm-band,.hm-section>*,.hm-card,.hm-news-card,.hm-section .wp-block-buttons .wp-block-button,.hm-footer{
    animation-name:hm-rise!important;
    animation-timing-function:cubic-bezier(.22,.61,.36,1)!important;
    animation-range:entry 12% entry 42%!important;
    will-change:opacity,transform}
  /* 그리드 스태거 — 놀러와 60ms에 대응하는 진입 구간 오프셋 */
  .wp-block-columns>.wp-block-column:nth-child(2) .hm-card,
  .wp-block-columns>.wp-block-column:nth-child(2) .hm-news-card{animation-range:entry 18% entry 48%!important}
  .wp-block-columns>.wp-block-column:nth-child(3) .hm-card,
  .wp-block-columns>.wp-block-column:nth-child(3) .hm-news-card{animation-range:entry 24% entry 54%!important}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(2){animation-range:entry 18% entry 48%!important}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(3){animation-range:entry 24% entry 54%!important}
  .hm-section .wp-block-buttons .wp-block-button:nth-child(4){animation-range:entry 30% entry 60%!important}
  /* 섹션 제목은 좌→우 슬라이드 대신 동일한 상승으로 통일(놀러와는 전부 상승) */
  .hm-section .hm-eyebrow,.hm-section h2{animation-name:hm-rise!important;animation-range:entry 12% entry 42%!important}
  /* 제목 밑줄·소식 카드 상단 띠는 그대로 성장 유지, 시작 시점만 맞춤 */
  .hm-section h2::after{animation-range:entry 20% entry 60%!important}
  .hm-news-card::before{animation-range:entry 16% entry 52%!important}
}

/* ===== 0918 모션 4차 — JS 리빌이 켜지면(html.motion-ready, 2026-09-26 M2에서 .hm-js-reveal 대신) 스크롤 연동(animation-timeline) 리빌은 중복이므로 끈다 =====
   JS 미실행 시에는 이 규칙이 걸리지 않아 위 스크롤 연동 리빌이 그대로 돈다. 등장 자체는 맨 아래 「모션 2.0 등장 어휘」가 맡는다. */
@supports (animation-timeline: view()){
  html.motion-ready .hm-band,html.motion-ready .hm-section>*,html.motion-ready .hm-card,html.motion-ready .hm-news-card,
  html.motion-ready .hm-section .wp-block-buttons .wp-block-button,html.motion-ready .hm-footer,
  html.motion-ready .hm-section .hm-eyebrow,html.motion-ready .hm-section h2{animation:none!important}
  html.motion-ready .hm-card figure img{animation:hm-img-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html.motion-ready .hm-section h2::after,html.motion-ready .hm-news-card::before{animation:hm-grow linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
}
/* Lenis 관성 스크롤: 라이브러리 권장 기본 스타일 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===== 0918 헤더 전환 모션 3차 — 한 단계 더 부드럽게(사용자 요청) ===== */
.site-header .site-header-row-container-inner,
.site-header .kadence-sticky-header .site-header-row-container-inner{
  transition:background-color var(--hm-dur-header-bg) var(--hm-ease),
             box-shadow var(--hm-dur-header-bg) var(--hm-ease),
             border-color var(--hm-dur-header-bg) var(--hm-ease)!important}
.site-header .primary-menu-container>ul>li>a,
.site-header .site-title,.site-header .site-title a,
.site-header .header-navigation li.menu-item>a{
  transition:color var(--hm-dur-header-text) var(--hm-ease),background-color var(--hm-dur-header-text) var(--hm-ease)!important}
.site-header .site-branding img,.site-header .custom-logo{transition:opacity var(--hm-dur-header-text) var(--hm-ease)}
.site-header .header-button{transition:background-color var(--hm-dur-header-text) var(--hm-ease),color var(--hm-dur-header-text) var(--hm-ease),border-color var(--hm-dur-header-text),transform .15s,box-shadow var(--hm-dur-hover)!important}
@media (prefers-reduced-motion: no-preference){
  @keyframes hm-menu-drop-a{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  @keyframes hm-menu-drop-b{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .site-main-header-wrap.item-at-start .primary-menu-container>ul>li>a,
  .site-main-header-wrap.item-at-start .site-title{animation:hm-menu-drop-a var(--hm-dur-menu-drop) var(--hm-ease) both}
  .site-main-header-wrap.item-is-stuck .primary-menu-container>ul>li>a,
  .site-main-header-wrap.item-is-stuck .site-title{animation:hm-menu-drop-b var(--hm-dur-menu-drop) var(--hm-ease) both}
  .site-main-header-wrap .site-title{animation-delay:0ms}
  .site-main-header-wrap .primary-menu-container>ul>li:nth-child(1)>a{animation-delay:90ms}
  .site-main-header-wrap .primary-menu-container>ul>li:nth-child(2)>a{animation-delay:170ms}
  .site-main-header-wrap .primary-menu-container>ul>li:nth-child(3)>a{animation-delay:250ms}
  .site-main-header-wrap .primary-menu-container>ul>li:nth-child(4)>a{animation-delay:330ms}
  .site-main-header-wrap .primary-menu-container>ul>li:nth-child(5)>a{animation-delay:410ms}
}

/* ===== 모션 2.0 등장 어휘(2026-09-26 배치 M2) — motion.js 가 [data-reveal="line|mask|rise|fade|zoom"]를 달고 화면에 들어오면 .is-in 을 붙인다 =====
   원형 = 놀스튜디오 _shared/common.css 모션 레이어. 숨김은 html.motion-ready 가 붙은 뒤에만 걸린다(스크립트가 실패하면 그대로 보인다).
   등장은 animation(fill backwards)이라 끝나면 원래 스타일로 돌아간다 — 옛 .hm-reveal.hm-in{transform:none} 에 막혔던 카드 호버 들림이 다시 작동한다.
   위 0918 스크롤 연동 규칙의 !important(animation-name·timing·range)와 바로 위 끄기 규칙을 이기도록 등장 규칙에도 !important 를 둔다(끄기 규칙보다 뒤, 명시도는 같거나 높다).
   로드 때 이미 화면 안에 있던 요소는 [data-reveal-now] — 숨김·재생 없이 바로 보이고, 한 번 화면 밖으로 나가면 JS가 속성을 지워 다음부터 재생된다. */
@media (prefers-reduced-motion: no-preference){
  html.motion-ready [data-reveal]:not(.is-in):not(:focus-within){opacity:0}
  html.motion-ready [data-reveal].is-in:not([data-reveal-now]){animation:var(--hm-dur-reveal) var(--hm-ease) calc(var(--reveal-i,0) * var(--hm-stagger)) backwards!important}
  html.motion-ready [data-reveal="line"].is-in:not([data-reveal-now]){animation-name:reveal-line!important}
  html.motion-ready [data-reveal="mask"].is-in:not([data-reveal-now]){animation-name:reveal-mask!important}
  html.motion-ready [data-reveal="rise"].is-in:not([data-reveal-now]){animation-name:reveal-rise!important}
  html.motion-ready [data-reveal="fade"].is-in:not([data-reveal-now]){animation-name:reveal-fade!important}
  html.motion-ready [data-reveal="zoom"].is-in:not([data-reveal-now]){animation-name:reveal-zoom!important}
  /* line — 제 자리 아래 선에서 떠오르는 마스크(투명도는 건드리지 않는다 — 제목 띠) */
  @keyframes reveal-line{from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{clip-path:inset(-.2em -.2em -.3em -.2em)}}
  /* mask — 사진이 아래에서 위로 걷히며 1.06에서 제 크기로 */
  @keyframes reveal-mask{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}to{clip-path:inset(0)}}
  @keyframes reveal-rise{from{opacity:0;transform:translateY(var(--hm-shift))}}
  @keyframes reveal-fade{from{opacity:0}}
  @keyframes reveal-zoom{from{opacity:0;transform:scale(1.08)}}
  /* 문서 간 전환 — 크로스페이드(지원 브라우저만). 홈 소식 카드·게시판 글에 대표 사진이 없어 사진 이어짐(공유 요소)은 두지 않는다(2026-09-26 실측) */
  @view-transition{navigation:auto}
  ::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--hm-ease)}
}