/* 메인: 편집기 소개 (실제 편집기 화면을 탭으로 돌려 보여 줌) */
.eds{padding:72px 16px 56px}
.eds-in{max-width:1180px;margin:0 auto}
.eds-head{text-align:center;max-width:720px;margin:0 auto 26px}
.eds-kicker{margin:0 0 8px;font:700 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.24em;color:var(--accent)}
.eds-head h2{margin:0;font-size:clamp(24px,3.4vw,36px);line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.eds-head p{margin:12px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
.eds-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 22px}
.eds-tab{position:relative;overflow:hidden;min-width:84px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:800 14.5px/1 inherit;font-family:inherit;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.eds-tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.eds-tab[aria-selected="true"]{color:var(--ink);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.eds-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:.9}
.eds.is-auto .eds-tab[aria-selected="true"] .eds-bar{animation:edsBar var(--eds-t,7s) linear forwards}
.eds.is-paused .eds-tab[aria-selected="true"] .eds-bar{animation-play-state:paused}
@keyframes edsBar{to{transform:scaleX(1)}}
.eds-panels{position:relative}
.eds-p{display:none;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:center}
.eds-p.is-on{display:grid;animation:edsIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes edsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eds-win{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b1220;box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 40px -22px color-mix(in srgb,var(--accent) 70%,transparent)}
.eds-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#111a2b;border-bottom:1px solid rgba(255,255,255,.06)}
.eds-chrome i{width:9px;height:9px;border-radius:50%;background:#334155}
.eds-chrome i:nth-child(1){background:#f87171}.eds-chrome i:nth-child(2){background:#fbbf24}.eds-chrome i:nth-child(3){background:#34d399}
.eds-chrome span{margin-left:10px;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11.5px;color:#94a3b8;letter-spacing:.01em}
.eds-shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.eds-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.eds-p.is-on .eds-shot img{animation:edsZoom 9s ease-out forwards}
.eds-shot .eds-b{opacity:0}
.eds-p.is-on .eds-shot .eds-b{animation:edsZoom 9s ease-out forwards,edsSwap .7s ease 2.6s forwards}
@keyframes edsZoom{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes edsSwap{to{opacity:1}}
.eds-copy h3{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.eds-copy .eds-sub{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.eds-copy ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.eds-copy li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink)}
.eds-copy li::before{content:'';flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;background:color-mix(in srgb,var(--accent) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.eds-cta{display:inline-flex;align-items:center;gap:6px;margin-top:22px;height:44px;padding:0 20px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:14.5px;text-decoration:none;box-shadow:0 0 22px -4px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .2s,filter .2s}
.eds-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.eds-note{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
@media (max-width:900px){.eds{padding:52px 16px 40px}.eds-p{grid-template-columns:1fr;gap:18px}.eds-copy{padding:0 4px}.eds-tab{min-width:0;padding:0 14px;height:38px;font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.eds-p.is-on,.eds-p.is-on .eds-shot img{animation:none}.eds-p.is-on .eds-shot .eds-b{animation:none;opacity:1}.eds.is-auto .eds-tab .eds-bar{animation:none}}

/* PPT 탭: 커서로 '슬라이드 쇼' 클릭 → 전체 화면 → 글자가 착착 (실제 슬라이드 쇼 화면) */
.eds-p.is-ppt .eds-win{transition:box-shadow .3s}
.eds-show{position:absolute;inset:0;z-index:2;background:#000;opacity:0;transform-origin:52.8% 98%;pointer-events:none}
.eds-slide{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:4/3;translate:-50% 0;opacity:0;overflow:hidden;background:#fff}
.eds-slide>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.eds-pc{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);background-image:var(--img);background-repeat:no-repeat;background-size:calc(10000% / var(--w)) calc(10000% / var(--h));background-position:calc(var(--x) / (100 - var(--w)) * 100%) calc(var(--y) / (100 - var(--h)) * 100%);opacity:0}
.eds-key,.eds-fs{position:absolute;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.01em;opacity:0;white-space:nowrap}
.eds-key{left:50%;bottom:4%;translate:-50% 0}
.eds-fs{left:50%;top:4%;translate:-50% 0}
.eds-cursor{position:absolute;z-index:3;width:22px;height:22px;left:62%;top:52%;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.eds-cursor svg{width:100%;height:100%;display:block}
.eds-click{position:absolute;z-index:3;left:52.8%;top:98%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #60a5fa;opacity:0;pointer-events:none}
.eds-p.is-on .eds-cursor{animation:edsCur 1.5s cubic-bezier(.45,0,.2,1) .25s forwards,edsCurOut .25s ease 1.75s forwards}
.eds-p.is-on .eds-click{animation:edsClick .5s ease-out 1.45s}
.eds-p.is-on .eds-show{animation:edsShowIn .42s cubic-bezier(.2,.9,.25,1) 1.6s forwards}
.eds-p.is-on .eds-fs{animation:edsBlink 1.6s ease 1.9s}
.eds-p.is-on.is-ppt .eds-chrome{animation:edsChrome .3s ease 1.6s forwards}
.eds-p.is-on .eds-slide.s1{animation:edsSlide .2s ease 1.75s forwards,edsOut .2s ease 4.4s forwards}
.eds-p.is-on .eds-slide.s2{animation:edsSlide .22s ease 4.4s forwards,edsOut .2s ease 7.2s forwards}
.eds-p.is-on .eds-slide.s3{animation:edsSlide .22s ease 7.2s forwards}
.eds-p.is-on .eds-pc{animation:edsPc .36s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.eds-p.is-on .eds-key{animation:edsBlink 1.4s ease 3.4s,edsBlink 1.4s ease 6.2s}
@keyframes edsCur{0%{opacity:0;left:62%;top:52%}12%{opacity:1}80%,100%{opacity:1;left:52.8%;top:97%}}
@keyframes edsCurOut{to{opacity:0}}
@keyframes edsClick{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes edsShowIn{0%{opacity:0;transform:scale(.06)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes edsChrome{to{opacity:.25}}
@keyframes edsSlide{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes edsOut{to{opacity:0}}
@keyframes edsPc{0%{opacity:0;transform:translateY(16px) scale(.97);filter:blur(4px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes edsBlink{0%,100%{opacity:0}15%,80%{opacity:1}}
@media (prefers-reduced-motion:reduce){.eds-show,.eds-cursor,.eds-click{display:none}}

/* 탭을 누르면 프로그램 대표색으로 테두리가 한 번 번쩍 (한글·워드·엑셀·PPT·PDF) */
#eds-t-hwp{--brand:#2f8dff}#eds-t-word{--brand:#2b7cd3}#eds-t-excel{--brand:#21a366}#eds-t-ppt{--brand:#e8603c}#eds-t-pdf{--brand:#ff3b30}
.eds-tab.is-flash{animation:edsFlash .9s cubic-bezier(.2,.7,.2,1)}
@keyframes edsFlash{
  0%{border-color:var(--brand,var(--accent));box-shadow:0 0 0 0 color-mix(in srgb,var(--brand,var(--accent)) 70%,transparent),0 0 0 0 transparent}
  18%{border-color:var(--brand,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,var(--accent)) 55%,transparent),0 0 22px 4px color-mix(in srgb,var(--brand,var(--accent)) 60%,transparent)}
  100%{box-shadow:0 0 0 10px transparent,0 0 30px 8px transparent}
}