/* EconaKor motion system — 차분하고 정돈된 전환. transform/opacity 위주, 한 번만 재생.
   모든 '숨김' 초기 상태는 html.js 아래에서만 적용 → JS가 실패해도 내용은 보인다. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:200ms; --dur-base:420ms; --dur-slow:1000ms; --dur-img:1500ms;
  --rise:28px; --rise-sm:16px; --rise-item:18px; --lift:-3px; --stagger:110ms;
  --mt-line:var(--line,#E4DED2);
}
@media (max-width:760px){:root{--rise:18px;--rise-item:14px;--dur-slow:800ms}}
html{interpolate-size:allow-keywords}

/* ── 페이지 전환 ───────────────────────── */
@view-transition{navigation:auto}
@keyframes mt-out{to{opacity:0}}
@keyframes mt-in{from{opacity:0}}
::view-transition-old(root){animation:mt-out 220ms var(--ease-soft) both}
::view-transition-new(root){animation:mt-in 380ms var(--ease-out) both}
#hd, body>header{view-transition-name:site-header}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
html.is-leaving body{opacity:0;transition:opacity 180ms var(--ease-soft)}

/* ── 스크롤 등장 ───────────────────────── */
html.js .reveal, html.js [data-reveal]{
  opacity:0; transform:translate3d(0,var(--rise),0);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js .reveal.is-in, html.js .reveal.in, html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal-stagger] > *{
  opacity:0; transform:translate3d(0,var(--rise-item),0);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
html.js [data-reveal-stagger].is-in > *{opacity:1;transform:none}

/* 섹션 안 사진: 아주 살짝 확대된 상태에서 제자리로 */
html.js .reveal :is(.fieldwide,.procpic,.apic,figure.scene) img,
html.js :is(.fieldwide,.procpic,.apic,figure.scene).reveal img{
  opacity:0; transform:scale(1.04);
  transition:opacity var(--dur-img) var(--ease-out), transform var(--dur-img) var(--ease-out);
}
html.js .reveal.is-in :is(.fieldwide,.procpic,.apic,figure.scene) img,
html.js :is(.fieldwide,.procpic,.apic,figure.scene).reveal.is-in img{opacity:1;transform:none}
:is(.fieldwide,.procpic,.apic,figure.scene,figure.cover){overflow:hidden}

/* 구분선이 왼쪽에서 오른쪽으로 그어짐: [data-line] */
[data-line]{position:relative}
[data-line]::before,[data-line]::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--mt-line);
  transform-origin:left;
}
[data-line]::before{top:0}
[data-line]::after{bottom:0}
html.js [data-line]::before, html.js [data-line]::after{
  transform:scaleX(0); transition:transform 1100ms var(--ease-inout);
}
html.js [data-line]::after{transition-delay:150ms}
html.js [data-line].is-in::before, html.js [data-line].is-in::after{transform:scaleX(1)}
[data-line="top"]::after{display:none}

/* 실적 숫자(.projsum): 카운트업 없이 차례로 떠오름 + 선 그리기 */
html.js .projsum .projsum-t{
  opacity:0; transform:translate3d(0,8px,0);
  transition:opacity var(--dur-slow) var(--ease-out) 320ms, transform var(--dur-slow) var(--ease-out) 320ms;
}
html.js .projsum.is-in .projsum-t{opacity:1;transform:none}

/* ── 히어로 첫 화면 ─────────────────────── */
@keyframes mt-rise{from{opacity:0;transform:translate3d(0,var(--rise-sm),0)}to{opacity:1;transform:none}}
@keyframes mt-fade{from{opacity:0}to{opacity:1}}
@keyframes mt-settle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
html.js .hero :is(.badge,h1,.lead,.hero-actions,.hero-checks),
html.js .phero :is(.bc,h1,p),
html.js section.hero :is(.kicker,h1,.subtitle,.meta,.lead){
  animation:mt-rise var(--dur-slow) var(--ease-out) both;
}
html.js .hero .badge, html.js .phero .bc, html.js section.hero .kicker{animation-delay:100ms}
html.js .hero h1, html.js .phero h1, html.js section.hero h1{animation-delay:180ms}
html.js .hero .lead, html.js .phero p, html.js section.hero :is(.subtitle,.lead){animation-delay:260ms}
html.js .hero .hero-actions, html.js section.hero .meta{animation-delay:340ms}
html.js .hero .hero-checks{animation-delay:420ms}
html.js .hero .hero-img, html.js section.hero figure.cover img{animation:mt-settle var(--dur-img) var(--ease-out) both}
html.js .hero .hero-float{animation:mt-rise var(--dur-slow) var(--ease-out) 500ms both}
html.js .hero-visual::before{animation:mt-fade 900ms var(--ease-soft) 600ms both}

/* ── 헤더 ───────────────────────────── */
#hd, body>header{
  transition:box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft);
}
body>header.scrolled{box-shadow:0 6px 24px rgba(18,24,26,.06)}

/* 메뉴 밑줄: width 대신 scaleX */
.menu a{position:relative}
.menu a::after{
  width:100% !important; transform:scaleX(0); transform-origin:right;
  transition:transform 350ms var(--ease-inout) !important;
}
.menu a:hover::after, .menu a.on::after, .menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* 읽기 진행 막대(글 페이지만, JS가 .mt-progress 생성) */
.mt-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:var(--brass-lt,var(--brass-l,#C9A96A));transform:scaleX(var(--p,0));transform-origin:left}

/* ── 버튼 · 링크 ─────────────────────── */
:is(.btn,.cta,.mcta,.lab-a,.sub-btn,.rb-btn,.back,.opt a,.pn a,.ibcats a,.f-legal a,footer a){
  transition:color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft) !important;
}
.btn .arrow{transition:transform 300ms var(--ease-out) !important}
.btn:hover .arrow{transform:translateX(3px)}

/* ── 카드 ───────────────────────────── */
:is(.card,.case,.rt,.post){transition:transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out), border-color var(--dur-base) var(--ease-soft) !important}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  :is(.card,.case,.rt):hover{transform:translateY(var(--lift)) !important;box-shadow:0 14px 34px rgba(18,24,26,.07) !important}
  body:has(> header .mmenu) .card:hover{transform:none !important;box-shadow:none !important}
  .card :is(.thumb,figure){overflow:hidden}
  .card img{transition:transform 900ms var(--ease-out)}
  body:has(> header .mmenu) .card:hover img{transform:scale(1.03)}
  .card h2{transition:color 300ms var(--ease-soft)}
}

/* ── FAQ(details) ───────────────────── */
details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size 400ms var(--ease-inout), content-visibility 400ms allow-discrete;
}
details[open]::details-content{block-size:auto}
details summary::after{transition:transform 300ms var(--ease-inout) !important}

/* ── 모바일 메뉴 ─────────────────────── */
html.js :is(.mobmenu,.mmenu)#mm{
  display:block !important; visibility:hidden; opacity:0; transform:translate3d(0,-8px,0); pointer-events:none;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
html.js :is(.mobmenu,.mmenu)#mm.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
html.js #mm.open a{animation:mt-rise 420ms var(--ease-out) both}
html.js #mm.open a:nth-child(2){animation-delay:40ms}
html.js #mm.open a:nth-child(3){animation-delay:80ms}
html.js #mm.open a:nth-child(4){animation-delay:120ms}
html.js #mm.open a:nth-child(5){animation-delay:160ms}
.burger span{transition:transform 300ms var(--ease-inout), opacity 200ms var(--ease-soft) !important;transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(var(--bg-gap,6px)) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(var(--bg-gap,6px) * -1)) rotate(-45deg)}

/* ── 폼 ─────────────────────────────── */
:is(input,textarea,select){transition:border-color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft)}
:is(input,textarea,select):focus-visible{box-shadow:0 0 0 3px rgba(28,58,50,.08)}
.is-shown{animation:mt-rise 400ms var(--ease-out) both}

/* ── 움직임 줄이기 설정(윈도우 '애니메이션 효과' 끔 등) ───
   이동·확대는 빼고, 부드러운 페이드와 선 그리기는 유지한다. */
@media (prefers-reduced-motion:reduce){
  :root{--rise:0px;--rise-sm:0px;--rise-item:0px;--lift:0px}
  html.js .reveal img, html.js .projsum .projsum-t, html.js #mm{transform:none !important}
  @keyframes mt-settle{from{opacity:0}to{opacity:1}}
  html{scroll-behavior:auto}
}