/* JY WORK OS 상세 전용(지시서 1025 JY W2 + 주영 10/25 2차). 값 = E:\JY_OS motion/tokens.json(복사 없이 값만). 모든 규칙은 .jyos 아래
   주황 채움 #df4f24 = 오늘 · 현재 위치 · 주요 행동 · 키보드 초점 네 곳만. 글자 주황 = #a33a17. 곡선 하나, 튐 · 흐림 · 그라데이션 없음
   1~5장 화면 = 실제 앱 스냅샷 iframe(assets/featured/jy/native), 보이는 동안 반복 재생(jy-os.js) */
@property --k{syntax:'<number>';inherits:true;initial-value:0}
@font-face{font-family:Geist;src:url('fonts/Geist-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:is(:root,body):has(.jyos){--paper:#d8d5cd;--ink:#20201e;--muted:#56544e;--line:#b8b4aa;background:#d8d5cd}
.jyos{--field:#d8d5cd;--face:#e9e7e0;--recess:#dedbd3;--quiet:#63615b;--dis:#8a877f;--soft:#cec9c0;--or:#df4f24;--on-or:#121211;--or-ink:#a33a17;--ui:#a33a17;
 --sh1:0 1px 2px rgb(32 32 30 / .08),0 8px 20px -6px rgb(32 32 30 / .16);--sh2:0 1px 3px rgb(32 32 30 / .08),0 18px 44px -14px rgb(32 32 30 / .26);
 --jy-e:cubic-bezier(.22,1,.36,1)}
.jyos :focus-visible{outline:2px solid var(--or);outline-offset:2px}
.jyos :is(h2,h3){text-wrap:balance}
.jyos button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* W3 첫 화면: 화면 가득 소리 없는 고리 영상. 사이트 머리(80px) 밑까지 올림 */
.jyos .jy-hero{position:relative;min-height:100svh;margin:-80px calc(var(--margin) * -1) 0;padding:0 var(--margin) clamp(24px,4vw,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;background:var(--field) var(--poster) center/cover;overflow:hidden}
.jyos .jy-hero video{position:absolute;left:0;top:0;width:100%;height:113%;object-fit:cover;object-position:50% 0}  /* 영상 아래 자막 말풍선은 글 판과 겹쳐 잘라 냄 */
.jyos .jy-hd{position:relative;margin:0;padding:24px 28px 28px;background:var(--face);border:1px solid var(--line);border-radius:16px;box-sizing:border-box;width:calc((100% - var(--gutter) * 11) / 12 * 5 + var(--gutter) * 4)}  /* 12칸 중 5칸 */
@media(max-width:1100px){.jyos .jy-hd{width:calc((100% - var(--gutter) * 11) / 12 * 8 + var(--gutter) * 7)}}
.jyos .jy-hd h1{font-size:clamp(40px,4.4vw,80px);line-height:.95;margin:0}
.jyos .jy-hd .md-sub{margin-top:16px;width:auto;font-size:clamp(20px,1.6vw,28px)}
.jyos .jy-hd .fe-work{margin-top:16px}
.jyos .jy-hd .fe-meta{margin-top:4px}
.jyos .jy-full{position:relative;flex:none;display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;background:var(--or);color:var(--on-or);font-size:16px;font-weight:500;text-decoration:none;box-shadow:var(--sh1);transition:transform 200ms var(--jy-e),box-shadow 200ms var(--jy-e)}
.jyos .jy-full:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.jyos .jy-full:active{transform:scale(.98)}
.jyos .md-ov{padding-top:var(--gap-l)}
@media(max-width:700px){
 .jyos .jy-hero{margin-top:-72px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .jyos .jy-hd{padding:16px 18px 20px;width:100%}
}
@media(prefers-reduced-motion:reduce){.jyos .jy-hero video{display:none}}

/* W4 기능 소개: 왼쪽 8칸 기능별 클립 영상 + 오른쪽 4칸 핵심기능 3개. 호버 · 재생 중 = 주황 2px 줄이 위에서 내려옴 */
.jyos .jy-ft{padding-top:var(--gap-l)}
.jyos .jy-ft-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--gap-s);align-items:start}
.jyos .jy-ft-v{grid-column:1/span 8}
.jyos .jy-ft-v{display:grid;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--ink)}
.jyos .jy-ft-v video{grid-area:1/1;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 320ms var(--jy-e)}
.jyos .jy-ft-v video.is-on{opacity:1}
.jyos .jy-ft-l{grid-column:9/-1;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.jyos .jy-ft-l li{position:relative;padding:20px 0 22px 20px;border-bottom:1px solid var(--line);cursor:pointer}
.jyos .jy-ft-l li::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--or);transform:scaleY(0);transform-origin:top;transition:transform 320ms var(--jy-e)}
.jyos .jy-ft-l li:is(:hover,:focus-within,[aria-current=true])::before{transform:none}
.jyos .jy-ft-l h3{margin:0;font-size:20px;line-height:1.3;font-weight:500;transition:font-size 320ms var(--jy-e)}
.jyos .jy-ft-l li[aria-current=true] h3{font-size:30px}  /* 선택 · 재생 중인 기능 제목이 커짐(주영 10/25 2차) */
.jyos .jy-ft-l button{all:unset;cursor:pointer}
.jyos .jy-ft-l button:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.jyos .jy-ft-l p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:65ch}
@media(max-width:1100px){.jyos .jy-ft-v,.jyos .jy-ft-l{grid-column:1/-1}.jyos .jy-ft-l{margin-top:32px}}

/* 1~5장 반복 재생 판. 판 폭 = 화면 높이에 들어가는 16:9 */
.jyos .jy-x{grid-column:1/-1;margin-top:var(--gap-s)}
.jyos .jy-st{display:grid;justify-items:start;row-gap:20px}  /* 판 · 단추 모두 왼쪽 기준(S75) */
.jyos .jy-st.is-manual{transition:--k 600ms var(--jy-e)}
.jyos [data-jy=fit] .jy-st.is-manual{transition-duration:520ms}
.jyos .jy-st>:last-child{width:100%}  /* 12칸 전체(격자 다듬기 10/25) */
.jyos .jy-nf{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--field);container-type:inline-size}
.jyos .jy-nf iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;transform:scale(var(--s,.5));pointer-events:none}
.jyos .jy-sc.is-live .jy-nf iframe{pointer-events:auto}
/* 단계 이름(1장) · 전/후 단추(2 · 3장): 판 위, 크게 */
.jyos .jy-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin:0;padding:0;list-style:none;width:100%}  /* 4칸 = 12칸의 3칸씩 */
.jyos .jy-steps li{position:relative;padding-top:12px;font-size:18px;color:var(--muted);transition:color 300ms var(--jy-e)}
.jyos .jy-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);transition:background-color 300ms var(--jy-e)}
.jyos .jy-steps li.is-on{color:var(--ink)}
.jyos .jy-steps li.is-on::before{background:var(--or)}
.jyos .jy-hl{position:absolute;border:2px solid var(--or);border-radius:12px;opacity:0;transition:opacity 300ms var(--jy-e);pointer-events:none}  /* 웨더 03-01 핀 문법: 지금 자리 네모 */
.jyos .jy-hl.is-cur{opacity:1}
.jyos .jy-pin{position:absolute;display:flex;gap:8px;align-items:center;padding:6px 12px 6px 6px;border-radius:12px;background:#fff;color:var(--ink);font-size:14px;line-height:1.2;white-space:nowrap;box-shadow:0 10px 24px -12px rgb(18 18 17 / .5);opacity:0;transform:translateY(8px) scale(.96);transition:opacity 300ms var(--jy-e),transform 300ms var(--jy-e);pointer-events:none}
.jyos .jy-pin i{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--or);color:var(--on-or);font:600 11px/1 Montreal,var(--f);font-style:normal}
.jyos .jy-pin.is-on{opacity:1;transform:none}
.jyos .jy-pin.is-on:not(:has(~.jy-pin.is-on)){box-shadow:0 0 0 2px var(--or),0 10px 24px -12px rgb(18 18 17 / .5)}  /* 마지막에 뜬 핀 = 지금 핀 */
.jyos .jy-sw{display:inline-flex;justify-self:start;margin:0;padding:3px;border:1px solid var(--line);border-radius:999px;font-size:15px}  /* 판 왼쪽 위 알약 묶음(S75) */
.jyos .jy-sw button{font:inherit;color:var(--ink);background:none;border:0;padding:6px 20px;border-radius:999px;cursor:pointer;transition:background-color 320ms var(--jy-e)}
.jyos .jy-sw button:hover{background:var(--face)}
.jyos .jy-sw button[aria-pressed=true]{background:var(--or);color:var(--on-or)}

/* W5-2 데스크톱 화면 = 앱 데스크톱 모드 실화면. --k(0 Work → 1 데스크톱)로 겹쳐 바뀜 */
.jyos .jy-desk{position:absolute;inset:0;background:var(--field);opacity:var(--k,0);transform:scale(calc(1.02 - .02 * var(--k,0)));pointer-events:none}  /* S75처럼 살짝 다가오며 겹침 */
.jyos .jy-desk img{display:block;width:100%;height:100%;object-fit:cover}
.jyos .os-ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jyos .os-ic .f{fill:currentColor;stroke:none}

/* W5-3 탐색기 전(둥근 카드 5장, 바탕이 비침) ↔ 후(한 면, 1px 선). --k로 사이가 닫힘 */
.jyos .os-fit{container-type:inline-size}
.jyos .os-fit *{--u:calc(100cqw / 1600)}
.jyos .os-ex{--g:calc(var(--u) * 16 * (1 - var(--k,0)) + 1px * var(--k,0));display:grid;grid-template-columns:calc(var(--u) * 260) 1fr calc(var(--u) * 340);grid-template-rows:calc(var(--u) * 56) calc(var(--u) * 520) calc(var(--u) * 40);grid-template-areas:"side path path" "side list pre" "st st st";gap:var(--g);padding:calc(var(--u) * 16 * (1 - var(--k,0)));background:color-mix(in srgb,var(--line) calc(var(--k,0) * 100%),var(--field));border:1px solid var(--line);border-radius:16px;overflow:hidden;font-family:Pretendard,sans-serif;color:var(--ink);font-size:calc(var(--u) * 14)}
.jyos .os-ex>div{background:var(--face);border-radius:calc(var(--u) * 16 * (1 - var(--k,0)));padding:calc(var(--u) * 18) calc(var(--u) * 22);min-width:0;overflow:hidden}
.jyos .os-ex ul{margin:0;padding:0;list-style:none}
.jyos .os-ex p{margin:0}
.jyos .ex-side{grid-area:side}.jyos .ex-path{grid-area:path;display:flex;align-items:center;gap:calc(var(--u) * 16);padding-block:0 !important;color:var(--muted)}
.jyos .ex-list{grid-area:list}.jyos .ex-pre{grid-area:pre;display:grid;place-content:center;justify-items:center;gap:calc(var(--u) * 8)}
.jyos .ex-pre .os-ic{width:calc(var(--u) * 96);height:calc(var(--u) * 96)}
.jyos .ex-pre small{color:var(--muted)}
.jyos .ex-st{grid-area:st;display:flex;align-items:center;padding-block:0 !important;font-size:calc(var(--u) * 12);color:var(--muted)}
.jyos .ex-lb{margin-bottom:calc(var(--u) * 12) !important;font-size:calc(var(--u) * 11);letter-spacing:.1em;color:var(--quiet)}
.jyos .ex-side li{padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 8)}
.jyos .ex-side .is-cur{background:var(--recess);font-weight:500}
.jyos .ex-hd{display:grid;grid-template-columns:1fr calc(var(--u) * 120) calc(var(--u) * 80);gap:calc(var(--u) * 10);margin:0 0 calc(var(--u) * 6) !important;padding-left:calc(var(--u) * 28);font-size:calc(var(--u) * 11);letter-spacing:.08em;color:var(--quiet)}
.jyos .ex-list li{display:grid;grid-template-columns:calc(var(--u) * 18) 1fr calc(var(--u) * 120) calc(var(--u) * 80);gap:calc(var(--u) * 10);align-items:center;padding:calc(var(--u) * 11) 0;border-bottom:1px solid var(--soft)}
.jyos .ex-list li .os-ic{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.jyos .ex-list li span:nth-child(n+3){color:var(--muted);font-size:calc(var(--u) * 12);font-variant-numeric:tabular-nums}

/* W5-4 속도: 막대 길이 = 값 비율. 실제 시간으로 차오름(176.2ms 막대는 176ms, 1,423.2ms 막대는 1,423ms) */
.jyos .os-speed{display:grid;row-gap:24px;padding:clamp(24px,4vw,64px) 0}
.jyos .sp-r{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;column-gap:var(--gutter)}
.jyos .sp-r>span{grid-column:1}.jyos .sp-bar{grid-column:2/span 8}.jyos .sp-v{grid-column:10/-1}
.jyos .sp-r>span{font-size:16px;color:var(--muted)}
.jyos .sp-bar{margin:0;height:48px;border-left:1px solid var(--line)}
.jyos .sp-bar i{display:block;height:100%;width:calc(var(--w) * 100%);background:var(--muted);border-radius:0 8px 8px 0;transform-origin:left;transform:scaleX(var(--f,1))}
.jyos .sp-r.is-a .sp-bar i{background:var(--ink)}
.jyos .sp-v{font-family:Geist,var(--f);font-weight:400;font-size:clamp(32px,4vw,72px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.jyos .sp-r.is-a .sp-v{color:var(--or-ink)}
@media(max-width:700px){.jyos .sp-r{row-gap:8px}.jyos .sp-r>span{grid-column:1/span 2}.jyos .sp-bar{grid-column:3/-1}.jyos .sp-v{grid-column:1/-1;text-align:left;font-size:40px}}

/* 동작 줄이기: 반복 없이 끝 상태(전/후는 단추로) */
@media(prefers-reduced-motion:reduce){.jyos *{transition:none !important}}
@media(max-width:700px){.jyos .jy-steps li{font-size:14px}.jyos .jy-pin{font-size:11px;padding:3px 8px 3px 3px;gap:4px}}

/* 6장 기타 편의 기능: 한 페이지 3열(이름 굵게 · 한 줄 설명). 앱 변경 기록 '실제 반영' 항목과 V1 README만 */
.jyos .fe-b[data-page="6"]>.g{grid-column:1/-1;grid-row:auto;padding-top:var(--gap-s)}
.jyos .fe-b[data-page="6"]>.g .copy{grid-column:1/-1}
.jyos .fe-b[data-page="6"] .fe-ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gutter);margin:0;padding:0;list-style:none}
.jyos .fe-b[data-page="6"] .fe-ul li{padding-top:16px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.jyos .fe-b[data-page="6"] .fe-ul li::before{content:none}
.jyos .fe-b[data-page="6"] .fe-ul strong{display:block;margin-bottom:6px;font-size:20px;font-weight:500;color:var(--ink)}
@media(max-width:1100px){.jyos .fe-b[data-page="6"] .fe-ul{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.jyos .fe-b[data-page="6"] .fe-ul{grid-template-columns:1fr;gap:24px}}

/* 상세 끝 '직접 해 보기': 마지막 장면 = 가운데 큰 버튼 하나(새 탭, ↗). 모바일 = PC 안내 + 화면 영상. 5장 아래 작은 버튼(.jy-try-s) */
.jyos .jy-try{padding:var(--gap-l) 0}
.jyos .jy-try-c{display:grid;justify-items:center;text-align:center;row-gap:24px;padding:clamp(48px,8vw,128px) 24px;border:1px solid var(--line);border-radius:16px;background:var(--face)}
.jyos .jy-try-c h2{margin:0;font-size:clamp(40px,5vw,88px);line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.jyos .jy-try-p{margin:0;font-size:clamp(18px,1.5vw,24px);color:var(--muted)}
.jyos .jy-try-a{display:inline-flex;align-items:center;height:72px;padding:0 44px;margin-top:16px;border-radius:999px;background:var(--or);color:var(--on-or);font-size:22px;font-weight:500;text-decoration:none;box-shadow:var(--sh1);transition:transform 200ms var(--jy-e),box-shadow 200ms var(--jy-e);touch-action:manipulation}
.jyos .jy-try-a:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.jyos .jy-try-a:active{transform:scale(.98)}
.jyos .jy-try-n{margin:0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--quiet)}
.jyos .jy-try-s{display:inline-flex;align-items:center;margin-top:20px;padding:10px 20px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-size:16px;font-weight:500;text-decoration:none;transition:background-color 200ms var(--jy-e),color 200ms var(--jy-e)}
.jyos .jy-try-s:hover{background:var(--ink);color:var(--face)}
.jyos .jy-try-m{display:none}
.jyos .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1023px){
 .jyos .jy-try-a,.jyos .jy-try-s,.jyos .jy-try-n{display:none}
 .jyos .jy-try-m{display:grid;row-gap:16px;width:100%}
 .jyos .jy-try-m p{margin:0;font-weight:500}
 .jyos .jy-try-m video{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:var(--field)}
}