/* 실무 사례의 입력·결과 표와 연결선. 모든 규칙은 .ewc 범위 안에서만 쓴다. */
.ewc {
  --ewc-line: #dde3ef;
  --ewc-head: #f1f3f7;
  --ewc-head-ink: #5b6472;
  --ewc-green: #1f8f5a;
  --ewc-green-soft: #e2f4ea;
  --ewc-amber-soft: #fdecc8;
  --ewc-amber-ink: #8a4b0b;
  --ewc-ws: #e6e9f0;
  --ewc-chip: #eef2f8;
  --ewc-skip: #8f98aa;
  --ewc-rowno: 38px;
}
.ewc .ewc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* 나란히/쌓기 기준은 쪽 본문 폭 하나로 정한다(입출력 영역 폭이 약 900px 이상일 때만 나란히). */
.ewc .ewc-content { container-type: inline-size; }

/* 배치: 좁으면 입력 위·결과 아래, 넓으면 입력 | 화살표 여백 | 결과 */
.ewc .ewc-io { position: relative; margin: 18px 0; min-width: 0; }
.ewc .ewc-io-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: stretch; min-width: 0; }
.ewc .ewc-io-in, .ewc .ewc-io-out { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ewc .ewc-io-gap { display: none; min-width: 0; }
.ewc .ewc-io-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ewc .ewc-io-svg path.ewc-line { fill: none; stroke: var(--ewc-green); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; }
.ewc .ewc-io-svg path.ewc-head { fill: var(--ewc-green); stroke: none; }

/* 이름표 */
.ewc .ewc-view { min-width: 0; display: flex; flex-direction: column; }
.ewc .ewc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
.ewc .ewc-role { font-weight: 700; color: var(--ewg-ink); }
.ewc .ewc-view--result .ewc-role { color: var(--ewc-green); }
.ewc .ewc-where, .ewc .ewc-ctx {
  padding: 1px 8px; border-radius: 999px; background: var(--ewc-green-soft); color: #14663f; font-weight: 600;
}
.ewc .ewc-ctx { background: var(--ewc-chip); color: var(--ewg-muted); }
.ewc .ewc-fchip {
  min-width: 0; max-width: 100%; padding: 2px 10px; border: 1px solid var(--ewc-line); border-radius: 999px;
  background: #fff; overflow-wrap: anywhere;
}
.ewc .ewc-stab {
  padding: 1px 10px; border: 1px solid var(--ewc-line); border-bottom-width: 2px; border-radius: 6px 6px 0 0;
  background: var(--ewc-head); color: var(--ewg-ink);
}

/* 격자: 표는 내용 폭으로 두고, 넘치면 이 상자 안에서만 가로로 넘긴다(칸 글자를 자르지 않는다). */
.ewc .ewc-scrollwrap { position: relative; min-width: 0; }
.ewc .ewc-scrollwrap::after {
  content: ""; position: absolute; top: 2px; bottom: 2px; right: 2px; width: 14px; z-index: 3; pointer-events: none;
  background: linear-gradient(to left, rgba(40, 52, 72, .2), rgba(40, 52, 72, 0)); opacity: 0;
}
.ewc .ewc-scrollwrap.has-right::after { opacity: 1; }
.ewc .ewc-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--ewc-line); border-radius: 6px; background: #fff; }
.ewc .ewc-scroll:focus-visible { outline: 2px solid var(--ewg-blue); outline-offset: 2px; }
.ewc .ewc-view--result .ewc-scroll { border: 2px solid var(--ewc-green); }
.ewc .ewc-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; font-size: 13px; line-height: 1.4; }
.ewc .ewc-table th, .ewc .ewc-table td {
  border: 0; border-right: 1px solid var(--ewc-line); border-bottom: 1px solid var(--ewc-line);
  padding: 4px 10px; text-align: left; vertical-align: top; white-space: nowrap;
}
.ewc .ewc-table tr > :last-child { border-right: 0; }
.ewc .ewc-table tbody tr:last-child > * { border-bottom: 0; }
.ewc .ewc-table td { position: relative; }
.ewc .ewc-table thead th, .ewc .ewc-table .ewc-corner, .ewc .ewc-table tbody th {
  background: var(--ewc-head); color: var(--ewc-head-ink); font-weight: 600; text-align: center; font-size: 12px;
}
.ewc .ewc-table tbody th, .ewc .ewc-table .ewc-corner {
  box-sizing: border-box; width: var(--ewc-rowno); min-width: var(--ewc-rowno); max-width: var(--ewc-rowno); padding: 4px 4px;
}
/* 엑셀 틀 고정처럼 행 번호 열과 첫 데이터 열을 붙박는다(표가 넘칠 때만 의미가 있다). */
.ewc .ewc-table tr > :nth-child(1) { position: sticky; left: 0; z-index: 2; }
.ewc .ewc-table tr > :nth-child(2) { position: sticky; left: var(--ewc-rowno); z-index: 2; }
.ewc .ewc-table td:nth-child(2) { background-color: #fff; }
/* 열 경계에 맞춰 넘길 수 있도록 표 끝에 두는 빈 여백 */
.ewc .ewc-scrollwrap.pad-8 .ewc-table { margin-right: 8px; }
.ewc .ewc-scrollwrap.pad-16 .ewc-table { margin-right: 16px; }
.ewc .ewc-scrollwrap.pad-24 .ewc-table { margin-right: 24px; }
.ewc .ewc-scrollwrap.pad-32 .ewc-table { margin-right: 32px; }
.ewc .ewc-scrollwrap.pad-40 .ewc-table { margin-right: 40px; }
.ewc .ewc-scrollwrap.pad-48 .ewc-table { margin-right: 48px; }
.ewc .ewc-scrollwrap.pad-56 .ewc-table { margin-right: 56px; }
.ewc .ewc-scrollwrap.pad-64 .ewc-table { margin-right: 64px; }
.ewc .ewc-scrollwrap.pad-72 .ewc-table { margin-right: 72px; }
.ewc .ewc-scrollwrap.pad-80 .ewc-table { margin-right: 80px; }
.ewc .ewc-scrollwrap.pad-88 .ewc-table { margin-right: 88px; }
.ewc .ewc-scrollwrap.pad-96 .ewc-table { margin-right: 96px; }
.ewc .ewc-scrollwrap.pad-104 .ewc-table { margin-right: 104px; }
.ewc .ewc-scrollwrap.pad-112 .ewc-table { margin-right: 112px; }
.ewc .ewc-scrollwrap.pad-120 .ewc-table { margin-right: 120px; }
.ewc .ewc-scrollwrap.pad-128 .ewc-table { margin-right: 128px; }
.ewc .ewc-scrollwrap.pad-136 .ewc-table { margin-right: 136px; }
.ewc .ewc-scrollwrap.pad-144 .ewc-table { margin-right: 144px; }
.ewc .ewc-scrollwrap.pad-152 .ewc-table { margin-right: 152px; }
.ewc .ewc-scrollwrap.pad-160 .ewc-table { margin-right: 160px; }
.ewc .ewc-scrollwrap.pad-168 .ewc-table { margin-right: 168px; }
.ewc .ewc-scrollwrap.pad-176 .ewc-table { margin-right: 176px; }
.ewc .ewc-scrollwrap.pad-184 .ewc-table { margin-right: 184px; }
.ewc .ewc-scrollwrap.pad-192 .ewc-table { margin-right: 192px; }
.ewc .ewc-scrollwrap.pad-200 .ewc-table { margin-right: 200px; }
.ewc .ewc-scrollwrap.pad-208 .ewc-table { margin-right: 208px; }
.ewc .ewc-scrollwrap.pad-216 .ewc-table { margin-right: 216px; }
.ewc .ewc-scrollwrap.pad-224 .ewc-table { margin-right: 224px; }
.ewc .ewc-scrollwrap.pad-232 .ewc-table { margin-right: 232px; }
.ewc .ewc-scrollwrap.pad-240 .ewc-table { margin-right: 240px; }
.ewc .ewc-scrollwrap.no-pin .ewc-table tr > :nth-child(2) { position: relative; left: auto; z-index: 0; }
.ewc .ewc-table tr.is-gap > th, .ewc .ewc-table tr.is-gap > td { border-top: 2px dotted var(--ewc-skip); }
.ewc .ewc-table tr:has(+ tr.is-gap) > * { border-bottom-width: 0; }
.ewc .ewc-table tr.is-gap > th::before { content: "\22EE"; display: inline; margin-right: 2px; color: var(--ewc-skip); }
.ewc .ewc-scrollwrap.has-left .ewc-table tr > :nth-child(2) { box-shadow: 6px 0 6px -4px rgba(40, 52, 72, .28); }
.ewc .ewc-c--head { font-weight: 700; }
.ewc .ewc-c.is-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ewc .ewc-table .ewc-c.is-new { background-color: var(--ewc-green-soft); }
.ewc .ewc-table .ewc-c.is-changed { background-color: var(--ewc-amber-soft); }
.ewc .ewc-old {
  display: block; min-width: 1.5em; min-height: 1.2em; color: var(--ewc-amber-ink); opacity: .65;
  text-decoration: line-through; font-size: 12px;
}
.ewc .ewc-note { display: block; color: var(--ewg-muted); font-size: 11px; line-height: 1.3; font-weight: 600; }
.ewc .ewc-c.is-num .ewc-note { text-align: right; }
.ewc .ewc-ws { white-space: pre; background: var(--ewc-ws); border-radius: 2px; }
/* 생략 표시 줄은 입력·결과가 한 장씩일 때 같은 높이에 놓이도록 맨 아래에 붙인다. */
.ewc .ewc-more { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ewg-muted); }
.ewc .ewc-io-grid:has(.ewc-io-in > .ewc-view:only-child):has(.ewc-io-out > .ewc-view:only-child) .ewc-view { flex: 1; }

/* 연결 번호(모든 폭): 연결 순서대로 출발 칸·도착 칸 안쪽 왼쪽, 칸 세로 가운데에 놓는다. */
.ewc .ewc-badge, .ewc .ewc-sw-num {
  box-sizing: border-box; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 999px;
  background: var(--ewc-green); color: #fff; font-size: 9px; line-height: 14px; font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ewc .ewc-badge { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; }
/* 번호는 칸 안쪽 왼쪽에 두고(칸·표 테두리를 넘지 않는다), 연결된 칸은 글자가 번호에 가리지 않도록 왼쪽 안쪽 여백을 넓힌다. */
.ewc .ewc-table td.is-linked { padding-left: 21px; }
/* 한 칸에 번호가 둘이면 12px 로 줄여 칸 세로 가운데 기준 위아래로 놓는다(둘 다 칸 안에 들어간다). */
.ewc .ewc-badge--of2, .ewc .ewc-badge--of3 { min-width: 12px; height: 12px; padding: 0 1px; font-size: 8px; line-height: 12px; }
.ewc .ewc-badge--of2.ewc-badge--1 { transform: translateY(-100%); }
.ewc .ewc-badge--of2.ewc-badge--2 { transform: translateY(0); }
.ewc .ewc-badge--of3.ewc-badge--1 { transform: translateY(-150%); }
.ewc .ewc-badge--of3.ewc-badge--2 { transform: translateY(-50%); }
.ewc .ewc-badge--of3.ewc-badge--3 { transform: translateY(50%); }
/* 연결된 칸(출발·도착)에는 화살표와 같은 색 안쪽 테두리를 둔다. */
.ewc .ewc-c.is-linked { box-shadow: inset 0 0 0 1.5px var(--ewc-green); }
.ewc .ewc-scrollwrap.has-left .ewc-table .ewc-c.is-linked:nth-child(2) { box-shadow: inset 0 0 0 1.5px var(--ewc-green), 6px 0 6px -4px rgba(40, 52, 72, .28); }

/* 범례는 쪽 「사례 읽는 법」 아래 한 번만 둔다. 연결 견본은 번호 원 + 화살표. */
.ewc .ewc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ewg-ink); }
.ewc .ewc-legend li { display: flex; align-items: center; gap: 6px; }
.ewc .ewc-reading .ewc-legend li + li { margin-top: 0; }
.ewc .ewc-sw { width: 18px; height: 14px; border: 1px solid var(--ewc-line); border-radius: 3px; }
.ewc .ewc-sw--new { background: var(--ewc-green-soft); }
.ewc .ewc-sw--changed { background: var(--ewc-amber-soft); }
.ewc .ewc-sw-arrow path:first-child { fill: none; stroke: var(--ewc-green); stroke-width: 2; stroke-linecap: round; }
.ewc .ewc-sw-arrow path:last-child { fill: var(--ewc-green); }

@container (min-width: 942px) {
  .ewc .ewc-io-grid { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 0; row-gap: 0; }
  .ewc .ewc-io-gap { display: block; }
}
@container (max-width: 941px) {
  .ewc .ewc-io-svg { display: none; }
}