/* MOVING 카테고리 페이지 세부 다듬기 (2026-10-06) — 메인(jy-home) 방식을 그대로 본뜸.
   대상: /solutions(허브), /solutions/eyes·sound·air·guard·story. 큰 틀은 그대로 두고 등장·반응·일관성만 얹는다.
   이 파일과 jy-cat.js 를 빼면 원래 화면으로 돌아간다. 숨김은 스크립트가 html.jc-on 을 켤 때만. */
:root{
  --jc-ease:cubic-bezier(.16,1,.3,1);            /* 끝에서 부드럽게 멈추는 곡선(메인과 같음) */
  --jc-press:cubic-bezier(.2,.8,.2,1);
  --jc-green:oklch(.462 .114 151.5);             /* 브랜드 초록 = 섹션 머리말 색 */
  --jc-word:45ms;                                /* 낱말 사이 간격 */
}

/* 1. 섹션 제목: 낱말 단위로 아래→위, 흐림→선명. 메인(jy-home)처럼 낱말을 글줄 그대로(inline) 두고 top 으로 올린다.
   inline-block 상자로 두면 삼성 인터넷(폴드 외부화면 등)에서 상자 폭이 글자보다 좁게 잡혀 끝 글자가 아랫줄로 떨어졌다('남기/지').
   nowrap: 낱말 안에서는 어떤 경우에도 줄을 바꾸지 않음 */
html.jc-on .jc-w{position:relative;top:.42em;white-space:nowrap;opacity:0;filter:blur(7px);
  transition:top 1s var(--jc-ease),opacity .7s var(--jc-ease),filter .9s var(--jc-ease);
  transition-delay:calc(var(--jc-d,0ms) + var(--i,0) * var(--jc-word))}
html.jc-on .is-jc-in .jc-w{top:0;opacity:1;filter:blur(0)}
/* 머리말·설명·버튼 줄: 제목 뒤에 따라 올라옴 */
html.jc-on .jc-up{opacity:0;translate:0 14px;transition:opacity .8s var(--jc-ease),translate 1s var(--jc-ease);transition-delay:var(--jc-d,0ms)}
html.jc-on .jc-up.is-jc-in{opacity:1;translate:0 0}
/* 이미 지나간 자리(새로고침·바로가기)는 움직임 없이 바로 보임 */
html.jc-on .jc-instant .jc-w,html.jc-on .jc-instant.jc-w,html.jc-on .jc-up.jc-instant{transition:none!important}
/* 스크립트가 켜지는 순간: 이미 그려져 있던 글이 '사라지는 전환'을 돌지 않게 전환 없이 숨김(다음 장면에서 걷음) */
html.jc-init :is(.jc-w,.jc-up,.jc-settle){transition:none!important}
/* 기존 덩어리 등장(data-reveal-managed)과 겹치지 않게: 내가 맡은 '문제' 섹션은 기존 등장을 끄고 내 등장만 */
html.jc-on [data-jc-own]>*{animation:none!important;transform:none!important}
html.jc-on [data-jc-own]>:not(.jc-up){opacity:1!important}
html.jc-on [data-jc-own]>.jc-up:not(.is-jc-in){opacity:0!important}
html.jc-on [data-jc-own]>.jc-up.is-jc-in{opacity:1!important}

/* 제목 속 'N개' 숫자: 0부터 셈. 폭이 흔들리지 않게 고정폭 숫자 + 마지막 수의 폭을 미리 잡아 둠(스크립트) */
.jc-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}

/* 2. 첫 화면: (머리말 →) 제목 → 버튼 차례.
   첫 화면만은 페이지 머리의 기존 스크립트가 첫 그림 전에 켜는 표시(html[data-motion=on])에 건다.
   jy-cat.js 는 첫 그림 뒤에 도는 일이 많아(실제 배포에서는 거의 항상), 거기에 걸면 보이던 제목이 한 번 사라졌다 다시 나타난다.
   CSS 애니메이션이라 스크립트가 실패해도 0.9초 안에 스스로 끝나 글자가 남지 않고, 움직임 줄이기면 표시 자체가 안 켜진다. */
@keyframes jc-rise{from{opacity:0;translate:0 14px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
html[data-motion=on] .solution-hero--axis #solution-title{animation:jc-rise .9s var(--jc-ease) .05s both}
html[data-motion=on] .solution-hero--axis .solution-hero__content>.button{animation:jc-rise .9s var(--jc-ease) .35s both}
html[data-motion=on] .solutions-cover .hub-label{animation:jc-rise .9s var(--jc-ease) .05s both}
html[data-motion=on] #solutions-title{animation:jc-rise .9s var(--jc-ease) .12s both}
html[data-motion=on] .solutions-cover__lead{animation:jc-rise .9s var(--jc-ease) .28s both}
html[data-motion=on] .solutions-cover .cover-link{animation:jc-rise .9s var(--jc-ease) .4s both}
/* 등장이 끝나면 애니메이션을 걷어 스크롤 물러남(스크립트가 넣는 값)이 먹게 함 */
html .jc-done{animation:none!important}
/* 스크롤 시 글 묶음이 물러나는 기준점: 제목은 왼쪽 아래, 버튼은 자기 자리 */
html.jc-on .solution-hero--axis #solution-title{transform-origin:0 100%}
html.jc-on .solution-hero--axis .solution-hero__content>.button{transform-origin:100% 100%}
html.jc-on .solutions-cover__copy{transform-origin:0 0}
@media (max-width:800px){html.jc-on .solution-hero--axis .solution-hero__content>.button{transform-origin:0 50%}}
.jc-nw{white-space:nowrap}

/* 허브 첫 화면 → 흰 장: 어두운 첫 화면 아래로 다음 섹션이 둥근 윗모서리로 올라탄 모양.
   첫 화면 아래 여백을 장 높이만큼 늘려, 원래 보이던 'MOVING' 아래 여백은 그대로 둠 */
:root:not(#jc) #solutions-edition .solutions-cover{position:relative;isolation:isolate;padding-bottom:calc(var(--space-48) + 28px)}
:root:not(#jc) #solutions-edition .solutions-cover::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:29px;z-index:6;pointer-events:none;
  background:var(--surface-canvas);border-radius:28px 28px 0 0;box-shadow:0 -22px 44px -30px rgb(0 0 0/.55)}
@media (max-width:767px){
  :root:not(#jc) #solutions-edition .solutions-cover{padding-bottom:calc(var(--space-48) + 22px)}
  :root:not(#jc) #solutions-edition .solutions-cover::after{height:23px;border-radius:22px 22px 0 0}
}
.jc-dim{position:absolute;inset:0;z-index:5;pointer-events:none;background:#04070d;opacity:0}

/* 3. 큰 덩어리 안착: 허브의 분야 펼침 묶음이 살짝 아래·작게 있다가 제자리로 */
html.jc-on .jc-settle{translate:0 36px;scale:.975;opacity:0;transition:translate 1.2s var(--jc-ease),scale 1.2s var(--jc-ease),opacity .9s var(--jc-ease)}
html.jc-on .jc-settle.is-jc-in{translate:0 0;scale:1;opacity:1}
html.jc-on .jc-settle.jc-instant{transition:none}

/* 4. 반응 */
/* 허브 제품 줄: 올리면 바깥으로 넓고 둥근 띠(그 분야 색), 화살표가 오른쪽으로, 누르면 살짝 들어감 */
:root:not(#jc) .solution-fold__products li a{position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:scale .14s var(--jc-press)}
:root:not(#jc) .solution-fold__products li a::before{content:"";position:absolute;inset:2px -14px;border-radius:12px;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--sense-color,var(--jc-green)) 6%,#f4f6f5);opacity:0;transition:opacity .2s ease}
:root:not(#jc) .solution-fold__products li a:focus-visible::before{opacity:1}
:root:not(#jc) .solution-fold__products li a:active{scale:.99}
:root:not(#jc) .solution-fold__products li a:active::before{opacity:1;background:color-mix(in srgb,var(--sense-color,var(--jc-green)) 11%,#f4f6f5)}
/* 화살표: 가리키는 쪽으로 밀림(→·↗ 오른쪽 4px, ↓ 아래 3px) */
:root:not(#jc) :is(.solution-fold a>span[aria-hidden],.solution-fold .jc-arr,.cover-link>span[aria-hidden]){display:inline-block;transition:translate .28s var(--jc-ease)}
:root:not(#jc) .solution-fold a:focus-visible :is(span[aria-hidden],.jc-arr){translate:4px 0}
:root:not(#jc) .cover-link:focus-visible>span[aria-hidden]{translate:0 3px}
@media (hover:hover){
  :root:not(#jc) .solution-fold__products li a:hover::before{opacity:1}
  :root:not(#jc) .solution-fold a:hover :is(span[aria-hidden],.jc-arr){translate:4px 0}
  :root:not(#jc) .cover-link:hover>span[aria-hidden]{translate:0 3px}
}
/* 분야 펼침 카드: 머리를 누르면 카드가 살짝 들어감(휴대폰 회색 네모 대신) */
:root:not(#jc) #solutions-edition .solution-fold{transition:box-shadow .22s,scale .16s var(--jc-press)}
:root:not(#jc) #solutions-edition .solution-fold:has(>summary:active){scale:.995}
/* 글 링크(분야 자세히·전체 보기·솔루션 찾기): 누르면 살짝 들어감 */
:root:not(#jc) :is(.solution-fold__statement>a,.solution-fold .all-products,.cover-link){transition:scale .14s var(--jc-press)}
:root:not(#jc) :is(.solution-fold__statement>a,.solution-fold .all-products,.cover-link):active{scale:.98}
/* 휴대폰: 누를 때 생기는 회색 네모를 없앰(눌림 반응은 위·기존 버튼 누름이 맡음) */
:root:not(#jc) #main-content :is(.button,.cover-link,.solution-fold summary,.solution-fold a,.product-card a){-webkit-tap-highlight-color:transparent}
/* 제품 카드: 마우스 기기는 기존 누름이 있으므로 그대로, 손가락 기기에만 누름 반응을 더함 */
@media (hover:none),(pointer:coarse){
  :root:not(#jc) #main-content .product-card{transition:border-color var(--motion-hover) var(--ease-hover),box-shadow var(--motion-hover) var(--ease-hover),transform var(--motion-hover) var(--ease-hover),scale .14s var(--jc-press)}
  :root:not(#jc) #main-content .product-card:has(a:active){scale:var(--scale-press,.985)}
}

/* 5. 일관성 */
/* 섹션 머리말: 메인과 같은 모양(브랜드 초록 15px 굵게). 어두운 첫 화면 머리말은 그대로 */
:root:not(#jc) :is(.solution-selection,.solution-fit) .hub-label{color:var(--jc-green)!important;font-size:15px!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.5!important}
/* 큰 제목: 메인과 같은 줄간격·자간, 줄 고르게, 낱말 안 쪼갬 */
:root:not(#jc) :is(#category-problem-title,#product-title,#solution-axes-title,.solution-fit h2){line-height:1.26!important;text-wrap:balance;word-break:keep-all}
/* 영문 'MOVING ○○'이 섞인 제품 제목은 원래 자간 유지(촘촘해 보이지 않게), 한글 제목만 메인과 같은 자간 */
:root:not(#jc) :is(#category-problem-title,#solution-axes-title,.solution-fit h2){letter-spacing:-.035em!important}
/* 허브 펼침 속 큰 문장도 줄을 고르게(끝 줄에 '수 있도록'만 남지 않게) */
:root:not(#jc) .solution-fold__statement>p{text-wrap:balance}

@media (prefers-reduced-motion:reduce){
  html :is(#solution-title,.solution-hero__content>.button,.solutions-cover .hub-label,#solutions-title,.solutions-cover__lead,.cover-link){animation:none!important}
  html.jc-on :is(.jc-w,.jc-up,.jc-settle,#solution-title,.solution-hero__content>.button,.solutions-cover .hub-label,.solutions-cover__lead,.cover-link,.solutions-cover__copy){opacity:1!important;translate:none!important;scale:none!important;filter:none!important;animation:none!important;transition:none!important}
}

/* 머리글 숨김·보임을 메인과 같게(0.5초, 부드럽게 멈춤) */
:root:not(#jc) .site-header{transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .3s ease,box-shadow .3s ease!important}