/* ── AI 실무 사례 쇼케이스(어두운 AI 절 안) — 요청 → AI 가 만든 흐름 → 결과 표 ──
   기본은 끝난 화면(data-phase="done"). 사례 여덟 개를 같은 칸에 겹쳐 두어 탭을 바꿔도 높이가 튀지 않는다. */
.ewp .ewp-aishow { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 22px; margin: 34px 0 40px; align-items: start; }
.ewp .ewp-aishow-tabs { display: grid; gap: 6px; min-width: 0; }
.ewp .ewp-aishow-tabs button {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%;
  padding: 11px 12px 12px; overflow: hidden; border: 1px solid rgba(238, 247, 243, .12); border-radius: 12px;
  background: rgba(238, 247, 243, .03); color: var(--ewp-on-ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s var(--ewp-ease);
}
.ewp .ewp-aishow-tabs button:hover { background: rgba(238, 247, 243, .07); }
.ewp .ewp-aishow-tabs button[aria-selected="true"] { border-color: rgba(134, 239, 172, .55); background: rgba(74, 222, 128, .1); }
.ewp .ewp-aishow-no { color: #86efac; font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 22px; font-variant-numeric: tabular-nums; }
.ewp .ewp-aishow-tt { display: grid; gap: 2px; min-width: 0; }
.ewp .ewp-aishow-tt b { font-size: 15px; line-height: 1.4; }
.ewp .ewp-aishow-tt small { color: var(--ewp-on-ink-muted); font-size: 12.5px; line-height: 1.45; }
.ewp .ewp-aishow-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, #4ade80, #93c5fd); }
.ewp .ewp-aishow[data-playing] .ewp-aishow-tabs button[aria-selected="true"] .ewp-aishow-timer { width: 100%; animation: ewp-aishow-timer var(--ewp-aishow-dur, 12s) linear; }
.ewp .ewp-aishow[data-paused] .ewp-aishow-tabs button[aria-selected="true"] .ewp-aishow-timer { animation-play-state: paused; }
@keyframes ewp-aishow-timer { from { width: 0; } }

.ewp .ewp-aishow-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ewp .ewp-aishow-case { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ewp-ease), transform .35s var(--ewp-ease), visibility 0s .35s; }
.ewp .ewp-aishow-case.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ewp-ease), transform .35s var(--ewp-ease), visibility 0s; }
.ewp .ewp-aishow-case { overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); border-radius: 16px; background: #f7f9fb; color: var(--ewp-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.ewp .ewp-aishow-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5e9f0; background: #fff; }
.ewp .ewp-aishow-dots { display: inline-flex; gap: 6px; }
.ewp .ewp-aishow-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.ewp .ewp-aishow-title { flex: 1; min-width: 0; color: #334155; font-size: 13px; font-weight: 700; }
.ewp .ewp-aishow-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: #e3f4ea; color: #15803d; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ewp .ewp-aishow-chip .ewp-ico { width: 13px; height: 13px; stroke-width: 2.6; }
.ewp .ewp-aishow-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 18px 18px; }
.ewp .ewp-aishow-sc { min-width: 0; }
.ewp .ewp-aishow-lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #475569; font-size: 12.5px; font-weight: 800; }
.ewp .ewp-aishow-lbl > span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #0f172a; color: #fff; font-size: 11px; }
.ewp .ewp-aishow-lbl em { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.ewp .ewp-aishow-sc { transition: opacity .4s var(--ewp-ease); }
.ewp .ewp-aishow-conds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.ewp .ewp-aishow-conds li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: start; color: #334155; font-size: 12.5px; line-height: 1.45; }
.ewp .ewp-aishow-conds li > .ewp-ico { width: 15px; height: 15px; margin-top: 2px; color: #15803d; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ewp .ewp-aishow-conds li > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ewp .ewp-aishow-conds li.is-more { color: #64748b; font-weight: 700; }
.ewp .ewp-aishow-qa { display: grid; gap: 6px; margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; }
.ewp .ewp-aishow-qa p { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; margin: 0; color: #0f172a; font-size: 13px; line-height: 1.5; }
.ewp .ewp-aishow-qa b { color: #b45309; font-size: 11.5px; font-weight: 800; line-height: 1.7; }
.ewp .ewp-aishow-a { font-weight: 700; }
.ewp .ewp-aishow-a b { color: #15803d; }

/* 1 요청 */
.ewp .ewp-aishow-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.ewp .ewp-aishow-files li {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #334155; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s var(--ewp-ease) calc(var(--i, 0) * 110ms), transform .3s var(--ewp-ease) calc(var(--i, 0) * 110ms);
}
.ewp .ewp-aishow-files li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: #1d6f42; }
.ewp .ewp-aishow-files li.is-more { color: #64748b; }
.ewp .ewp-aishow-files li.is-more::before { display: none; }
.ewp .ewp-aishow-files li.is-tpl { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; font-weight: 700; }
.ewp .ewp-aishow-files li.is-tpl::before { background: #4f46e5; }
.ewp .ewp-aishow-ask { position: relative; margin-top: 10px; padding: 12px 14px; border: 1.5px solid #93c5fd; border-radius: 12px; background: #fff; color: #0f172a; font-size: 15px; font-weight: 600; line-height: 1.6; box-shadow: 0 0 0 4px rgba(147, 197, 253, .18); }
.ewp .ewp-aishow-caret { display: none; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: #2563eb; animation: ewp-aishow-blink .9s steps(1) infinite; }
.ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-caret { display: inline-block; }
@keyframes ewp-aishow-blink { 50% { opacity: 0; } }

/* 2 흐름 */
.ewp .ewp-aishow-nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; padding: 0; list-style: none; counter-reset: ewp-ai-n; }
.ewp .ewp-aishow-nodes li {
  --ewp-c: #2563eb; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px;
  min-width: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: opacity .35s var(--ewp-ease) calc(var(--i, 0) * 260ms), transform .35s var(--ewp-ease) calc(var(--i, 0) * 260ms), border-color .3s;
}
.ewp .ewp-aishow-nodes li + li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 14px; height: 2px; background: #94a3b8; }
.ewp .ewp-aishow-nodes li + li::after { content: ""; position: absolute; left: -9px; top: calc(50% - 4px); border: 5px solid transparent; border-left-color: #94a3b8; border-right: 0; }
.ewp .ewp-aishow-nodes li:nth-child(4n + 1)::before, .ewp .ewp-aishow-nodes li:nth-child(4n + 1)::after { display: none; }
.ewp .ewp-aishow-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-aishow-nodes b { overflow: hidden; font-size: 12.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ewp .ewp-aishow-nodes small { overflow: hidden; color: #64748b; font-size: 11.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ewp .ewp-aishow-nodes .ewp-n--blue { --ewp-c: #2563eb; }
.ewp .ewp-aishow-nodes .ewp-n--teal { --ewp-c: #0f766e; }
.ewp .ewp-aishow-nodes .ewp-n--red { --ewp-c: #be123c; }
.ewp .ewp-aishow-nodes .ewp-n--purple { --ewp-c: #7c3aed; }
.ewp .ewp-aishow-nodes .ewp-n--green { --ewp-c: #15803d; }
.ewp .ewp-aishow-nodes .ewp-n--amber { --ewp-c: #b45309; }

/* 3 결과 */
.ewp .ewp-aishow-table { overflow-x: auto; border: 1px solid #cfe8d9; border-radius: 12px; background: #fff; }
.ewp .ewp-aishow-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ewp .ewp-aishow-table th { padding: 7px 10px; border-bottom: 1px solid #d6e9de; background: #1f4e3d; color: #fff; font-weight: 700; text-align: left; white-space: nowrap; }
.ewp .ewp-aishow-table td { padding: 6px 10px; border-bottom: 1px solid #eef2f6; color: #1e293b; white-space: nowrap; }
.ewp .ewp-aishow-table tbody tr:nth-child(even) td { background: #f8fafc; }
.ewp .ewp-aishow-table .is-num { text-align: right; }
.ewp .ewp-aishow-table td.is-neg { color: #be123c; }
.ewp .ewp-aishow-table tr { transition: opacity .3s var(--ewp-ease) calc(var(--i, 0) * 80ms), transform .3s var(--ewp-ease) calc(var(--i, 0) * 80ms); }
.ewp .ewp-aishow-more { padding: 6px 10px; color: #64748b; font-size: 12px; }

/* 단계별 상태 — idle: 아무것도 없음, ask: 파일·글, flow: 상자, out: 표, done: 모두 */
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-files li { opacity: 0; transform: translateY(6px); transition: none; }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-sc--talk, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-sc--talk { opacity: .28; }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-conds li, .ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-qa, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-conds li, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-qa { opacity: 0; transform: translateY(6px); transition: none; }
.ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-conds li { animation: ewp-aishow-pop .4s var(--ewp-ease) both; animation-delay: calc(var(--i, 0) * 340ms); }
.ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-qa { animation: ewp-aishow-pop .4s var(--ewp-ease) both; animation-delay: calc(var(--i, 0) * 340ms + 200ms); }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-sc--flow, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-sc--flow, .ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-sc--flow { opacity: .28; }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-nodes li, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-nodes li, .ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-nodes li { opacity: 0; transform: translateY(8px) scale(.97); transition: none; }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-sc--out, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-sc--out, .ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-sc--out, .ewp .ewp-aishow-case[data-phase="flow"] .ewp-aishow-sc--out { opacity: .28; }
.ewp .ewp-aishow-case[data-phase="idle"] .ewp-aishow-table tbody tr, .ewp .ewp-aishow-case[data-phase="ask"] .ewp-aishow-table tbody tr, .ewp .ewp-aishow-case[data-phase="talk"] .ewp-aishow-table tbody tr, .ewp .ewp-aishow-case[data-phase="flow"] .ewp-aishow-table tbody tr { opacity: .55; filter: blur(4px); transition: none; }
.ewp .ewp-aishow-case[data-phase="out"] .ewp-aishow-table tbody tr { animation: ewp-aishow-clear .5s var(--ewp-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes ewp-aishow-clear { from { opacity: .55; filter: blur(4px); } }
.ewp .ewp-aishow-case[data-phase="flow"] .ewp-aishow-nodes li { animation: ewp-aishow-pop .45s var(--ewp-ease) both; animation-delay: calc(var(--i, 0) * 260ms); }
@keyframes ewp-aishow-pop { from { opacity: 0; transform: translateY(8px) scale(.96); border-color: #93c5fd; } 60% { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(147, 197, 253, .25); } }

@media (max-width: 1020px) {
  .ewp .ewp-aishow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ewp .ewp-aishow-tabs { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .ewp .ewp-aishow-tabs button { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .ewp .ewp-aishow-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
  .ewp .ewp-aishow-nodes li:nth-child(4n + 1)::before, .ewp .ewp-aishow-nodes li:nth-child(4n + 1)::after { display: block; }
  .ewp .ewp-aishow-nodes li:nth-child(2n + 1)::before, .ewp .ewp-aishow-nodes li:nth-child(2n + 1)::after { display: none; }
  .ewp .ewp-aishow-body { padding: 12px; }
  .ewp .ewp-aishow-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ewp .ewp-aishow-files li { font-size: 11.5px; }
  .ewp .ewp-aishow-files li.is-tpl { grid-column: 1 / -1; }
  .ewp .ewp-aishow-ask { font-size: 14px; }
  .ewp .ewp-aishow-conds { grid-template-columns: minmax(0, 1fr); }
  .ewp .ewp-aishow-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ewp .ewp-aishow-case, .ewp .ewp-aishow-sc { transition: none; }
  .ewp .ewp-aishow-case[data-phase="done"] :is(li, tr, p, div, span) { transition: none; animation: none; }
}