/* Excel Workflow Builder 상품 소개(/programs/excel-workflow-builder) — 모든 규칙은 .ewp-body / .ewp 아래로만.
   외부 글꼴·CDN 없음. 움직임은 기본값이 「끝난 상태」다 — 스크립트가 없거나 움직임 줄이기여도 완성 화면이 보인다. */

.ewp-body { overflow-x: clip; }

.ewp {
  --ewp-ink: #0b1d18;
  --ewp-ink-2: #12302a;
  --ewp-on-ink: #eef7f3;
  --ewp-on-ink-muted: #a9c4ba;
  --ewp-green: #15803d;
  --ewp-green-deep: #0f6a31;
  --ewp-green-bright: #4ade80;
  --ewp-green-wash: #e3f4ea;
  --ewp-mist: #f3f7f5;
  --ewp-blue: #2563eb;
  --ewp-blue-deep: #1d4ed8;
  --ewp-amber-wash: #fdf1d6;
  --ewp-amber-ink: #7a5310;
  --ewp-text: #13221e;
  --ewp-muted: #566862;
  --ewp-line: #d8e3de;
  --ewp-card: #ffffff;
  --ewp-shadow: 0 1px 2px rgba(11, 29, 24, .06), 0 12px 32px rgba(11, 29, 24, .08);
  --ewp-sans: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --ewp-ease: cubic-bezier(.2, .75, .15, 1);

  color: var(--ewp-text);
  font-family: var(--ewp-sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ewp *, .ewp *::before, .ewp *::after { box-sizing: border-box; }
.ewp a:focus-visible, .ewp button:focus-visible, .ewp summary:focus-visible {
  outline: 2px solid var(--ewp-blue); outline-offset: 3px; border-radius: 6px;
}
.ewp h1, .ewp h2, .ewp h3, .ewp p, .ewp ul, .ewp ol, .ewp figure, .ewp dl, .ewp dd { margin: 0; }
.ewp img { display: block; max-width: 100%; height: auto; }
.ewp section[id] { scroll-margin-top: 84px; }
.ewp .ewp-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* 전폭 배경 */
.ewp .ewp-hero, .ewp .ewp-final, .ewp .ewp-section { width: 100vw; margin-left: calc(50% - 50vw); }
.ewp .ewp-wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }

/* ── 단추 ── */
.ewp .ewp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ewp .ewp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ewp-ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.ewp .ewp-btn:hover { transform: translateY(-1px); }
.ewp .ewp-btn--primary { color: #fff; background: var(--ewp-green); box-shadow: 0 8px 22px rgba(21, 128, 61, .28); }
.ewp .ewp-btn--primary:hover { background: var(--ewp-green-deep); }
.ewp .ewp-btn--ghost { color: var(--ewp-on-ink); border-color: rgba(238, 247, 243, .3); background: rgba(238, 247, 243, .04); }
.ewp .ewp-btn--ghost:hover { border-color: #fff; color: #fff; }
.ewp .ewp-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.ewp .ewp-btn--block { display: flex; width: 100%; }
.ewp .ewp-btn--small { min-height: 38px; padding: 0 14px; font-size: 14px; box-shadow: none; }

/* ── 위쪽 목차 ── */
.ewp .ewp-subnav { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.ewp .ewp-brand { flex: none; display: grid; line-height: 1.25; color: var(--ewp-text); text-decoration: none; }
.ewp .ewp-brand small { color: var(--ewp-muted); font-size: 12px; }
.ewp .ewp-subnav-links { display: flex; flex: 1; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ewp .ewp-subnav-links a {
  flex: none; padding: 6px 10px; border-radius: 8px; color: var(--ewp-muted);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.ewp .ewp-subnav-links a:hover { background: var(--ewp-mist); color: var(--ewp-green-deep); }

/* ── 첫 화면 ── */
.ewp .ewp-hero {
  position: relative; overflow: hidden; color: var(--ewp-on-ink);
  background:
    radial-gradient(760px 420px at 85% 0, rgba(37, 99, 235, .26), transparent 65%),
    radial-gradient(700px 520px at 5% 105%, rgba(21, 128, 61, .38), transparent 62%),
    linear-gradient(rgba(238, 247, 243, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(238, 247, 243, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, #0a1915, var(--ewp-ink));
}
.ewp .ewp-hero-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center;
  width: min(1160px, 100% - 32px); margin: 0 auto; padding: clamp(44px, 6vw, 84px) 0;
}
.ewp .ewp-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(127, 224, 166, .3); border-radius: 999px; background: rgba(127, 224, 166, .08); color: #8ee8b3; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.ewp .ewp-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--ewp-green-bright); box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
.ewp .ewp-hero h1 { margin-top: 18px; font-size: clamp(32px, 4.3vw, 54px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.ewp .ewp-nw { white-space: nowrap; }
.ewp .ewp-hero h1 em {
  display: block; margin-top: 4px; font-style: normal;
  background: linear-gradient(90deg, #86efac, #5eead4 55%, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ewp .ewp-lead { margin-top: 18px; max-width: 560px; color: var(--ewp-on-ink-muted); font-size: 17.5px; line-height: 1.75; }
.ewp .ewp-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.ewp .ewp-facts li { display: inline-flex; align-items: center; gap: 6px; color: var(--ewp-on-ink-muted); font-size: 14px; }
.ewp .ewp-facts .ewp-ico { color: var(--ewp-green-bright); font-size: 16px; stroke-width: 2.4; }

/* 첫 화면 시연 창 */
.ewp .ewp-demo { min-width: 0; }
.ewp .ewp-demo-win {
  overflow: hidden; border: 1px solid rgba(238, 247, 243, .16); border-radius: 18px; background: #f6f8fb; color: var(--ewp-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 6px rgba(238, 247, 243, .04);
}
.ewp .ewp-demo-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e5e9f0; }
.ewp .ewp-demo-dots { display: inline-flex; gap: 6px; }
.ewp .ewp-demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.ewp .ewp-demo-title { flex: 1; min-width: 0; overflow: hidden; color: #334155; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ewp .ewp-demo-run {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9px;
  background: var(--ewp-blue); color: #fff; font-size: 13.5px; font-weight: 800;
  transition: transform .15s var(--ewp-ease), box-shadow .25s;
}
.ewp .ewp-demo-run .ewp-ico { fill: currentColor; stroke: none; font-size: 13px; }
.ewp .ewp-demo[data-phase="press"] .ewp-demo-run { transform: scale(.93); box-shadow: 0 0 0 7px rgba(37, 99, 235, .25); }
.ewp .ewp-demo[data-phase="run"] .ewp-demo-run { box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.ewp .ewp-demo-cursor {
  position: absolute; right: -10px; bottom: -16px; width: 22px; height: 22px; opacity: 0; pointer-events: none;
  transition: transform .7s var(--ewp-ease), opacity .3s;
}
.ewp .ewp-demo-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #0f172a; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.ewp .ewp-demo[data-phase="idle"] .ewp-demo-cursor { transform: translate(70px, 60px); opacity: 0; transition: none; }
.ewp .ewp-demo[data-phase="aim"] .ewp-demo-cursor { transform: translate(0, 0); opacity: 1; }
.ewp .ewp-demo[data-phase="press"] .ewp-demo-cursor { transform: translate(0, 0) scale(.82); opacity: 1; }
.ewp .ewp-demo-progress { height: 3px; background: #e2e8f0; }
.ewp .ewp-demo-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--ewp-blue), #22c55e); }
.ewp .ewp-demo[data-phase="idle"] .ewp-demo-progress i,
.ewp .ewp-demo[data-phase="aim"] .ewp-demo-progress i,
.ewp .ewp-demo[data-phase="press"] .ewp-demo-progress i { width: 0; }
.ewp .ewp-demo[data-phase="run"] .ewp-demo-progress i { width: 100%; transition: width 2.3s linear; }
.ewp .ewp-demo-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.ewp .ewp-demo-label { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.ewp .ewp-demo-label + * { margin-bottom: 6px; }
.ewp .ewp-demo-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ewp .ewp-demo-file { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .05); }
.ewp .ewp-demo-file span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #eef2f6; font-size: 11.5px; font-weight: 700; }
.ewp .ewp-demo-file span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #1d6f42; }
.ewp .ewp-demo-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.ewp .ewp-demo-nodes li {
  --ewp-c: #2563eb;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px;
  padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
  opacity: .55; transition: opacity .3s, border-color .3s, box-shadow .3s, transform .3s var(--ewp-ease);
}
.ewp .ewp-demo-nodes li > .ewp-ico {
  grid-row: span 2; width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--ewp-c); color: #fff; stroke-width: 2.1;
}
.ewp .ewp-demo-nodes b { overflow: hidden; font-size: 12px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ewp .ewp-demo-nodes small { font-size: 11px; line-height: 1.3; color: #94a3b8; }
.ewp .ewp-demo-nodes .s-done { display: none; color: #15803d; font-weight: 800; }
.ewp .ewp-demo-nodes li.is-on { opacity: 1; border-color: #86d9a6; box-shadow: 0 0 0 3px rgba(34, 197, 94, .1); }
.ewp .ewp-demo-nodes li.is-on .s-idle { display: none; }
.ewp .ewp-demo-nodes li.is-on .s-done { display: inline; }
.ewp .ewp-demo[data-phase="run"] .ewp-demo-nodes li.is-on { animation: ewp-pop .35s var(--ewp-ease); }
.ewp .ewp-demo-nodes .ewp-n--blue { --ewp-c: #2563eb; }
.ewp .ewp-demo-nodes .ewp-n--teal { --ewp-c: #0f766e; }
.ewp .ewp-demo-nodes .ewp-n--red { --ewp-c: #be123c; }
.ewp .ewp-demo-nodes .ewp-n--purple { --ewp-c: #7c3aed; }
.ewp .ewp-demo-nodes .ewp-n--green { --ewp-c: #15803d; }
.ewp .ewp-demo-out { padding: 10px; border: 1px solid #cfe8d9; border-radius: 12px; background: #fff; transition: opacity .45s var(--ewp-ease), transform .45s var(--ewp-ease); }
.ewp .ewp-demo-out img { border-radius: 6px; }
.ewp .ewp-demo[data-phase="idle"] .ewp-demo-out,
.ewp .ewp-demo[data-phase="aim"] .ewp-demo-out,
.ewp .ewp-demo[data-phase="press"] .ewp-demo-out,
.ewp .ewp-demo[data-phase="run"] .ewp-demo-out { opacity: .18; transform: translateY(8px) scale(.985); }
.ewp .ewp-demo-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11.5px; transition: opacity .3s; }
.ewp .ewp-demo-badge .ewp-ico { stroke-width: 2.6; }
.ewp .ewp-demo:not([data-phase="done"]) .ewp-demo-badge { opacity: 0; }
.ewp .ewp-demo figcaption { margin-top: 12px; color: var(--ewp-on-ink-muted); font-size: 12.5px; text-align: right; }

/* ── 구역 ── */
.ewp .ewp-section { padding: clamp(52px, 7vw, 96px) 0; background: #fff; }
.ewp .ewp-section--tint { background: var(--ewp-mist); }
.ewp .ewp-section--ink {
  color: var(--ewp-on-ink);
  background:
    radial-gradient(700px 380px at 100% 0, rgba(37, 99, 235, .2), transparent 62%),
    linear-gradient(180deg, var(--ewp-ink), var(--ewp-ink-2));
}
.ewp .ewp-head { max-width: 760px; margin-bottom: 36px; }
.ewp .ewp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ewp .ewp-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--ewp-green); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.ewp .ewp-section--ink .ewp-eyebrow { color: #86efac; }
.ewp .ewp-head h2, .ewp .ewp-final h2 { font-size: clamp(26px, 3.3vw, 40px); font-weight: 800; line-height: 1.26; letter-spacing: -.025em; text-wrap: balance; }
.ewp .ewp-head h2 + p { margin-top: 14px; color: var(--ewp-muted); font-size: 17px; }
.ewp .ewp-section--ink .ewp-head h2 + p { color: var(--ewp-on-ink-muted); }
.ewp [data-ewp-reveal].is-in { animation: ewp-rise .65s var(--ewp-ease); }
@keyframes ewp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ewp-pop { from { transform: scale(.94); } }
@keyframes ewp-drop { from { opacity: 0; transform: translate(0, -18px) rotate(0deg); } }
@keyframes ewp-pulse { from { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45), 0 14px 30px rgba(37, 99, 235, .35); } }

/* ── 빠른 이유: 손으로 vs 버튼 한 번 ── */
.ewp .ewp-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ewp .ewp-vs-col { display: flex; flex-direction: column; padding: 26px; border-radius: 20px; }
.ewp .ewp-vs-col--manual { border: 1px dashed #cbd5d1; background: #f7f8f8; }
.ewp .ewp-vs-col--ewb { border: 1px solid #bfe3cd; background: #fff; box-shadow: 0 20px 50px rgba(21, 128, 61, .12); }
.ewp .ewp-vs-col h3 { margin-top: 20px; font-size: 22px; letter-spacing: -.015em; }
.ewp .ewp-vs-col--ewb h3 { color: var(--ewp-green-deep); }
.ewp .ewp-vs-sub { margin-top: 2px; color: var(--ewp-muted); font-size: 14.5px; }
.ewp .ewp-vs-list { display: grid; gap: 10px; margin-top: 18px; padding: 0; list-style: none; counter-reset: ewp-vs; }
.ewp .ewp-vs-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; counter-increment: ewp-vs; }
.ewp .ewp-vs-list li::before {
  content: counter(ewp-vs); flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px;
  border-radius: 50%; background: #e5e9e7; color: #64748b; font-size: 12px; font-weight: 800;
}
.ewp .ewp-vs-col--manual .ewp-vs-list li { color: #475569; }
.ewp .ewp-vs-col--ewb .ewp-vs-list li::before { content: "✓"; background: var(--ewp-green-wash); color: var(--ewp-green); }
.ewp .ewp-vs-foot { margin-top: auto; padding-top: 20px; font-size: 15px; font-weight: 800; }
.ewp .ewp-vs-col--manual .ewp-vs-foot { color: #94a3b8; }
.ewp .ewp-vs-col--manual .ewp-vs-foot::before { content: "↻ "; }
.ewp .ewp-vs-col--ewb .ewp-vs-foot { color: var(--ewp-green); }
.ewp .ewp-vs-arrow { display: grid; place-items: center; }
.ewp .ewp-vs-arrow span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ewp-green); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 8px 20px rgba(21, 128, 61, .3); }

/* 손으로: 엑셀 창이 쌓이는 그림 */
.ewp .ewp-mess { position: relative; height: 176px; }
.ewp .ewp-mess span {
  position: absolute; width: 168px; height: 76px; padding: 0 8px 0 24px; overflow: hidden;
  border: 1px solid #cfd8d4; border-radius: 7px; color: #334155; font-size: 11px; font-weight: 700; line-height: 22px; white-space: nowrap; text-overflow: ellipsis;
  background:
    linear-gradient(#1d6f42, #1d6f42) 8px 6px / 10px 10px no-repeat,
    linear-gradient(#eef3f0, #eef3f0) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 11px, #e6ebe8 11px 12px) 0 22px / 100% 100%,
    repeating-linear-gradient(90deg, transparent 0 33px, #e6ebe8 33px 34px) 0 22px / 100% 100%,
    #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .1);
}
.ewp .ewp-mess span:nth-child(1) { left: 0; top: 0; transform: rotate(-4deg); }
.ewp .ewp-mess span:nth-child(2) { left: 22%; top: 12px; transform: rotate(3deg); }
.ewp .ewp-mess span:nth-child(3) { left: 48%; top: 2px; transform: rotate(-2deg); }
.ewp .ewp-mess span:nth-child(4) { left: 8%; top: 52px; transform: rotate(2deg); }
.ewp .ewp-mess span:nth-child(5) { left: 34%; top: 60px; transform: rotate(-5deg); }
.ewp .ewp-mess span:nth-child(6) { left: 58%; top: 48px; transform: rotate(4deg); }
.ewp .ewp-mess span:nth-child(7) { left: 2%; top: 100px; transform: rotate(-3deg); }
.ewp .ewp-mess span:nth-child(8) { left: 28%; top: 98px; transform: rotate(5deg); }
.ewp .ewp-mess span:nth-child(9) { left: 52%; top: 96px; transform: rotate(-1deg); border-color: #f2b8b5; }
.ewp .ewp-vs.is-in .ewp-mess span { animation: ewp-drop .5s var(--ewp-ease) backwards; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(2) { animation-delay: .08s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(3) { animation-delay: .16s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(4) { animation-delay: .24s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(5) { animation-delay: .32s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(6) { animation-delay: .4s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(7) { animation-delay: .48s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(8) { animation-delay: .56s; }
.ewp .ewp-vs.is-in .ewp-mess span:nth-child(9) { animation-delay: .64s; }

/* 버튼 한 번 */
.ewp .ewp-oneclick { display: grid; justify-items: center; align-content: center; gap: 14px; height: 176px; border-radius: 14px; background: linear-gradient(180deg, #f3f8ff, #f2fbf5); }
.ewp .ewp-oneclick-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px; border-radius: 14px;
  background: var(--ewp-blue); color: #fff; font-size: 22px; font-weight: 800;
  box-shadow: 0 0 0 16px rgba(37, 99, 235, 0), 0 14px 30px rgba(37, 99, 235, .35);
  animation: ewp-pulse 2.4s ease-out infinite;
}
.ewp .ewp-oneclick-btn .ewp-ico { fill: currentColor; stroke: none; }
.ewp .ewp-oneclick-bar { width: min(260px, 80%); height: 6px; overflow: hidden; border-radius: 999px; background: #dbe5f0; }
.ewp .ewp-oneclick-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ewp-blue), #22c55e); }
.ewp .ewp-vs.is-in .ewp-oneclick-bar i { animation: ewp-fill 1.4s .5s var(--ewp-ease) backwards; }
@keyframes ewp-fill { from { width: 0; } }
.ewp .ewp-oneclick-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ewp-green); font-size: 14px; font-weight: 800; }
.ewp .ewp-oneclick-done .ewp-ico { stroke-width: 2.6; }

/* 숫자 띠 */
.ewp .ewp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.ewp .ewp-stats div { padding: 22px 24px; border: 1px solid var(--ewp-line); border-radius: 16px; background: var(--ewp-card); }
.ewp .ewp-stats dt {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--ewp-green), #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ewp .ewp-stats dd { margin-top: 8px; color: var(--ewp-muted); font-size: 14.5px; line-height: 1.5; }

/* ── 실제 예시 ── */
.ewp .ewp-story { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding: 0; list-style: none; }
.ewp .ewp-story > li { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ewp .ewp-story > li + li::before {
  content: "→"; position: absolute; left: -31px; top: 120px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ewp-green); color: #fff; font-size: 13px; font-weight: 800;
}
.ewp .ewp-story-step { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.ewp .ewp-story-step span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ewp-ink); color: #fff; font-size: 13px; }
.ewp .ewp-story-files { position: relative; display: grid; }
.ewp .ewp-story-files > * { grid-area: 1 / 1; }
.ewp .ewp-story-files > :nth-child(1) { margin: 0 44px 44px 0; }
.ewp .ewp-story-files > :nth-child(2) { margin: 22px 22px 22px 22px; }
.ewp .ewp-story-files > :nth-child(3) { margin: 44px 0 0 44px; }
.ewp .ewp-story-cap { color: var(--ewp-muted); font-size: 14.5px; line-height: 1.6; }

/* ── 3단계 ── */
.ewp .ewp-steps { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; counter-reset: ewp-st; }
.ewp .ewp-steps li { padding: 24px; border: 1px solid var(--ewp-line); border-radius: 16px; background: var(--ewp-card); counter-increment: ewp-st; }
.ewp .ewp-steps li::before { content: counter(ewp-st); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 11px; background: var(--ewp-green); color: #fff; font-weight: 800; }
.ewp .ewp-steps strong { display: block; font-size: 17.5px; }
.ewp .ewp-steps p { margin-top: 6px; color: var(--ewp-muted); font-size: 15px; }
.ewp .ewp-steps.ewp-steps--stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ewp .ewp-steps--stack li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; }
.ewp .ewp-steps--stack li::before { grid-row: span 2; margin-bottom: 0; }
.ewp .ewp-steps--stack p { grid-column: 2; }

/* 실제 편집 창 */
.ewp .ewp-stage { margin-top: 40px; padding: 18px; border-radius: 22px; background: var(--ewp-ink); color: var(--ewp-on-ink); box-shadow: 0 30px 70px rgba(11, 29, 24, .22); }
.ewp .ewp-stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 4px 6px 14px; }
.ewp .ewp-stage-head strong { font-size: 17px; }
.ewp .ewp-stage-head span { color: var(--ewp-on-ink-muted); font-size: 14px; }
.ewp .ewp-stage-frame { position: relative; overflow: hidden; border-radius: 12px; background: #fff; }
.ewp .ewp-stage-frame img { width: 100%; }
.ewp .ewp-hot {
  position: absolute; border: 3px solid #f3b84b; border-radius: 10px; background: rgba(243, 184, 75, .14);
  opacity: 0; transition: opacity .4s var(--ewp-ease); pointer-events: none;
}
.ewp .ewp-hot[data-n="1"] { left: 0.8%; top: 5.5%; width: 17.2%; height: 93%; }
.ewp .ewp-hot[data-n="2"] { left: 19%; top: 8.9%; width: 57.2%; height: 55.8%; }
.ewp .ewp-hot[data-n="3"] { left: 77.5%; top: 6.3%; width: 21.5%; height: 12.9%; }
.ewp .ewp-hot[data-n="4"] { left: 77.5%; top: 20.3%; width: 21.5%; height: 78%; }
.ewp .ewp-stage[data-step="1"] .ewp-hot[data-n="1"],
.ewp .ewp-stage[data-step="2"] .ewp-hot[data-n="2"],
.ewp .ewp-stage[data-step="3"] .ewp-hot[data-n="3"],
.ewp .ewp-stage[data-step="4"] .ewp-hot[data-n="4"] { opacity: 1; }
.ewp .ewp-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: ewp-leg; }
.ewp .ewp-legend li {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; color: var(--ewp-on-ink-muted); font-size: 14px; line-height: 1.5;
  counter-increment: ewp-leg; transition: background-color .3s, color .3s;
}
.ewp .ewp-legend li::before { content: counter(ewp-leg); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(238, 247, 243, .16); font-size: 12px; font-weight: 800; }
.ewp .ewp-stage[data-step="1"] .ewp-legend li:nth-child(1),
.ewp .ewp-stage[data-step="2"] .ewp-legend li:nth-child(2),
.ewp .ewp-stage[data-step="3"] .ewp-legend li:nth-child(3),
.ewp .ewp-stage[data-step="4"] .ewp-legend li:nth-child(4) { background: rgba(243, 184, 75, .16); color: #fff; }

/* ── 카드 격자 ── */
.ewp .ewp-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ewp .ewp-card {
  --ewp-c: var(--ewp-green); --ewp-c-wash: var(--ewp-green-wash);
  padding: 24px; border: 1px solid var(--ewp-line); border-radius: 18px; background: var(--ewp-card);
  transition: transform .25s var(--ewp-ease), box-shadow .25s, border-color .25s;
}
.ewp .ewp-card:hover { transform: translateY(-3px); border-color: #c3d3cc; box-shadow: var(--ewp-shadow); }
.ewp .ewp-card--blue { --ewp-c: #2563eb; --ewp-c-wash: #e8efff; }
.ewp .ewp-card--teal { --ewp-c: #0f766e; --ewp-c-wash: #def5f1; }
.ewp .ewp-card--orange { --ewp-c: #c2410c; --ewp-c-wash: #fdebdd; }
.ewp .ewp-card--purple { --ewp-c: #7c3aed; --ewp-c-wash: #efe8fe; }
.ewp .ewp-card--red { --ewp-c: #be123c; --ewp-c-wash: #fde7ec; }
.ewp .ewp-card--green { --ewp-c: #15803d; --ewp-c-wash: #e3f4ea; }
.ewp .ewp-card-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--ewp-c-wash); color: var(--ewp-c); font-size: 22px; }
.ewp .ewp-card h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
.ewp .ewp-card p { margin-top: 8px; color: var(--ewp-muted); font-size: 15px; line-height: 1.65; }
.ewp .ewp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.ewp .ewp-chips li { padding: 2px 10px; border-radius: 8px; background: var(--ewp-c-wash, var(--ewp-mist)); color: var(--ewp-c, var(--ewp-text)); font-size: 13px; font-weight: 600; }

/* ── 그림 ── */
.ewp .ewp-shot { margin: 0; }
.ewp .ewp-shot-frame { overflow: hidden; border: 1px solid var(--ewp-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(16, 36, 31, .09); }
.ewp .ewp-shot-frame--scroll { overflow-x: auto; }
.ewp .ewp-shot-frame--scroll img { width: 100%; min-width: 560px; }
.ewp .ewp-shot-frame img { width: 100%; }
.ewp .ewp-shot figcaption { margin-top: 8px; color: var(--ewp-muted); font-size: 13.5px; line-height: 1.6; }
.ewp .ewp-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ewp .ewp-split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ewp .ewp-shots { display: grid; gap: 20px; min-width: 0; }
.ewp .ewp-minis { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ewp .ewp-minis .ewp-shot-frame { width: fit-content; max-width: 100%; }
.ewp .ewp-minis .ewp-shot-frame img { width: auto; }

.ewp .ewp-points { display: grid; gap: 12px; padding: 0; list-style: none; }
.ewp .ewp-points li { padding: 16px 18px; border: 1px solid var(--ewp-line); border-left: 4px solid var(--ewp-green); border-radius: 6px 14px 14px 6px; background: var(--ewp-card); }
.ewp .ewp-points strong { display: block; font-size: 16px; }
.ewp .ewp-points span { display: block; margin-top: 3px; color: var(--ewp-muted); font-size: 14.5px; }
.ewp .ewp-points--dark { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ewp .ewp-points--dark li { border-color: rgba(238, 247, 243, .14); border-left-color: #4ade80; background: rgba(238, 247, 243, .05); }
.ewp .ewp-points--dark span { color: var(--ewp-on-ink-muted); }

/* ── AI 단계 ── */
.ewp .ewp-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; list-style: none; counter-reset: ewp-ai; }
.ewp .ewp-timeline::before { content: ""; position: absolute; left: 20px; right: 20px; top: 19px; height: 2px; background: linear-gradient(90deg, rgba(134, 239, 172, .6), rgba(147, 197, 253, .6)); }
.ewp .ewp-timeline li { position: relative; counter-increment: ewp-ai; }
.ewp .ewp-timeline li::before {
  content: counter(ewp-ai); position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border: 2px solid #86efac; border-radius: 50%; background: var(--ewp-ink); color: #dcfce7; font-weight: 800;
}
.ewp .ewp-timeline h3 { font-size: 17px; line-height: 1.4; }
.ewp .ewp-timeline p { margin-top: 8px; color: var(--ewp-on-ink-muted); font-size: 14.5px; line-height: 1.65; }

/* 안내 상자 */
.ewp .ewp-notice { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--ewp-amber-wash); color: var(--ewp-amber-ink); font-size: 15px; }
.ewp .ewp-notice strong { display: block; margin-bottom: 4px; }
.ewp .ewp-quote { margin-top: 36px; padding: 18px 20px; border: 1px solid rgba(238, 247, 243, .16); border-left: 4px solid #93c5fd; border-radius: 6px 14px 14px 6px; background: rgba(238, 247, 243, .05); font-size: 15px; }
.ewp .ewp-quote p + p { margin-top: 8px; }
.ewp .ewp-quote-label { margin-bottom: 6px; color: var(--ewp-on-ink-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ewp .ewp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--ewp-green-deep); font-weight: 700; text-decoration: none; }
.ewp .ewp-more:hover { text-decoration: underline; }
.ewp .ewp-more--light { color: #86efac; }

/* 안전 카드 */
.ewp .ewp-card--plain .ewp-card-ico { background: var(--ewp-ink); color: #86efac; }

/* ── 시작·요금 ── */
.ewp .ewp-start { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.ewp .ewp-req { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--ewp-line); border-radius: 14px; background: var(--ewp-card); }
.ewp .ewp-req ul { padding-left: 18px; font-size: 14.5px; }
.ewp .ewp-req p { margin-bottom: 6px; color: var(--ewp-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.ewp .ewp-price { position: relative; overflow: hidden; padding: 28px; border: 1px solid #bfe3cd; border-radius: 22px; background: var(--ewp-card); box-shadow: 0 24px 60px rgba(21, 128, 61, .14); }
.ewp .ewp-price::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--ewp-green), #0d9488, var(--ewp-blue)); }
.ewp .ewp-price-eyebrow { color: var(--ewp-muted); font-size: 13px; font-weight: 800; }
.ewp .ewp-price-amount { margin-top: 4px; font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.ewp .ewp-price-note { margin-top: 4px; color: var(--ewp-muted); font-size: 14px; }
.ewp .ewp-price-items { margin: 16px 0; font-size: 14px; }
.ewp .ewp-price-items div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ewp-line); }
.ewp .ewp-price-items dt { color: var(--ewp-muted); }
.ewp .ewp-price-items dd { margin: 0; font-weight: 700; text-align: right; }
.ewp .ewp-price-ai { margin-bottom: 16px; padding: 10px 12px; border-radius: 10px; background: var(--ewp-amber-wash); color: var(--ewp-amber-ink); font-size: 13.5px; line-height: 1.55; }
.ewp .ewp-price-help { margin-top: 12px; color: var(--ewp-muted); font-size: 12px; }

/* ── 질문·기록·관련 ── */
.ewp .ewp-faq { display: grid; gap: 10px; max-width: 880px; }
.ewp .ewp-faq details { border: 1px solid var(--ewp-line); border-radius: 14px; background: var(--ewp-card); transition: box-shadow .2s; }
.ewp .ewp-faq details[open] { box-shadow: var(--ewp-shadow); }
.ewp .ewp-faq summary { padding: 16px 20px; font-weight: 700; cursor: pointer; }
.ewp .ewp-faq details p { padding: 0 20px 18px; color: var(--ewp-muted); }
.ewp .ewp-releases, .ewp .ewp-related { display: grid; gap: 12px; margin-bottom: 40px; }
.ewp .ewp-release { padding: 14px 18px; border: 1px solid var(--ewp-line); border-radius: 12px; background: var(--ewp-card); }
.ewp .ewp-release p { margin-top: 4px; color: var(--ewp-muted); font-size: 14px; }
.ewp .ewp-related { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ewp .ewp-related a { display: block; padding: 16px 18px; border: 1px solid var(--ewp-line); border-radius: 12px; background: var(--ewp-card); color: inherit; text-decoration: none; }
.ewp .ewp-related h3 { margin-bottom: 4px; font-size: 16px; }
.ewp .ewp-related p { color: var(--ewp-muted); font-size: 14px; }

/* ── 마지막 ── */
.ewp .ewp-final {
  padding: clamp(56px, 8vw, 104px) 24px; text-align: center; color: var(--ewp-on-ink);
  background:
    radial-gradient(520px 300px at 50% 0, rgba(37, 99, 235, .3), transparent 70%),
    linear-gradient(rgba(238, 247, 243, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(238, 247, 243, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, #0a1915, var(--ewp-ink));
}
.ewp .ewp-final-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 12px 28px; border-radius: 14px;
  background: var(--ewp-blue); color: #fff; font-size: 20px; font-weight: 800;
  box-shadow: 0 0 0 16px rgba(37, 99, 235, 0), 0 14px 30px rgba(37, 99, 235, .35);
  animation: ewp-pulse 2.4s ease-out infinite;
}
.ewp .ewp-final-btn .ewp-ico { fill: currentColor; stroke: none; }
.ewp .ewp-final p { max-width: 520px; margin: 14px auto 0; color: var(--ewp-on-ink-muted); font-size: 17px; }
.ewp .ewp-final .ewp-actions { justify-content: center; }

/* ── 좁은 화면 ── */
@media (max-width: 1080px) {
  .ewp .ewp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ewp .ewp-demo { max-width: 680px; }
  .ewp .ewp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .ewp .ewp-timeline::before { display: none; }
  .ewp .ewp-points--dark { grid-template-columns: minmax(0, 1fr); }
  .ewp .ewp-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ewp .ewp-split, .ewp .ewp-split--wide, .ewp .ewp-start { grid-template-columns: minmax(0, 1fr); }
  .ewp .ewp-grid, .ewp .ewp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ewp .ewp-subnav .ewp-btn { display: none; }
  .ewp .ewp-vs { grid-template-columns: minmax(0, 1fr); }
  .ewp .ewp-vs-arrow span { transform: rotate(90deg); }
  .ewp .ewp-story { grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 620px; }
  .ewp .ewp-story > li + li::before { left: 50%; top: -33px; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 640px) {
  .ewp .ewp-grid, .ewp .ewp-steps, .ewp .ewp-minis, .ewp .ewp-stats, .ewp .ewp-timeline, .ewp .ewp-legend { grid-template-columns: minmax(0, 1fr); }
  .ewp .ewp-actions .ewp-btn { flex: 1 1 100%; }
  .ewp .ewp-demo-body { padding: 12px; }
  .ewp .ewp-demo-files { gap: 6px; }
  .ewp .ewp-demo-file span { padding: 3px 6px; font-size: 10.5px; }
  .ewp .ewp-demo-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ewp .ewp-demo-nodes li { padding: 6px 7px; column-gap: 6px; }
  .ewp .ewp-demo-nodes li > .ewp-ico { width: 22px; height: 22px; padding: 4px; }
  .ewp .ewp-demo-nodes b { font-size: 11.5px; }
  .ewp .ewp-vs-col { padding: 20px; }
  .ewp .ewp-mess span { width: 140px; }
  .ewp .ewp-stage { padding: 10px; border-radius: 16px; }
  .ewp .ewp-price { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ewp [data-ewp-reveal].is-in, .ewp .ewp-vs.is-in .ewp-mess span, .ewp .ewp-vs.is-in .ewp-oneclick-bar i,
  .ewp .ewp-oneclick-btn, .ewp .ewp-final-btn, .ewp .ewp-demo-nodes li { animation: none; }
  .ewp .ewp-hot, .ewp .ewp-legend li, .ewp .ewp-btn, .ewp .ewp-card, .ewp .ewp-demo-out, .ewp .ewp-demo-nodes li,
  .ewp .ewp-demo-run, .ewp .ewp-demo-cursor { transition: none; }
}