/* SNSAgent 화면 움직임 CSS (motion.js 와 짝). base.css 가 불러오고, base.css 를 쓰지 않는 화면(상품 고르기)은 직접 불러온다. */

/* ---------- 움직임 v2 (motion.js가 html.motion 을 붙였을 때만) ----------
   곡선 세 가지: 기본(처음 빠르고 부드럽게 멈춤) · 넘었다 돌아옴(작은 표시만) · 양쪽 부드럽게(그리기).
   길어도 1.4초. 계속 반복하는 것은 '실시간' 점의 잔잔한 물결 하나뿐. */
:root { --ease: cubic-bezier(.22, .8, .24, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }
.motion .m-rise { animation: sa-rise .62s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.motion .m-enter { animation: sa-enter .9s var(--ease) both; animation-delay: var(--d, 0ms); }
.motion .m-wipe { animation: sa-wipe 1.15s var(--ease-in-out) both; animation-delay: var(--d, 0ms); }
.motion .m-grow-x { transform-origin: left center; animation: sa-grow-x .9s var(--ease) both; animation-delay: var(--d, 0ms); }
.motion .m-grow-y { transform-box: fill-box; transform-origin: center bottom; animation: sa-grow-y .7s var(--ease) both; animation-delay: var(--d, 0ms); }
.motion .m-popin { animation: sa-popin .55s var(--ease-back) both; animation-delay: var(--d, 0ms); }
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.motion .rv.is-in { opacity: 1; transform: none; }
/* 제목 줄이 아래에서 올라옴 */
.motion .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.motion .ln > span { display: inline-block; animation: sa-line 1s var(--ease) both; animation-delay: calc(var(--d, 0ms) + var(--li, 0) * 120ms); }
/* 바뀐 숫자가 잠깐 빛남 */
.motion .m-flash { animation: sa-flash 1.6s var(--ease) both; border-radius: 6px; }
.motion .m-flash[data-dir="down"] { animation-name: sa-flash-down; }
/* 배지 숫자가 바뀌면 통 */
.motion .m-bump { animation: sa-bump .6s var(--ease-back); }
/* 실시간 점: 잔잔한 물결 */
.m-pulse { position: relative; }
.motion .m-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: sa-ping 2.4s var(--ease) infinite; pointer-events: none; }
/* 읽은 만큼 막대 (회사 소개) */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #1A4FBA, #8DB0FF); pointer-events: none; }
/* 확인 표시: 동그라미 → 체크가 그려짐 */
.m-check { display: block; width: 64px; height: 64px; }
.m-check circle { fill: none; stroke: var(--teal); stroke-width: 3; }
.m-check path { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.motion .m-check { animation: sa-popin .6s var(--ease-back) both; }
.motion .m-check circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sa-draw .7s var(--ease-in-out) .1s forwards; }
.motion .m-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sa-draw .45s var(--ease) .65s forwards; }
.m-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }
/* 버튼: 누르면 살짝 들어가고, 화살표는 앞으로 */
.motion .btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .18s var(--ease), box-shadow .25s var(--ease); }
.motion .btn:active:not([disabled]) { transform: scale(.975); }
.motion .btn-primary:hover:not([disabled]) { box-shadow: 0 8px 22px rgba(26, 79, 186, .28); }
.btn .ph-arrow-right, .btn .ph-arrow-up-right, .btn .ph-arrow-square-out { transition: transform .28s var(--ease); }
.btn:hover .ph-arrow-right { transform: translateX(4px); }
.btn:hover .ph-arrow-up-right, .btn:hover .ph-arrow-square-out { transform: translate(2px, -2px); }
[data-counting] { font-variant-numeric: tabular-nums; }
/* 버튼 완료 모양 (복사됨 · 저장됨) */
.btn.m-done, .btn.m-done:hover { background: var(--teal, #0F6B5E); border-color: var(--teal, #0F6B5E); color: #fff; }
.motion .btn.m-done { animation: sa-done .45s var(--ease-back); }
.motion .btn.m-done .ph-check { animation: sa-popin .45s var(--ease-back) .05s both; }
@keyframes sa-done { 0% { transform: scale(.94); } 100% { transform: none; } }
@keyframes sa-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sa-enter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes sa-line { from { transform: translateY(108%); } to { transform: none; } }
@keyframes sa-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sa-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sa-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sa-popin { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sa-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes sa-flash { 0%, 30% { background-color: rgba(15, 107, 94, .16); box-shadow: 0 0 0 4px rgba(15, 107, 94, .16); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
@keyframes sa-flash-down { 0%, 30% { background-color: rgba(26, 79, 186, .14); box-shadow: 0 0 0 4px rgba(26, 79, 186, .14); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
@keyframes sa-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes sa-ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sa-draw { to { stroke-dashoffset: 0; } }

/* 화면 사이를 옮길 때: 본문만 부드럽게 바뀌고 왼쪽 메뉴는 그대로 (Chrome · Edge) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: sa-vt-out .18s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: sa-vt-in .42s var(--ease) both; }
  .side { view-transition-name: sa-side; }
  .proto-bar { view-transition-name: sa-proto; }
  ::view-transition-group(sa-side), ::view-transition-group(sa-proto) { animation-duration: 0s; }
}
@keyframes sa-vt-out { to { opacity: 0; } }
@keyframes sa-vt-in { from { opacity: 0; transform: translateY(12px); } }


/* ======================================================================
   움직임 v3 (기록 25: "전체적으로 애니메이션을 더") — 모든 화면 공통. html.motion 일 때만.
   눌러서 반응하는 것(버튼 · 카드 · 메뉴 · 아이콘)은 손에 닿는 느낌을, 큰 사진은 아주 천천히 숨 쉬듯.
   ====================================================================== */
/* 누를 수 있는 카드: 살짝 떠오름 */
.motion a.card, .motion a.tile, .motion .card[data-open], .motion .quick-grid a, .motion .lcard {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s ease; }
.motion a.card:hover, .motion a.tile:hover, .motion .card[data-open]:hover, .motion .lcard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(10, 18, 38, .45); }
/* 색 아이콘 칸: 마우스를 올리면 톡 (링크 · 버튼 · 카드 안) */
.motion .ic > i, .motion .kic > i, .motion .tile-ic > i, .motion .quick-grid .ph { transition: transform .45s var(--ease-back, cubic-bezier(.34, 1.56, .64, 1)); }
.motion a:hover .ic > i, .motion button:hover .ic > i, .motion .card:hover > .ic > i, .motion .pcard:hover .ic > i,
.motion .kpi:hover .kic > i, .motion .sig .clm-steps > div:hover .tile-ic > i { transform: scale(1.14) rotate(-8deg); }
.motion .quick-grid a:hover .ph { transform: translateY(-4px) rotate(-6deg); }
/* 숫자 칸: 아이콘 칸이 살짝 떠오름 */
.motion .kpi { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.motion .kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -24px rgba(10, 18, 38, .4); }
/* 왼쪽 메뉴: 아이콘이 앞으로, 지금 화면 표시가 자라남 */
.motion .side-nav a i { transition: transform .3s var(--ease); }
.motion .side-nav a:hover i { transform: translateX(3px) scale(1.08); }
.motion .side-nav a[aria-current="page"] { animation: sa-nav-in .5s var(--ease) both; }
@keyframes sa-nav-in { from { background-color: transparent; } }
/* 입력 칸: 고르면 테두리 빛이 퍼짐 */
.motion .input, .motion .select, .motion textarea { transition: border-color .2s ease, box-shadow .3s var(--ease), background-color .2s ease; }
/* 표: 줄에 마우스를 올리면 */
.motion .dtable tbody tr { transition: background-color .2s ease; }
/* 큰 사진: 아주 천천히 다가옴 (신청 페이지 첫 화면 · 사진 칸) */
@keyframes sa-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, -.8%); } }
/* 반짝 지나가는 빛 (중요한 버튼) */
@keyframes sa-shine { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.motion .m-shine { position: relative; overflow: hidden; }
.motion .m-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: sa-shine 5s ease-in-out 2s infinite; pointer-events: none; }
/* 글 줄 바꿈: 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 */
h1, h2, .display, .h2, .sx-h2, .hb-copy h1 { text-wrap: balance; }
p, .lead, .sx-lead { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}