/* eCAM 카탈로그 모션 — motion.js 가 <html> 에 js-motion 을 붙인 뒤에만 숨김·등장 효과가 걸린다.
   m-rm = 동작 줄이기(prefers-reduced-motion) · m-ready = 초기화 완료(안전 표시 해제) */
:root{--m-e:cubic-bezier(.2,.7,.2,1)}

/* ── 상단 고정 바: 스크롤하면 60→52 로 눌림(transform 만 써서 레이아웃 이동 없음) ── */
header.top{transition:transform .28s var(--m-e),box-shadow .28s var(--m-e)}
header.top .wrap{transition:transform .28s var(--m-e)}
header.top.m-compact{transform:translateY(-8px);box-shadow:0 4px 18px rgba(30,42,33,.09)}
header.top.m-compact .wrap{transform:translateY(4px)}

/* ── 버튼 눌림 · 카드 들림 ── */
.btn,a.pdf{transition:transform .12s var(--m-e),box-shadow .2s var(--m-e),background-color .2s}
.btn:active,a.pdf:active{transform:translateY(1px) scale(.97)}
@media (hover:hover){
  .btn.pri:hover{box-shadow:0 6px 16px -6px rgba(63,125,82,.55)}
  .feat a.shot,.lead-feat a.shot,.bt-media a.shot,.m-cmp,.m-chat{transition:transform .26s var(--m-e),box-shadow .26s var(--m-e)}
  .feat:hover a.shot,.feat:hover .m-cmp,.lead-feat:hover a.shot,.lead-feat:hover .m-cmp,.bt-media a.shot:hover,.m-chat:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(30,42,33,.28)}
}

/* ── 히어로 배경: PCB 배선 선 그리기 ── */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:1}
.m-hero-bg{position:absolute;left:0;top:0;width:100%;height:560px;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.m-hero-bg path{fill:none;stroke:#3F7D52;stroke-opacity:.2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-hero-bg circle{fill:#fff;stroke:#3F7D52;stroke-opacity:.26;stroke-width:1.6}

/* ── 히어로 등장 ── */
@keyframes m-rise{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes m-word{from{transform:translate3d(0,108%,0)}}
@keyframes m-frame{from{opacity:0;transform:scale(.96)}}
@keyframes m-draw{from{stroke-dashoffset:1}}
@keyframes m-pop{from{opacity:0;transform:scale(.4)}}
@keyframes m-show{to{opacity:1;transform:none}}
html.js-motion:not(.m-rm) .hero .label{animation:m-rise .36s var(--m-e) both}
html.js-motion:not(.m-rm) .hero h1:not(.m-split){opacity:0;animation:m-show 0s 1.6s forwards}
.m-wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.m-w{display:inline-block}
html.js-motion:not(.m-rm) .m-w{animation:m-word .44s var(--m-e) both;animation-delay:calc(60ms + var(--i,0) * 55ms)}
html.js-motion:not(.m-rm) .hero .row>*{animation:m-rise .4s var(--m-e) both}
html.js-motion:not(.m-rm) .hero .row>:nth-child(1){animation-delay:.34s}
html.js-motion:not(.m-rm) .hero .row>:nth-child(2){animation-delay:.42s}
html.js-motion:not(.m-rm) .hero .row>:nth-child(3){animation-delay:.5s}
html.js-motion:not(.m-rm) .hero .frame{transform-origin:50% 0;animation:m-frame .62s var(--m-e) .22s both}
html.js-motion:not(.m-rm) .hero .cap{animation:m-rise .4s var(--m-e) .6s both}
html.js-motion:not(.m-rm) .hero .specs{animation:m-rise .42s var(--m-e) .68s both}
html.js-motion:not(.m-rm) .m-hero-bg path{animation:m-draw 1.5s cubic-bezier(.45,.05,.2,1) both}
html.js-motion:not(.m-rm) .m-hero-bg circle{transform-box:fill-box;transform-origin:center;animation:m-pop .3s var(--m-e) both}
.m-hero-bg g:nth-of-type(1) path{animation-delay:.08s}
.m-hero-bg g:nth-of-type(2) path{animation-delay:.3s}
.m-hero-bg g:nth-of-type(3) path{animation-delay:.42s}
.m-hero-bg g:nth-of-type(4) path{animation-delay:.6s}
.m-hero-bg circle{animation-delay:1.4s}

/* ── 스크롤 등장(motion.js 가 화면에 들어온 항목에 m-in) ── */
html.js-motion:not(.m-rm) :is(.head,.flow>li,.mods,.addon,.tbl,.bt>div,.lyr>*,figure.lyr-fig,.lead-feat,.feat,.vid,.os-line,p.foot,.contact .box){
  transition:opacity .38s var(--m-e) var(--m-d,0s),transform .44s var(--m-e) var(--m-d,0s)}
html.js-motion:not(.m-rm) :is(.head,.flow>li,.mods,.addon,.tbl,.bt>div,.lyr>*,figure.lyr-fig,.lead-feat,.feat,.vid,.os-line,p.foot,.contact .box):not(.m-in){
  opacity:0;transform:translate3d(0,22px,0)}
/* 스크립트가 도중에 멈추면 3초 뒤 모두 보이게 */
html.js-motion:not(.m-ready):not(.m-rm) :is(.head,.flow>li,.mods,.addon,.tbl,.bt>div,.lyr>*,figure.lyr-fig,.lead-feat,.feat,.vid,.os-line,p.foot,.contact .box){animation:m-show 0s 3s forwards}
.flow .n,.m-num{font-variant-numeric:tabular-nums}

/* ── 전후 비교 슬라이더(스크립트 있을 때만 원본 그림 대신 표시) ── */
.m-cmp{display:none;position:relative;aspect-ratio:746/420;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0e1013;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;--p:50%}
html.js-motion .m-cmp{display:block}
html.js-motion .m-cmp+a.lb{display:none}
.m-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.m-cmp .m-b{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
/* 레일은 슬라이더와 같은 폭 → translateX(--p) 가 곧 위치(레이아웃 이동 없음) */
.m-cmp-rail{position:absolute;inset:0;transform:translateX(var(--p));pointer-events:none}
.m-cmp-line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(14,16,19,.3)}
.m-cmp-h{position:absolute;top:50%;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:auto;border-radius:50%;background:#fff;border:2px solid var(--brand);
  display:grid;place-items:center;color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.3);outline:none}
.m-cmp-h svg{width:20px;height:20px}
.m-cmp-h:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--brand)}
.m-cmp.m-drag .m-cmp-h{transform:scale(1.08)}
.m-cmp-tag{position:absolute;top:10px;font-size:12px;font-weight:500;line-height:1.5;padding:1px 8px;border-radius:4px;background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--line);pointer-events:none}
.m-cmp-tag.l{left:10px}.m-cmp-tag.r{right:10px}

/* ── BridgeTalk 대화 연출 ── */
.m-chat{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:14px 16px 16px;font-size:14px;line-height:1.5}
.m-chat-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}
.m-chat-top b{font-size:13px;font-weight:500;color:var(--ink)}
.m-chat-top .badge{margin-left:auto}
.m-msg{position:relative;max-width:88%;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  transition:opacity .3s var(--m-e),transform .34s var(--m-e)}
.m-msg.r{margin-left:auto;background:var(--sel);border-color:var(--border)}
.m-who{display:block;font-size:11px;color:var(--ink3)}
.m-msg .o,.m-msg .t{display:block;transition:opacity .3s var(--m-e)}
.m-msg .o{color:var(--ink)}
.m-msg .t{color:var(--brand);font-size:13px;margin-top:2px}
.m-msg.r .t{color:var(--sel-ink)}
.m-msg .t::before{content:"\21B3\00a0";color:var(--ink3)}
.m-dots{display:none;position:absolute;left:12px;top:24px;gap:4px}
.m-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:m-dot .9s infinite ease-in-out}
.m-dots i:nth-child(2){animation-delay:.15s}.m-dots i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
html.js-motion:not(.m-rm) .m-chat:not(.m-done) .m-msg:not(.m-on){opacity:0;transform:translate3d(0,10px,0)}
html.js-motion:not(.m-rm) .m-chat:not(.m-done) .m-msg:not(.m-o) .o,
html.js-motion:not(.m-rm) .m-chat:not(.m-done) .m-msg:not(.m-t) .t{opacity:0}
.m-msg.m-typing .m-dots{display:flex}

/* ── 동작 줄이기: 움직임 없이 최종 상태 ── */
@media (prefers-reduced-motion:reduce){
  header.top,header.top .wrap,.btn,a.pdf,.feat a.shot,.lead-feat a.shot,.bt-media a.shot,.m-cmp,.m-chat,.m-msg,.m-msg .o,.m-msg .t{transition:none!important}
  .m-hero-bg *,.m-w,.m-dots i{animation:none!important}
  .btn:active,a.pdf:active{transform:none}
}

/* ── 인쇄: 움직임 없음, 모두 보임, 슬라이더 대신 원본 그림 ── */
@media print{
  .m-hero-bg,.m-cmp,.m-chat{display:none!important}
  html.js-motion .m-cmp+a.lb{display:block!important}
  html.js-motion *{animation:none!important;transition:none!important}
  html.js-motion :is(.head,.flow>li,.mods,.addon,.tbl,.bt>div,.lyr>*,figure.lyr-fig,.lead-feat,.feat,.vid,.os-line,p.foot,.contact .box,.hero h1,.hero .frame){opacity:1!important;transform:none!important}
  header.top{transform:none!important;box-shadow:none!important}
}